Vue Chart - argumentAxis.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

• argumentAxis.stripStyle - specifies the appearance of those strips that belong to the argument 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

When argumentAxis.type is "linear" or "logarithmic", endValue specifies the strip's end. When argumentAxis.type is "discrete", endValue defines at which discrete argument the strip ends. In discrete axes, strips start and end at the edges of discrete argument areas.

To align discrete axis strips with ticks, set argumentAxis.discreteAxisDivisionMode to "betweenLabels". To align strips with ticks when discreteAxisDivisionMode is "crossLabels", implement an area series instead of a strip. The following image demonstrates the effect of discreteAxisDivisionMode on an argument axis strip:

1. Start value
2. Strip area
3. End value

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

See Also

• argumentAxis.stripStyle.label - specifies a unified style for the labels of those strips that belong to the argument 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.

When argumentAxis.type is "linear" or "logarithmic", startValue specifies the strip's start. When argumentAxis.type is "discrete", startValue defines at which discrete argument the strip starts. In discrete axes, strips start and end at the edges of discrete argument areas.

To align discrete axis strips with ticks, set argumentAxis.discreteAxisDivisionMode to "betweenLabels". To align strips with ticks when discreteAxisDivisionMode is "crossLabels", implement an area series instead of a strip. The following image demonstrates the effect of discreteAxisDivisionMode on an argument axis strip:

1. Start value
2. Strip area
3. End value