Vue Chart - commonAxisSettings.grid

Configures the grid.

Selector: DxGrid
Type:

Object

Gridlines can be considered extensions of ticks.

DevExtreme HTML5 Charts GridLines

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

Type:

String

Default Value: '#d3d3d3'

This property supports the following colors:

opacity

Specifies how transparent grid lines should be.

Type:

Number

| undefined
Default Value: undefined

This property accepts a value from 0 to 1, where 0 makes grid lines completely transparent, and 1 makes them opaque.

visible

Makes grid lines visible.

Type:

Boolean

Default Value: false

width

Specifies the width of grid lines in pixels.

Type:

Number

Default Value: 1