Styling Chart Widgets
Using Style Themes
The style theme determines the default color of each data series within a chart. When you replace the default PTC Convergence Theme with your own style theme, we recommend that you define a consistent color palette for your chart visualizations. Use a different color for each series, and make sure that the contrast is sufficient. Using low contrast between different data series makes the chart data difficult to read.
To style charts on a style theme level, do the following:
1. In Composer, open a style theme entity.
2. On the Styles tab, do the following:
◦ Under Global, change the available options. Note that these options affect all widgets in your mashup.
◦ Under Elements, expand Charts, and then select a color for each data series.
3. Click Save.
The defined data series colors are used to style each data series in charts.
For more information about style themes, see Style Themes.
Using Style Properties
To configure advanced style properties for each chart widget, use the options that are available on Style Properties panel:
1. Select a chart widget on the canvas, then open the Style Properties panel. The different chart states and data series numbers are listed.
◦ To edit the style of each series on the chart, expand a series, then edit the styles for the legend marker or the series bar as required.
◦ To edit a state, expand any state such as the base state, and then expand any part such as bar. Style properties for the part are listed. For example, you can edit the value labels by setting the background and color options.
2. Click Save, then view the mashup.
The style property changes are displayed for the chart widget in its base state. See Using the Style Properties Panel for more information.
Using State Definitions
Before applying state formatting, make sure that the applied state formatting does not conflict with the style theme colors. To apply state formatting to a chart do the following:
1. Select a chart widget on the canvas, and then open the Properties panel. The widget properties are listed.
2. Click the State Formatting button next to the SeriesStyle property. The state formatting dialog box opens.
◦ When NumberOfSeries is set to auto, one state formatting property is displayed.
◦ When NumberOfSeries is set to a specific number, a state formatting property is displayed for each data series.
3. In state formatting dialog box, optionally, select a dependent field from the linked infotable. The field specifies the data to use when evaluating the state formatting conditions. To style each series based on its own value, leave the dependent field empty.
4. Select a state definition entity, and then click Done.
5. Save and then view the mashup.
 |
Styles applied using state formatting override style themes, style properties, and style definitions.
|
At runtime, the chart series color changes based on the current value of the data series. For more information, see Example: Applying State Formatting to Charts.