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 axes grid lines are made visible.


                                    

                                    

color

Specifies a color for grid lines.

Type: String
Default Value: '#808080'

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 grid lines of both the argument and value axes are colored in teal.


                                    

                                    

opacity

Specifies an opacity for grid lines.

Type: Number
Default Value: 0.35

Show Example:
jQuery

In this example, the opacity option of the axes 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, the axes grid lines are made visible.


                                    

                                    

width

Specifies the width of grid lines.

Type: Number
Default Value: 1

Show Example:
jQuery

In this example, the common width option of the grid lines is altered to 3 pixels.