Explains how style rules are used to style your chart and data rules to style application data.

The Style Rules pane displays the Options for styling your chart as a whole and data rules for styling the application data. When you save a chart as a project, the style rules (options and data rules) are saved in a style sheet ( .css file) with the CSS for Java syntax. For details of the syntax, see Using CSS syntax in the style sheet in Developing with the SDK.

The Options section of the Style Rules pane allows you to style the chart at the level of the chart as a whole and of its individual subcomponents. Each chart you work on has its own style sheet and therefore its own options.

There are Options for the chart component and its subcomponents. Options are controlled through properties in the Styling Customizer for the chart component or each of its subcomponents. The Styling Customizer appears in the lower pane of the Designer when you select the option in the Style Rules pane.

The following figure shows the different parts of a Gantt chart.

The following figure shows the different parts of a Schedule chart.

You can customize the styling of the Gantt chart through options that apply to:

You can customize the weekend grid through properties that control:

You can use all the properties listed for Options in this section directly in the Designer. To control styling through other properties, you must use the SDK. See Styling Gantt and Schedule chart components in Developing with the SDK.

The following table shows the components and their corresponding CSS element type and ID together with their properties available in the Designer and the property type. See also Styling properties.

A data rule is a style rule that applies to the data in the chart. It consists of an object type and attribute conditions followed by declarations.

A data rule is defined on a group of data model objects belonging to the same class, or having a common ascendant class, or belonging to the same user-defined type. It is applied to the renderers used to visualize the data in the chart.

In the Designer, you see the data rules in the upper left pane, titled Style Rules, following the Options. This pane shows a hierarchical view of the rules depending on how specific they are.

In the Designer, you see the declarations in terms of property values in the Styling Customizer or the optional list of Styling Properties.

The Styling Customizer is a user-friendly way to see properties and their values, subdivided into categories by different tabs and with explanatory names. You use a Styling Customizer to customize an option or a renderer by setting property values. The Styling Customizer for the current rule selection is displayed in the lower pane of the Designer.

For each property, the Styling Customizer displays one of the following according to the type of value concerned:

The Styling Properties list gives a view of properties that is closer to the API; it comprises a single exhaustive list and shows the API (short) names. To open the Styling Properties pane, choose View > Styling Properties.

The list shows the locally set properties (those set in the selected rule), in alphabetical order, followed by the inherited properties (those set in previous rules), in alphabetical order. The status icons next to each property show which property values are local and which inherited:

Click the arrow icon to toggle the status.

The principles of inheritance and overriding apply to style rules. This allows you to write default rules for all model objects of a certain type and then to refine the customization with more specific rules that apply to subsets of these model objects.

The priority of a style rule depends on how specific it is and on the order with respect to other style rules of the same specificity. In general, a rule with more components in its selector has a higher priority because it is more specific. Note that a more specific rule sets property values for some model objects but not for others. When the specificity of two rules is the same, the lowest rule in the tree has priority.

Different rules apply to different groups of objects, but several rules can apply to the same object. If the same property is set on one object in several rules, only the setting in the rule with the highest priority is retained; this rule overrides all the previous ones.

To style a model object, the Designer sorts all rules that match it in priority order and then applies the settings they contain to the graphic object representing the model object.

If you change a property in a Styling Customizer, and you do not immediately see the effect of the change, this is probably because the selected rule has been overridden by a later rule. You can look at the other rules at the same level in the tree to see if the same property is set in one of these rules.

A renderer can have default values for its properties, which can be set at creation time.

In a style sheet, some property values may be inherited at all levels and therefore come from the default values of the renderer. If you change such a property value in a style rule to reflect a temporary state (such as selection), when the temporary state no longer applies (the object is deselected), the property value does not automatically revert to the default value. This situation arises because there is no style rule to set the default value. You therefore need to include this setting explicitly in the general rule for the renderer.

If you do not change such a property value according to a temporary state in a style rule, you can leave the implicit default value and not worry about it.