stripStyle

Configures the appearance of strips.

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.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can see the default appearance of strips.


                                    

                                    

In this example, you can see the default appearance of strips.


                                    

                                    

In this example, you can see the default appearance of strips.


                                    

                                    

label

Configures the appearance of strip labels.

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.
Show Example:
AngularJS
Knockout
jQuery

In this example, you can see the default appearance of strip labels.


                                    

                                    

In this example, you can see the default appearance of strip labels.


                                    

                                    

In this example, you can see the default appearance of strip labels.


                                    

                                    

paddingLeftRight

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

Type:

Number

Default Value: 10

This option 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.

Type:

Number

Default Value: 5

This option 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.