Bar series visualize data as a collection of bars. Those bars can be displayed side by side, as in the Bar series type, or can be put in stacks, as in the Stacked Bar and Full-Stacked Bar series types.

To specify one or another series type, assign its name to the series[].type property. You can configure:

Each series individually using the series array;
All series in the Chart using the commonSeriesSettings object;
All series of a specific type using objects nested in commonSeriesSettings: bar, stackedbar, and fullstackedbar.

jQuery

JavaScript

$(function () {
    $("#chartContainer").dxChart({
        series: [{
            type: "bar"
        }, {
            // ...
        }],
        commonSeriesSettings: {
            bar: { ... },
            stackedbar: { ... },
            fullstackedbar: { ... }
        }
    });
});

Angular

HTML

TypeScript

<dx-chart ... >
    <dxi-series type="bar"></dxi-series>
    <dxi-series ... ></dxi-series>
    ...
    <dxo-common-series-settings>
        <dxo-bar ... ></dxo-bar>
        <dxo-stackedbar ... ></dxo-stackedbar>
        <dxo-fullstackedbar ... ></dxo-fullstackedbar>
    </dxo-common-series-settings>
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Vue

App.vue

<template> 
    <DxChart ... >
        <DxSeries type="bar"/>
        <DxSeries ... />
        ...
        <DxCommonSeriesSettings
            :bar="barSettings"
            :stackedbar="stackedBarSettings"
            :fullstackedbar="fullStackedBarSettings"
        />
    </DxChart>
</template>

<script>
import DxChart, {
    DxSeries,
    DxCommonSeriesSettings
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxSeries,
        DxCommonSeriesSettings
    },
    data() {
        return {
            barSettings: { ... },
            stackedBarSettings: { ... },
            fullStackedBarSettings: { ... }
        };
    }
}
</script>

React

App.js

import React from 'react';
import Chart, {
    Series,
    CommonSeriesSettings
} from 'devextreme-react/chart';

const barSettings = { ... };
const stackedBarSettings = { ... };
const fullStackedBarSettings = { ... };

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <Series type="bar" />
                <Series ... />
                ...
                <CommonSeriesSettings
                    bar={barSettings}
                    stackedbar={stackedBarSettings}
                    fullstackedbar={fullStackedBarSettings}
                />
            </Chart>
        );
    }
}

export default App;

Refer to the BarSeries, StackedBarSeries, or FullStackedBarSeries section of the API Reference for a full list of properties available to a specific series type. Most these properties are self-explanatory, yet several of them are worth special mention.

minBarSize
Specifies the minimum height of bars in a series; allows you to keep bars big enough for user interaction.
stack (for stacked series)
Allows you to distribute bars of a single argument between several side-by-side stacks.

Bar Series Demo

Specify the Bar Width

You can specify individual series' bar width. In multi-series charts, different series' bars with the same argument are collected in groups with a customizable width. You can use fixed (that is, pixels) or relative units to set both these widths. Use relative units if the width should adapt to the UI component or container size. Fixed width takes precedence over relative width if both are specified.

Relative Bar Width

Regulating the empty space on a bar's sides controls the relative bar width. Use the barPadding property to specify how much of the available sector should be empty. For example, a barPadding of 0.1 leaves 10% of the available space empty giving the rest to the bar.

jQuery

JavaScript

$(function () {
    $("#chartContainer").dxChart({
        series: [{
            // ...
            barPadding: 0.1 // for an individual series
        }, {
            // ...
        }],
        commonSeriesSettings: {
            // ...
            barPadding: 0.1 // for all series in the chart
        }
    });
});

Angular

HTML

TypeScript

<dx-chart ... >
    <dxi-series
        [barPadding]="0.1"> <!-- for an individual series -->
    </dxi-series>
    <dxi-series ... ></dxi-series>
    ...
    <dxo-common-series-settings
        [barPadding]="0.1"> <!-- for all series in the chart -->
    </dxo-common-series-settings>
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Vue

App.vue

<template> 
    <DxChart ... >
        <DxSeries :bar-padding="0.1"/> <!-- for an individual series -->
        <DxSeries ... />
        ...
        <DxCommonSeriesSettings :bar-padding="0.1"/> <!-- for all series in the chart -->
    </DxChart>
</template>

<script>
import DxChart, {
    DxSeries,
    DxCommonSeriesSettings
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxSeries,
        DxCommonSeriesSettings
    }
}
</script>

React

App.js

import React from 'react';
import Chart, {
    Series,
    CommonSeriesSettings
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <Series barPadding={0.1} /> {/* for an individual series */}
                <Series ... />
                ...
                <CommonSeriesSettings barPadding={0.1}/> {/* for all series in the chart */}
            </Chart>
        );
    }
}

export default App;

In single-series charts, the available space equals the interval between two major ticks. In multi-series charts, it depends on the number of bars in the parent group and the group's width.

The parent group's width can be specified using the barGroupPadding property. It works like barPadding, dividing the available space between the bar group and an empty space. For example, a barGroupPadding of 0.2 leaves 20% of the available space empty. The available space is the interval between two major ticks. Unlike barPadding, which can be specified for each series individually, barGroupPadding applies to the whole chart.

jQuery

JavaScript

$(function () {
    $("#chartContainer").dxChart({
        // ...
        barGroupPadding: 0.2
    });
});

Angular

HTML

TypeScript

<dx-chart ...
    [barGroupPadding]="0.2">
    <!-- ... -->
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Vue

App.vue

<template> 
    <DxChart ...
        :bar-group-padding="0.2">
    </DxChart>
</template>

<script>
import DxChart from 'devextreme-vue/chart';

export default {
    components: {
        DxChart
    }
}
</script>

React

App.js

import React from 'react';
import Chart from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ...
                barGroupPadding={0.2}>
            </Chart>
        );
    }
}

export default App;

The following images illustrate how different barPadding and barGroupPadding values change a chart's appearance. In this example, all series have the same barPadding.

Settings	Result
barGroupPadding: 0 barPadding: 0
barGroupPadding: 0.2 barPadding: 0
barGroupPadding: 0.2 barPadding: 0.1

Fixed Bar Width

The barWidth property specifies fixed bar width in pixels. This property is available for each series.

jQuery

JavaScript

$(function () {
    $("#chartContainer").dxChart({
        series: [{
            // ...
            barWidth: 50 // for an individual series
        }, {
            // ...
        }],
        commonSeriesSettings: {
            // ...
            barWidth: 50 // for all series in the chart
        }
    });
});

Angular

HTML

TypeScript

<dx-chart ... >
    <dxi-series
        [barWidth]="50"> <!-- for an individual series -->
    </dxi-series>
    <dxi-series ... ></dxi-series>
    ...
    <dxo-common-series-settings
        [barWidth]="50"> <!-- for all series in the chart -->
    </dxo-common-series-settings>
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Vue

App.vue

<template> 
    <DxChart ... >
        <DxSeries :bar-width="50"/> <!-- for an individual series -->
        <DxSeries ... />
        ...
        <DxCommonSeriesSettings :bar-width="50"/> <!-- for all series in the chart -->
    </DxChart>
</template>

<script>
import DxChart, {
    DxSeries,
    DxCommonSeriesSettings
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxSeries,
        DxCommonSeriesSettings
    }
}
</script>

React

App.js

import React from 'react';
import Chart, {
    Series,
    CommonSeriesSettings
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <Series barWidth={50} /> {/* for an individual series */}
                <Series ... />
                ...
                <CommonSeriesSettings barWidth={50}/> {/* for all series in the chart */}
            </Chart>
        );
    }
}

export default App;

A bar's maximum width is limited. In single-series charts, it cannot be greater than the interval between two major ticks. In multi-series charts, it depends on the number of bars in the parent group and this group's actual width.

Bar groups' width can be changed using the barGroupWidth property. Like barWidth, it accepts values in degrees, but unlike it, applies to the entire chart. The groups' maximum width is the interval between two major ticks.

jQuery

JavaScript

$(function () {
    $("#chartContainer").dxChart({
        // ...
        barGroupWidth: 250
    });
});

Angular

HTML

TypeScript

<dx-chart ...
    [barGroupWidth]="250">
    <!-- ... -->
</dx-chart>

import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

Vue

App.vue

<template> 
    <DxChart ...
        :bar-group-width="250">
    </DxChart>
</template>

<script>
import DxChart from 'devextreme-vue/chart';

export default {
    components: {
        DxChart
    }
}
</script>

React

App.js

import React from 'react';
import Chart from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ...
                barGroupWidth={250}>
            </Chart>
        );
    }
}

export default App;

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

jQuery Chart - Bar Series

jQuery

Angular

Vue

React

See Also

Specify the Bar Width

Relative Bar Width

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

Fixed Bar Width

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React