Vue Chart - valueAxis.strips

A strip is a colored piece of the chart's background that highlights a range of values. Strips allow a viewer to see whether a certain series point falls in or out of a range.

Each object in the strips array configures a single strip. To limit a strip, set its startValue and endValue properties. You may set only one of them, in which case the strip will not have a limit at one end. Note that setting the color property is also necessary for a strip to be displayed.

See Also

• valueAxis.stripStyle - specifies the appearance of those strips that belong to the value axis.
• commonAxisSettings.stripStyle - specifies the appearance of all strips in the UI component.

This property supports the following colors:

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG colors
• Paint server address

Setting the text property is necessary for a strip label to be displayed.

See Also

• valueAxis.stripStyle.label - specifies a unified style for the labels of those strips that belong to the value axis.
• commonAxisSettings.stripStyle.label - specifies a unified style for the labels of all strips in the UI component.

This property depends on the label.horizontalAlignment in the following way.

• horizontalAlignment is "left" → padding applies to the left border of a strip;
• horizontalAlignment is "right" → padding applies to the right border of a strip;
• horizontalAlignment is "center" → padding is calculated automatically.

See Also

• commonAxisSettings.stripStyle.label.horizontalAlignment - aligns strip labels in the horizontal direction. Applies to all strips.
• argumentAxis.stripStyle.label.horizontalAlignment - aligns strip labels in the horizontal direction. Applies to the strips belonging to the argument axis.
• valueAxis.stripStyle.label.horizontalAlignment - aligns strip labels in the horizontal direction. Applies to the strips belonging to the value axis.

This property depends on the label.verticalAlignment in the following way.

• verticalAlignment is "top" → padding applies to the top border of a strip;
• verticalAlignment is "bottom" → padding applies to the bottom border of a strip;
• verticalAlignment is "center" → padding is calculated automatically.

See Also

• commonAxisSettings.stripStyle.label.verticalAlignment - aligns strip labels in the vertical direction. Applies to all strips.
• argumentAxis.stripStyle.label.verticalAlignment - aligns strip labels in the vertical direction. Applies to the strips belonging to the argument axis.
• valueAxis.stripStyle.label.verticalAlignment - aligns strip labels in the vertical direction. Applies to the strips belonging to the value axis.