Bar

Bar Charts and Column Charts are Categorical charts which display data by using horizontal or vertical bars whose lengths vary according to their value.

Bar Charts are suitable for displaying a comparison between several sets of data—for example, for showing a summary of unique and total site visitors over a certain period of time. The series are placed next to each other with predefined spacing between them.

Column Charts are functionally equivalent to Bar Charts, but transpose the axes—the category axis is vertical and the value axis is horizontal.

Basic Usage

The following example demonstrates the Bar Chart in action.

import {
    Chart,
    ChartTitle,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisTitle,
    ChartCategoryAxisItem
} from '@progress/kendo-react-charts';

const [ firstSeries, secondSeries, thirdSeries, fourthSeries ] = [[100, 123, 234, 343], [120, 67, 231, 196], [45, 124, 189, 143], [87, 154, 210, 215]];
const categories = ['Q1', 'Q2', 'Q3', 'Q4'];
const ChartContainer = () => (
  <Chart>
    <ChartTitle text="Units sold" />
    <ChartCategoryAxis>
        <ChartCategoryAxisItem categories={categories}>
          <ChartCategoryAxisTitle text="Months" />
        </ChartCategoryAxisItem>
    </ChartCategoryAxis>
    <ChartSeries>
        <ChartSeriesItem type="bar" gap={2} spacing={0.25} data={firstSeries} />
        <ChartSeriesItem type="bar" data={secondSeries} />
        <ChartSeriesItem type="bar" data={thirdSeries} />
        <ChartSeriesItem type="bar" data={fourthSeries} />
    </ChartSeries>
  </Chart>
);

ReactDOM.render(
    <ChartContainer/>,
    document.querySelector('my-app')
);

The following example demonstrates the Column Chart in action.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const [ firstSeries, secondSeries ] = [[1, 2, 3, 5], [-1, -2, -3, -5]];

const ChartContainer = () => (
    <Chart>
        <ChartSeries>
            <ChartSeriesItem type="column" data={firstSeries} />
            <ChartSeriesItem type="column" data={secondSeries} />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer/>,
    document.querySelector('my-app')
);

Gap and Spacing

You can control the distance between bars by using the gap and spacing variables. To control the distance between the categories, set gap to the first series item as a percentage of the bar width. The setting of the gap property is applied to all series and you do not have to set the rest of the series explicitly.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const [ firstSeries, secondSeries ] = [[1, 2, 3, 5], [1, 2, 3, 5]];

const ChartContainer = () => (
    <Chart>
        <ChartSeries>
            <ChartSeriesItem type="bar" gap={2} data={firstSeries} />
            <ChartSeriesItem type="bar" data={secondSeries} />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer/>,
    document.querySelector('my-app')
);

To control the distance between bars in a single category, set spacing to the first series item as a percentage of the bar width. The setting of the spacing property is applied to all series and you do not have to set the rest of the series explicitly.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const [ firstSeries, secondSeries ] = [[1, 2, 3, 5], [1, 2, 3, 5]];

const ChartContainer = () => (
    <Chart>
        <ChartSeries>
            <ChartSeriesItem type="bar" spacing={0} data={firstSeries} />
            <ChartSeriesItem type="bar" data={secondSeries} />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer/>,
    document.querySelector('my-app')
);

Data Binding

You can bind the Bar series to an array that contains:

  • Numbers.
  • Arrays which represent [value, category] tuples.
  • Objects which are also referred to as models.

When the Bar series is bound to objects (models), the user selects the relevant fields through the available bindings:

Model binding Data type Required Description
field number/null Yes The value of the data point, if any.
categoryField string/date/number/null No The category of the data point, if any.
colorField string No The color of the data point, if overridden.

For more information on how to configure data-binding mode, refer to the article on binding the KendoReact Chart to data.

Sub-Types

The Bar Charts feature the following sub-types:

Stacked Bar Charts

Stacked Bar Charts are suitable for indicating the proportion of individual values to the total. To select this series sub-type, set the stack property of the first series item to true. The setting of the stack property is applied to all series and you do not have to set the rest of the series explicitly. Yet, you can override the configuration per series.

Series are plotted on top of each other. The stack value is the sum of all values up until the current series. Negative values are placed on a separate stack.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const [ firstSeries, secondSeries, thirdSeries ] = [[1, 2, 3], [1, -1, 1], [1, -1, 1]];

const ChartContainer = () => (
    <Chart>
        <ChartSeries>
            <ChartSeriesItem type="bar" stack={true} data={firstSeries} />
            <ChartSeriesItem type="bar" data={secondSeries} />
            <ChartSeriesItem type="bar" data={thirdSeries} />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer/>,
    document.querySelector('my-app')
);

You can also place groups of series on separate stacks.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const [ firstSeries, secondSeries, thirdSeries ] = [[1, 2, 3], [1, 1, 1], [1, 1, 1]];

const ChartContainer = () => (
    <Chart>
        <ChartSeries>
            <ChartSeriesItem type="bar" stack={{ group: 'a' }} data={firstSeries} />
            <ChartSeriesItem type="bar" data={secondSeries} stack={{ group: 'a' }} />
            <ChartSeriesItem type="bar" data={thirdSeries} stack={{ group: 'b' }} />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer/>,
    document.querySelector('my-app')
);

100% Stacked Bar

100% Stacked Bar Charts are suitable for indicating the proportion of individual values as a percentage of the total. To select this series sub-type, set the stack property of the first series item to a { type: '100%' } object. The setting of the stack property is applied to all series and you do not have to set the rest of the series explicitly. Yet, you can override the configuration per series.

While it is possible to plot negative values in a 100% Stacked Chart, the results are hard for the user to interpret.

The following example demonstrates how the series data is converted into percentages.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

const [ firstSeries, secondSeries ] = [[1, 2, 3, 5], [1, 1, 1, 1]];

const ChartContainer = () => (
    <Chart>
        <ChartSeries>
            <ChartSeriesItem type="bar" stack={{ type: '100%' }} data={firstSeries} />
            <ChartSeriesItem type="bar" data={secondSeries} />
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer/>,
    document.querySelector('my-app')
);

In this article