commonAxisSettings minorGrid

Configures the minor grid.

Type: Object

In addition to the major grid built on major ticks, the Chart widget provides the minor grid built on minor ticks.

DevExtreme HTML5 Charts MinorGridLines

NOTE: Neither minor ticks, nor the minor grid can be displayed if the axis is of the "discrete" type.

The commonAxisSettings | minorGrid object specifies common settings for all minor grid lines in the chart. To configure only those grid lines that descend from a particular axis, use the following objects.

Axis-specific settings override common settings.

NOTE: Displaying the minor grid without the major grid may impair the readability of a chart. To prevent this situation, we recommend you use the minor grid only in conjunction with the major grid.

Show Example:
AngularJS
Knockout
jQuery

In this example, click the check box under the chart to show/hide the minor grid.

<div ng-controller="chartController">
    <div id="chartContainer" style="height:400px; max-width:700px; margin:0 auto" dx-chart="{
        dataSource: data,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        animation: false,
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        commonAxisSettings: {
            grid: { visible: true },
            minorGrid: { visible: false }
        },
        bindingOptions: {
            'commonAxisSettings.minorGrid.visible': 'checkBoxState'
        }
    }"></div>
    <div style="text-align:center">
        <div style="margin-top:5px" ng-model="checkBoxState" dx-check-box="{
            text: 'Show the minor grid'
        }"></div>
    </div>
</div>
var population = [
    { year: 1950, europe: 549043000, americas: 339484000, africa: 228827000 },
    { year: 1960, europe: 605517000, americas: 424791000, africa: 285270000 },
    { year: 1970, europe: 657369000, americas: 519017000, africa: 366475000 },
    { year: 1980, europe: 694510000, americas: 618950000, africa: 478459000 },
    { year: 1990, europe: 723248000, americas: 727489000, africa: 629987000 },
    { year: 2000, europe: 729105000, americas: 841695000, africa: 808304000 },
    { year: 2010, europe: 742452000, americas: 942692000, africa: 1031084000 }
];

angular
    .module('myApp', ['dx'])
    .controller('chartController', function ($scope) {
        $scope.data = population;
        $scope.checkBoxState = false;
    });

angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

In this example, click the check box under the chart to show/hide the minor grid.

<div id="chartContainer" style="height:400px; max-width:700px; margin:0 auto" data-bind="dxChart: {
    dataSource: data,
    commonSeriesSettings: {
        argumentField: 'year'
    },
    series: [
        { valueField: 'europe', name: 'Europe' },
        { valueField: 'americas', name: 'Americas' },
        { valueField: 'africa', name: 'Africa' }
    ],
    animation: false,
    valueAxis: {
        label: { format: 'largeNumber' }
    },
    commonAxisSettings: {
        grid: { visible: true },
        minorGrid: { visible: checkBoxState }
    }
}"></div>
<div style="text-align:center">
    <div style="margin-top:5px" data-bind="dxCheckBox: {
        text: 'Show the minor grid',
        value: checkBoxState
    }"></div>
</div>
var population = [
    { year: 1950, europe: 549043000, americas: 339484000, africa: 228827000 },
    { year: 1960, europe: 605517000, americas: 424791000, africa: 285270000 },
    { year: 1970, europe: 657369000, americas: 519017000, africa: 366475000 },
    { year: 1980, europe: 694510000, americas: 618950000, africa: 478459000 },
    { year: 1990, europe: 723248000, americas: 727489000, africa: 629987000 },
    { year: 2000, europe: 729105000, americas: 841695000, africa: 808304000 },
    { year: 2010, europe: 742452000, americas: 942692000, africa: 1031084000 }
];

var viewModel = {
    data: population,
    checkBoxState: ko.observable(false)
};

ko.applyBindings(viewModel);

In this example, click the check box under the chart to show/hide the minor grid.

<div id="chartContainer" style="height:400px; max-width:700px; margin:0 auto"></div>
<div style="text-align:center">
    <div id="checkBoxContainer" style="margin-top:5px"></div>
</div>
var population = [
    { year: 1950, europe: 549043000, americas: 339484000, africa: 228827000 },
    { year: 1960, europe: 605517000, americas: 424791000, africa: 285270000 },
    { year: 1970, europe: 657369000, americas: 519017000, africa: 366475000 },
    { year: 1980, europe: 694510000, americas: 618950000, africa: 478459000 },
    { year: 1990, europe: 723248000, americas: 727489000, africa: 629987000 },
    { year: 2000, europe: 729105000, americas: 841695000, africa: 808304000 },
    { year: 2010, europe: 742452000, americas: 942692000, africa: 1031084000 }
];

$(function () {
    var chart = $("#chartContainer").dxChart({
        dataSource: population,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        animation: false,
        valueAxis: {
            label: { format: 'largeNumber' }
        },
        commonAxisSettings: {
            grid: { visible: true },
            minorGrid: { visible: false }
        }
    }).dxChart('instance');
	
    $("#checkBoxContainer").dxCheckBox({
        text: 'Show the minor grid',
        value: false,
        onValueChanged: function (e) {
            chart.option('commonAxisSettings.minorGrid.visible', e.value);
        }
    });
});

color

Specifies a color for the lines of the minor grid.

Type: String
Default Value: '#d3d3d3'

This option supports the following colors.

opacity

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

Type: Number
Default Value: undefined

This option 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