React Charts: Bar and Column Series

Because bar series are just transposed column series and have the same configuration, this section covers both series at once.

Bar series are a good choice to show values for a discrete set of objects, such as item categories, specific items, or time periods such as years or quarters.

Column Series

Regular Columns

To create a column chart, we need to use series type 'column'. We also have to provide the xKey and at least one yKey.

A minimal 'column' series config would therefore look like this:

series: [{
    type: 'column',
    xKey: 'quarter',
    yKeys: ['iphone']
}]

In the snippet above we are using the 'iphone' as the only yKey, to show revenue per quarter for this product alone. Using this simple series config produces the following chart:

// Loading...

Stacked Columns

If the goal is to show the quarterly revenue for each product category, multiple yKeys can be used. To go from a regular column chart above to a stacked one below, all we do is add some more yKeys like so:

yKeys: ['iphone', 'mac', 'ipad', 'wearables', 'services']

And that simple change transforms our chart into this:

// Loading...

Note that in the example code we also added yNames along with yKeys which configure the display names to make sure we have nice looking tooltip headers and legend entries.

yNames: ['iPhone', 'Mac', 'iPad', 'Wearables', 'Services']

Grouped Columns

If we want to show quarterly revenue for each product category as grouped columns, we can simply take the stacked column config from the example above and set the grouped property of the series to true:

grouped: true

This will produce the following chart:

// Loading...

Normalized Columns

Going back to our stacked column example, if we wanted to normalize the totals so that each column's segments added up to a certain value, for example 100%, we could add the following to our series config:

normalizedTo: 100

// Loading...

Column Labels

It's possible to add labels to columns, by adding the following to the series config:

label: {}

That's it. The config can be empty like that. However, you might want to customise your labels. For example, by default the values are rounded to two decimal places for the labels, but in the example below even that is too much, so we use a label formatter that simply returns the integer part of the number:

label: {
    formatter: function (params) {
        // if the data contains values that are not valid numbers,
        // the formatter's `value` will be `undefined`
        return params.value === undefined ? '' : params.value.toFixed(0);
    }
}

The above formatter produces an attractive chart where the labels don't stick out of their columns:

// Loading...

To learn more about label configuration please refer to the API reference below.

Bar Series

'bar' series configuration is exactly the same as 'column' series configuration and all the same modes (regular, stacked, grouped, normalized) apply to bars just as they do to columns.

To create a bar chart all you need to do is use type: 'bar' instead of type: 'column' in the series config and swap the axes — the 'category' axis moves from the bottom to the left of a chart, and the 'number' axis takes its place instead, moving from the left to the bottom:

axes: [
    {
        type: 'number',
        position: 'bottom'
    },
    {
        type: 'category',
        position: 'left'
    }
]

With these simple changes we go from stacked columns to stacked bars:

// Loading...

API Reference

formatter = (
    params: FormatterParams
) => Formatter;

interface FormatterParams {
  datum: any;
  fill: string;
  stroke: string;
  strokeWidth: number;
  highlighted: boolean;
  xKey: string;
  yKey: string;
}

interface Formatter {
  fill: string;
  stroke: string;
  strokeWidth: number;
}

bar: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    renderer?: Function;
  }
}

renderer = (params: RendererParams) => string;

interface RendererParams {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xValue: any;
  xName?: string;
  yKey: string;
  yValue: any;
  yName?: string;
}

bar: {
  ...
  highlightStyle: {
    fill?: string; // default: 'yellow'
    stroke?: string;
  }
}

bar: {
  ...
  shadow: {
    enabled?: boolean; // default: true
    color?: string; // default: 'rgba(0, 0, 0, 0.5)'
    xOffset?: number; // default: 0
    yOffset?: number; // default: 0
    blur?: number; // default: 5
  }
}

bar: {
  ...
  label: {
    enabled?: boolean; // default: true
    placement?: 'inside' | 'outside'; // default: 'inside'
    color?: string; // default: 'rgba(70, 70, 70, 1)'
    fontStyle?: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
    fontSize?: number; // default: 12
    fontFamily?: string; // default: 'Verdana, sans-serif'
    formatter?: Function;
  }
}

formatter = (
    params: FormatterParams
) => string;

interface FormatterParams {
  value: number;
}

bar: {
  ...
  listeners: {
    nodeClick?: Function;
  }
}

nodeClick = (
    params: NodeClickParams
) => any;

interface NodeClickParams {
  type: 'nodeClick';
  series: BarSeries;
  datum: any;
  xKey: string;
  yKey: string;
}

Next Up

Continue to the next section to learn about histogram series.