Configuration equalBarWidth

Specifies a value indicating whether all bars of the same series must always have the same width, or may have different widths if the points of other series are missing.

Type: Object|Boolean
Default Value: true

If some values for a series are not specified or are set to zero, the bars that represent these values will be missing from the chart. To fill the empty area by extending the neighboring bars, set the equalBarWidth property to false. The bars will have different widths, but there will be no empty areas.

To set a custom width for bars, as well as the spacing between bars, assign an object to this property and specify the width and spacing properties, respectively.

Show Example:
jQuery

Use the check box at the bottom to switch the value of the equalBarWidth option.

<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="equalBarWidthCheckbox" checked> equalBarWidth
</div>
var dataSource = [
    { x: 10, y1: 4, y2: 0, y3: 4 },
    { x: 11, y1: 6, y2: 3, y3: 7 },
    { x: 12, y1: 2, y2: 12 },
    { x: 13, y1: 10, y3: 9 },
    { x: 14, y2: 5, y3: 12 },
    { x: 15, y1: 16, y2: 11, y3: 5 }
];

$(function () {
    $('#chartContainer').dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'x',
            type: 'bar'
        },
        series: [{
            valueField: 'y1'
        }, {
            valueField: 'y2'
        }, {
            valueField: 'y3'
        }],
        animation: false,
        equalBarWidth: true
    });

    $('#equalBarWidthCheckbox').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option('equalBarWidth', this.checked);
    });
});

spacing

Specifies the spacing between bars in pixels.

Type: Number
Default Value: undefined

BarsSpacing ChartJS

width

Specifies an equal bar width in pixels.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, bars are displayed with an equal width. The width is set to 20.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { x: 10, y1: 4, y2: 0, y3: 4 },
    { x: 11, y1: 6, y2: 3, y3: 7 },
    { x: 12, y1: 2, y2: 12 },
    { x: 13, y1: 10, y3: 9 },
    { x: 14, y2: 5, y3: 12 },
    { x: 15, y1: 16, y2: 11, y3: 5 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'x',
            type: 'bar'
        },
        series: [
            { valueField: 'y1' },
            { valueField: 'y2' },
            { valueField: 'y3' }
        ],
        equalBarWidth: {
            width: 10
        }
    });
});