Angular Chart - commonAxisSettings.grid
Configures the grid.
Gridlines can be considered extensions of ticks.
jQuery
$('#chart').dxChart({ commonAxisSettings: { grid: { visible: true, color: 'blue', opacity: 0.25, width: 2, }, }, })
Angular
<dx-chart ... > <dxo-common-axis-settings> <dxo-grid [visible]="true" color="blue" [opacity]="0.25" [width]="2" ></dxo-grid> </dxo-common-axis-settings> </dx-chart>
Vue
<template> <DxChart ... > <DxCommonAxisSettings> <DxGrid :visible="true" color="blue" :opacity="0.25" :width="2" /> </DxCommonAxisSettings> </DxChart> </template> <script setup lang="ts"> import { DxChart, DxCommonAxisSettings, DxGrid } from 'devextreme-vue/chart'; </script>
React
import { Chart, CommonAxisSettings, Grid } from 'devextreme-react/chart'; function App() { return ( <Chart ... > <CommonAxisSettings> <Grid visible={true} color="blue" opacity={0.25} width={2} /> </CommonAxisSettings> </Chart> ) }
The commonAxisSettings.grid object specifies common settings for all gridlines on a chart. To configure only those grid lines that descend from a particular axis, use the following objects:
Axis-specific settings override common settings.
See Also
- commonAxisSettings.minorGrid - configures the minor grid built on minor ticks.
color
Specifies the color of grid lines.
This property supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
opacity
Specifies how transparent grid lines should be.
This property accepts a value from 0 to 1, where 0 makes grid lines completely transparent, and 1 makes them opaque.
If you have technical questions, please create a support ticket in the DevExpress Support Center.