Configuration commonAxisSettings

An object defining the configuration options that are common for all axes of the dxChart widget.

Type: Object

Use this object's properties to set the options for all chart axes at once. The option values will be applied to the argument axis and all values axes, which are defined in the valueAxis array. To set a common axis option for an axis individually, use the corresponding valueAxis or argumentAxis object. Values that are set individually override their corresponding common values.

Show Example:
jQuery

Here, the color and width options are changed for both axes.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        commonAxisSettings: {
            visible: true,
            color: 'black',
            width: 2
        }
    });
});

color

Specifies the color of the line that represents an axis.

Type: String
Default Value: 'rgba(128,128,128,0.35)'

This option supports the following colors.

  • hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • predefined/cross-browser color names
  • predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In this example, the common color option is set to green.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        commonAxisSettings: {
            visible: true,
            color: 'green'
        }
    });
});

discreteAxisDivisionMode

Specifies whether ticks/grid lines of a discrete axis are located between labels or cross the labels.

Type: String
Default Value: 'betweenLabels'
Accepted Values: 'betweenLabels' | 'crossLabels'

When a discrete axis is divided, its ticks/grid lines are located between labels by default. If this is not appropriate, use the discreteAxisDivisionMode property to set the required mode for positioning ticks and grid lines on a discrete axis.

Show Example:
jQuery

In the following example, you can note the difference between two modes of positioning ticks and grid lines on a discrete axis. Use the drop-down list in the bottom to change the value of the discreteAxisDivisionMode option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectContainer" style="height:40px;width:350px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    discreteAxisDivisionMode:
    <select id="dropdownListSelector">
        <option value="betweenLabels">betweenLabels</option>
        <option value="crossLabels">crossLabels</option>
    </select>
</div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            type: 'discrete',
            categories: [1950, 1960, 1970, 1980, 1990, 2000, 2010, 2020, 2030, 2040, 2050],
            position: 'top',
            grid: { visible: true }
        }
    });

    $("#dropdownListSelector").change(function () {
        var chart = $("#chartContainer").dxChart("instance");
        chart.option({
            commonAxisSettings: { discreteAxisDivisionMode: this.value }
        });
    });
});

grid

An object defining the configuration options for the grid lines of an axis in the dxChart widget.

Type: Object

Grid lines are the reference lines used to improve the readability of a chart's visual data. Grid lines are drawn from axis ticks throughout the entire chart. The grid object exposes the properties that allow you to specify visibility and appearance settings for axis grid lines. To learn more about axis grid lines and their options, refer to the Grid topic.

Show Example:
jQuery

In this example, the axes grid lines are made visible.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        commonAxisSettings: {
            grid: { visible: true }
        }
    });
});

inverted

Indicates whether or not an axis is inverted.

Type: Boolean
Default Value: false
Accepted Values: true|false

When an axis is inverted, the maximum and minimum values are reversed. As a result, the axis values increase in a direction that is opposite to the initial direction. The chart series are also inverted.

Show Example:
jQuery

Use the check box located in the bottom to invert both axes.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:40px;width:150px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    <input type="checkbox" id="invertedCheckbox"> Inverted Axes
</div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        commonAxisSettings: {
            grid: { visible: true }
        }
    });

    $("#invertedCheckbox").change(function () {
        var chart = $("#chartContainer").dxChart("instance");
        chart.option({
            commonAxisSettings: { inverted: this.checked }
        });
    });
});

label

An object defining the label configuration options that are common for all axes in the dxChart widget.

Type: Object

Axis labels represent textual values for axis ticks, which are not visible by default. Use the label object's properties to set common label options for all axes simultaneously.

To set a common option for labels of a particular axis, use the label object within the argumentAxis or valueAxis configuration object. The values that are set individually override the corresponding common values.

Show Example:
jQuery

In this example, the labels of both the argument and value axes are rotated by 45 degrees.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        commonAxisSettings: {
            label: { rotationAngle: 45 }
        }
    });
});

maxValueMargin

Specifies a coefficient for determining the maximum value's margin on an axis.

Type: Number
Default Value: 0.1

When the valueMarginsEnabled property is set to true, the axis is expanded from the min and max values. This is helpful when you need to display a series with indents from the axes. For continuous axes, you can set the maximum and minimum value margins. Use the maxValueMargin property to set how much to expand the axes from the max value. Since this property value is a coefficient, you can set a value for the axis expansion without knowledge of the actual axis values. The resulting end axis value is calculated using the following formula: max + (max - min)*maxValueMargin. Assume that min is 1960 and max is 2010. If you set maxValueMargin to 0.1, the resulting end axis value will be 2015.

MaxValueMargin ChartJS

minValueMargin

Specifies a coefficient for determining the minimum value's margin on an axis.

Type: Number
Default Value: 0.1

When the valueMarginsEnabled property is set to true, the axis is expanded beyond the max and min values. This is helpful when you need to display the series with indents from the axes. For a continuous argument axis, you can set the maximum and minimum value margins. Use the minValueMargin property to set how much to expand the axes beyond the min value. Since this property value is a coefficient, you can set a value for the axis expansion without knowledge of the actual axis values. The resulting start axis value is calculated using the following formula: min - (max - min)*minValueMargin. Assume that min is 1960 and max is 2010. If you set minValueMargin to 0.1, the resulting start axis value will be 1955.

MinValueMargin ChartJS

opacity

Specifies the opacity of the line that represents an axis.

Type: Number
Default Value: 0.35

Show Example:
jQuery

In this example, the opacity option of the axes is set to 1.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        commonAxisSettings: {
            visible: true,
            opacity: 1
        }
    });
});

placeholderSize

Specifies, in pixels, the space reserved for an axis.

Type: Number
Default Value: null

The scale's height includes the space occupied by the axis labels, axis line and the space between the axis labels and axis line.

AxisPlaceholder ChartJS

setTicksAtUnitBeginning

Indicates whether to set ticks/grid lines of a continuous axis of the 'date-time' type at the beginning of each date-time interval.

Type: Boolean
Default Value: true
Accepted Values: true|false

This property is used when a continuous axis of the 'date-time' value type is divided. If this property is set to true, axis ticks/grid lines are set at the beginning of date-time units (months, days, years, etc.). The following examples will help you understand the logic:

Tick Interval Start Value Ticks Generated
2 hours 11 (h) : 35 (min) : 25 (s) : 10 (ms) "13 (h) : 00 (min) : 00 (s) : 00 (ms)"; "15 (h): 00 (min) : 00 (s) : 00 (ms)"; ...
2 days 6 (d) : 11 (h) : 35 (min) "8 (d) : 00 (h) : 00 (min)"; "10 (d) : 00 (h) : 00 (min)"; ...
2 months March : 13 (d) "May : 0 (d)"; "July: 0 (d)"; ...

The values that will be generated for the axis can be formatted using the format property (see Data Formatting).

Show Example:
jQuery

In the example below, you can spot the difference between two modes of arranging ticks/grid lines. Use the check box in the bottom to change the value of the setTicksAtUnitBeginning option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:40px;width:200px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    <input type="checkbox" id="setTicksAtUnitBeginningCheckbox" checked> setTicksAtUnitBeginning
</div>
var dataSource = [
    { date: new Date(2012, 3, 2, 6, 35), traffic: 3 },
    { date: new Date(2012, 3, 2, 7, 50), traffic: 8 },
    { date: new Date(2012, 3, 2, 9, 0), traffic: 7 },
    { date: new Date(2012, 3, 2, 10, 20), traffic: 5 },
    { date: new Date(2012, 3, 2, 10, 50), traffic: 5 },
    { date: new Date(2012, 3, 2, 11, 35), traffic: 6 },
    { date: new Date(2012, 3, 2, 12, 14), traffic: 7 },
    { date: new Date(2012, 3, 2, 13, 42), traffic: 8 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'date'
        },
        series: [{
            valueField: 'traffic',
            type: 'spline'
        }],
        animation: false,
        argumentAxis: {
            tickInterval: { hours: 1 }
        },
        valueAxis: {
            axisDivisionFactor: 60
        },
        commonAxisSettings: {
            grid: { visible: true },
            valueMarginsEnabled: false,
            setTicksAtUnitBeginning: true
        },
        legend: { visible: false }
    });

    $('#setTicksAtUnitBeginningCheckbox').change(function () {
        var chart = $("#chartContainer").dxChart("instance");
        chart.option({
            commonAxisSettings: { setTicksAtUnitBeginning: this.checked }
        });
    });
});

stripStyle

An object defining configuration options for strip style.

Type: Object

Strips are the highlighted areas of a chart within a defined range of values (maximum and minimum) for an axis to which they belong. In general, strips are used to visually represent a range of values behind a series, to trace whether the series point values fall in or out of that range. For more details on strips, refer to the Strips topic.

To set options for configuring strip style, define the stripStyle object within the argumentAxis or valueAxis configuration object. To set common options for all strips in a chart, define the stripStyle object within the commonAxisSettings configuration object. Note that the values that are set for an individual axis override the corresponding common values.

Show Example:
jQuery

In the example below, the strip labels' text is colored in blue.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            strips: [{
                startValue: 2014, endValue: 2050, color: 'rgba(68, 100, 213, 0.2)',
                label: { text: 'Forecast' }
                }]
        },
        valueAxis: {
            strips: [
                {
                    startValue: 200, endValue: 250, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Lowest' }
                },
                { startValue: 700, endValue: 900, color: 'rgba(68, 100, 213, 0.2)' },
                {
                    startValue: 1900, endValue: 2000, color: 'rgba(68, 100, 213, 0.2)',
                    label: { text: 'Highest' }
                }
            ]
        },
        commonAxisSettings: {
            stripStyle: {
                label: { font: { color: 'blue' } }
            }
        }
    });
});

tick

An object defining the configuration options for axis ticks.

Type: Object

Ticks divide an axis into equal sections by a step whose value is determined automatically, or by the tickInterval and axisDivisionFactor options of an axis. Ticks improve the readability of charts, but are not visible in the dxChart widget by default. To set up tick configuration options, define the tick object within the argumentAxis or valueAxis configuration object. To set common options for all ticks in a chart, define the tick object within the commonAxisSettings configuration object. Note that the values that are set for an individual axis override the corresponding common values.

Show Example:
jQuery

Here, the axes ticks are visible.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        commonAxisSettings: {
            visible: true,
            tick: { visible: true }
        },
        valueAxis: {
            grid: { visible: false }
        }
    });
});

title

An object defining the title configuration options that are common for all axes in the dxChart widget.

Type: Object

Use the title object's properties to set common title options for all axes simultaneously.

To set an individual value for a common title option, use the title object within the argumentAxis or the valueAxis configuration object. The values that are set individually override the corresponding common values.

Show Example:
jQuery

In this example, the margin option of the axis titles is set 20.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        argumentAxis: {
            title: { text: 'Years' }
        },
        valueAxis: {
            title: { text: 'Population, mln' }
        },
        commonAxisSettings: {
            title: {
                margin: 20
            }
        }
    });
});

valueMarginsEnabled

Indicates whether to display series with indents from axis boundaries.

Type: Boolean
Default Value: true

For a continuous axis, you can specify how far to extend an axis from its maximum and minimum values. Use the axis' minValueMargin and maxValueMargin properties to do this.

Show Example:
jQuery

Use the check box in the bottom to enable/disable value margins for both axes.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:40px;width:200px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    <input type="checkbox" id="valueMarginsCheckbox" checked> valueMarginsEnabled
</div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        animation: false,
        commonAxisSettings: {
            grid: { visible: true }
        }
    });

    $('#valueMarginsCheckbox').change(function () {
        var chart = $("#chartContainer").dxChart("instance");
        chart.option({
            commonAxisSettings: { valueMarginsEnabled: this.checked }
        });
    });
});

visible

Indicates whether the line that represents an axis in a chart is visible.

Type: Boolean
Default Value: false
Accepted Values: true|false

Show Example:
jQuery

Use the check box in the bottom to change axes visibility.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:40px;width:200px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    <input type="checkbox" id="visibleAxesCheckbox" checked> Show Axes
</div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        animation: false,
        commonAxisSettings: { visible: true }
    });

    $('#visibleAxesCheckbox').change(function () {
        var chart = $("#chartContainer").dxChart("instance");
        chart.option({
            commonAxisSettings: { visible: this.checked }
        });
    });
});

width

Specifies the width of the line that represents an axis in the chart.

Type: Number
Default Value: 1

Show Example:
jQuery

In this example, the axes' width option is set to 3.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1960, europe: 605, americas: 417, africa: 283 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        commonAxisSettings: {
            visible: true,
            width: 3
        }
    });
});