grid

An object defining the configuration options for the grid lines of an axis in the dxChart widget.

Type: Object

Grid lines are the reference lines used to improve the readability of a chart's visual data. Grid lines are drawn from axis ticks throughout the entire chart. The grid object exposes the properties that allow you to specify visibility and appearance settings for axis grid lines. To learn more about axis grid lines and their options, refer to the Grid topic.

Show Example:
jQuery

In this example, the value axis gridlines are displayed.


                                    

                                    

color

Specifies a color for grid lines.

Type: String
Default Value: '#d3d3d3'

This option supports the following colors.

  • hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • predefined/cross-browser color names
  • predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In this example, the value axis grid lines are teal.


                                    

                                    

opacity

Specifies an opacity for grid lines.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, the opacity option of the value axis grid lines is set to 0.75.


                                    

                                    

visible

Indicates whether or not the grid lines of an axis are visible.

Type: Boolean
Default Value: false
Accepted Values: true|false

Show Example:
jQuery

In this example, you can change the visibility of the value axis grid lines using the check box at the bottom.


                                    

                                    

width

Specifies the width of grid lines.

Type: Number
Default Value: 1

Show Example:
jQuery

In this example, the width option of the value axis gridlines is altered to 3 pixels.