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.
To create a column chart, we need to use series type
We also have to provide the
xKey and at least one
'bar'series can be stacked or grouped, they can have multiple
yKeys, with one key for each stack/group component.
'column' series config would therefore look like this:
In the snippet above we are using the
'iphone' as the only
to show revenue per quarter for this product alone. Using this simple series config
produces the following chart:
If the goal is to show the quarterly revenue for each product category, multiple
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:
And that simple change transforms our chart into this:
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
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
This will produce the following chart:
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:
It's possible to add labels to columns, by adding the following to the series config:
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:
The above formatter produces an attractive chart where the labels don't stick out of their columns:
To learn more about label configuration please refer to the API reference below.
'bar' series configuration is exactly the same as
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: 'column' in the series config and swap the axes
'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:
With these simple changes we go from stacked columns to stacked bars:
|The key to use to retrieve x-values from the data.|
|A human-readable description of the x-values.|
|The keys to use to retrieve y-values from the data.|
|Human-readable descriptions of the y-values.|
|The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.|
|Whether or not to display the series.|
|Whether or not to include the series in the legend.|
|Whether or not to show tooltips when the series are hovered over.|
|Function used to create the content for tooltips.|
|Whether to show different y-values as separate bars (grouped) or not (stacked).|
|The number to normalise the bar stacks to. Has no effect when |
|The colours to cycle through for the fills of the bars.|
|The opacity of the fill for the bars.|
|The colours to cycle through for the strokes of the bars.|
|The opacity of the stroke for the bars.|
|The width in pixels of the stroke for the bars.|
|Configuration for the highlighting used when the bars are hovered over. See highlightStyle for more details about this configuration object.|
|Configuration for the shadow used behind the chart series. See shadow for more details about this configuration object.|
|Defines how the bar/column strokes are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, |
|The initial offset of the dashed line in pixels.|
|Configuration for the labels shown on bars. See label for more details about this configuration object.|
|Function used to return formatting for individual bars/columns, based on the given parameters. If the current bar/column is highlighted, the |
|A map of event names to event listeners. See listeners for more details about this configuration object.|
Configuration for the highlighting used when the bars are hovered over.
|The fill colour of the bars when hovered over.|
|The colour of the stroke around the bars when hovered over.|
Configuration for the shadow used behind the chart series.
|Whether or not the shadow is visible.|
|The colour of the shadow.|
|The horizontal offset in pixels for the shadow.|
|The vertical offset in pixels for the shadow.|
|The radius of the shadow's blur, given in pixels.|
Configuration for the labels shown on bars.
|Whether or not the labels should be shown.|
|The colour to use for the labels.|
|The font style to use for the labels.|
|The font weight to use for the labels.|
|The font size in pixels to use for the labels.|
|The font family to use for the labels.|
A map of event names to event listeners.
|The listener to call when a bar/column node is clicked.|
Continue to the next section to learn about area series.