JavaScript/jQuery Chart - valueAxis.minorGrid

Configures the minor grid.

Type:

Object

In addition to the major grid, DevExtreme Chart can display a minor grid following the placement of minor ticks.

DevExtreme HTML5 Charts MinorGridLines

jQuery
index.js
$('#chart').dxChart({
    // ...
    commonAxisSettings: {
        minorGrid: {
            visible: true,
            color: 'blue',
            opacity: 0.1,
            width: 1,
        },
    },
})
Angular
app.component.html
<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
App.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
App.tsx
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.

NOTE
  • 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.

Type:

String

Default Value: '#d3d3d3'

This property supports the following colors:

opacity

Specifies how transparent the lines of the minor grid should be.

Type:

Number

| undefined
Default Value: undefined

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.

visible

Makes the minor grid visible.

Type:

Boolean

Default Value: false

width

Specifies a width for the lines of the minor grid in pixels.

Type:

Number

Default Value: 1