Since v1.15, jsGraph allows you to use the bar chart series together with the bar x axis. The two have to work together, i.e. you cannot assign a line serie to a bar axis neither a bar serie to a normal or a time axis. In addition, for now, bar graphs are only accepted in the x direction (vertical bars).
Defining the bar axis
To define the bar axis, you need to pass its reference to the Graph constructor:
Alternatively, you can also overwrite the default x axis using:
Defining the categories
The next step is to assign the categories that jsGraph should recognize. A category is like an axis value, except that it can take text. When multiple series are used, the values that have the same category will be displayed next to each other.
To define categories, simply use the following setter
Alright, then we have to create a few series. The serie creation is the same as for any other serie, and take the type Graph.SERIE_BAR or, if you prefer, the string "bar":
There is however one extra step you need to make: you need to tell the axis that the series belong to it. That extra step is, we realize, a real pain, because you need to reassign the series to the axis when creating new ones and when removing them. But it also allows you to specify the order of the series. Maybe we will be able to remove this extra instruction in future releases. In the meantime, here’s the syntax:
Setting data to the serie takes an object which keys are the names of the categories:
Styling the series
Some additional styling options are available to differentiate series from one another. In additions to the methods provided by the line serie (setLineWidth, setLineColor, the bar series take the additional setFillColor and setFillOpacity method which set the inner color and inner opacity of the bars, respectively. Bar charts take no markers.
Ok, let’s take all of this code, put it together and display the result:
### Adding error bars
Adding error bars in bar charts is similar to the line series. The style has to be defined first using the setErrorStyle method. Here’s an example:
The y key can also be top or/and bottom for different styles of the error bar.
Note that x error bars are technically also possible, but don’t make much sense in this example.
Setting the error data goes with the following:
Where the first value is the positive error bar value and the second is the negative error bar.