Skip to main content

States

Describes chart state settings.

State Behaviors

A number of objects have state settings that define their appearance when in a particular state such as a button's hover appearance.

Cascading States

States of an object are interpreted as having an order in which they occur, for example, a button has states such as Normal, Hover, Clicked, and they occur in that order. JSC implements functionality that considers this order and helps cascade the settings from one state to the next. For example, if a font is specified for the normal state, it will propagate to subsequent states automatically and not require the user to specify the same setting for each state. If a setting is specified for the hover state, it will propagate to the clicked state, but not back to the normal state.

Cascading state settings don't just propagate through states, settings of the previous state are used as a starting point, and then they are modified so that the visual difference between states is still obvious. For example, setting a button's fill color to orange will propagate that color to the hover state but will darken it slightly to indicate the button is in a different state.

Note: This type of behavior also exists in other scenarios such as when setting a button's fill property, a similar color will automatically propagate to the button's outline color unless otherwise specified.

This functionality is highly tuned to give the best visual results with the least amount of settings and let the developer focus on other core requirements.

The following table lists objects that implement states and the states available for each.

Note: These objects all include a Normal state which is implied but not specified below. The API for these normal settings are at the objects root like obj.color whereas setting properties for states listed below require setting similar to obj.states.hover.color.
ObjectStatesDescription
legendEntryHover, HiddenLegend entry states.
seriesHover SelectSeries States. Applicable mainly to line/area series types.
buttonHover, SelectStates for resetZoom, print,export buttons include only hover. Select state applies to navigator quickZoom buttons.
pointHover, SelectData point states.
pointMarkerHover, SelectData point marker states.

Data Object States

Note: Data point's 'Select' state requires that its parent series pointSelection property is set to true.

Data objects including series, point, and pointMarker have the most complex sequence and architecture of state property propagation because points include point markers. However, this complexity is there working behind the scenes and reduces the need to think about all the states and settings. The intention of this functionality is to simply work as expected despite having a complicated API architecture. For example, with a marker series type, the setting point.hover.outline.color setting can also be set through point.marker.states.hover.outline.color or point.states.marker.outline.color. Each of these should work and the approach is up to the developer, however, using setting point.hover.outline.color is ideal because it will affect the data point's outline whether it's a marker, bar, or any other type that uses an outline. This API is there for when bars and other series types support markers.

Reference:
Bar Hover State Sample Column series type hover and select states.
Legend Styling Sample Demonstrates a number of legend box styling options.
Toolbar Styling Sample Styles the export toolbar buttons.