React Chart - argumentAxis.minorGrid
Configures the minor grid.
In addition to the major grid, DevExtreme Chart can display a minor grid following the placement of minor ticks.
jQuery
$('#chart').dxChart({ // ... commonAxisSettings: { minorGrid: { visible: true, color: 'blue', opacity: 0.1, width: 1, }, }, })
Angular
<dx-chart ... > <dxo-common-axis-settings> <dxo-minor-grid [visible]="true" color="blue" [opacity]="0.1" [width]="1" ></dxo-minor-grid> </dxo-common-axis-settings> </dx-chart>
Vue
<template> <DxChart ... > <DxCommonAxisSettings> <DxMinorGrid :visible="true" color="blue" :opacity="0.1" :width="1" /> </DxCommonAxisSettings> </DxChart> </template> <script setup lang="ts"> import { DxChart, DxCommonAxisSettings, DxMinorGrid } from 'devextreme-vue/chart'; </script>
React
import { Chart, CommonAxisSettings, MinorGrid } from 'devextreme-react/chart'; function App() { return ( <Chart ... > <CommonAxisSettings> <MinorGrid visible={true} color="blue" opacity={0.1} width={1} /> </CommonAxisSettings> </Chart> ) }
The commonAxisSettings.minorGrid object specifies common settings for all minor gridlines in a chart. To configure only those gridlines that descend from an axis of your choice, use the following objects:
Axis-specific settings override common settings.
- If you display the minor grid alone, it may impair chart readability. We recommend you implement the minor grid in conjunction with the major grid.
- The component does not display the minor grid on "discrete" axes.
color
Specifies a color for the lines of the minor grid.
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 the lines of the minor grid should be.
This property accepts a value from 0 to 1, where 0 makes the lines of the minor grid completely transparent, and 1 makes them opaque.
If you have technical questions, please create a support ticket in the DevExpress Support Center.