Vue Chart - valueAxis.stripStyle

Configures the appearance of strips.

Selector: DxStripStyle
Type:

Object

DevExtreme HTML5 Charts Strips

The commonAxisSettings.stripStyle object specifies common settings for all strips in the chart. To configure only those strips that belong to a particular axis, use the following objects.

To configure individual strips, use the following arrays of objects.

Individual settings override axis-specific settings which, in their turn, override common settings.

label

Configures the appearance of strip labels.

Selector: DxLabel
Type:

Object

See Also
  • argumentAxis.strips[] - declares a collection of strips belonging to the argument axis.
  • valueAxis.strips[] - declares a collection of strips belonging to the value axis.
  • argumentAxis.strips[].label.text - specifies the label of a strip belonging to the argument axis.
  • valueAxis.strips[].label.text - specifies the label of a strip belonging to the value axis.

paddingLeftRight

Generates a pixel-measured empty space between the left/right border of a strip and the strip label.

Selector: padding-left-right
Type:

Number

Default Value: 10

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.

DevExtreme HTML5 Charts StripPadding

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.

paddingTopBottom

Generates a pixel-measured empty space between the top/bottom border of a strip and the strip label.

Selector: padding-top-bottom
Type:

Number

Default Value: 5

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.

DevExtreme HTML5 Charts StripPadding

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.