The BarChart
component is used for visualising data as a bar chart. It
provides a simple way to include charts without the need for using external
libraries to generate an image.
Below are two examples of the schema required to define a BarChart
.
{
"type": "BarChart",
"options": {
"width": "2/4",
"data": [{"x": 0, "y": 5}, ...],
"x_label": "X axis label",
"y_label": "Y axis label",
"chart_title": "Chart title",
"caption": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae provident ipsa culpa officiis illum commodi voluptas, sequi repellat veniam adipisci laboriosam amet nesciunt nam explicabo voluptate minima inventore, minus sint"
},
},
{
"type": "BarChart",
"options": {
"data": [{"x": 0, "y": 5}, ...],
"x_label": "X axis label",
"y_label": "Y axis label"
}
}
Key | Description |
---|---|
data |
The data to plot in the chart, which should be an array of objects with keys x and y . |
x_label |
The X-axis label. |
y_label |
The Y-axis label. |
chart_title |
Optional. The chart title. |
caption |
Optional. Caption below the chart. |
width |
Optional. The width of the component, when inside a Section or Row component with their columns option set to null . |
The data key must be an array of objects, with each object containing the keys
x
and y
. Both these keys should contain numbers (not strings). A maximum
of 500 points can be plotted on a chart.
The colour of the bars is automatically chosen by the theme selected for the report. For more details see Theming.
The width
key supports defining the width using a fraction specified as a
string e.g. 1/3
. The values for the denominator supported are 2, 3, 4, 5, 6
and 12, whilst the numerator can be any value up to the value of the denominator.
If the width
key is set to null
, then the component will attempt to fill
all the available horizontal space.
Hybiscus is continuously improving and adding new features. If you think we are missing a critical feature, please do not hesitate to contact us and offer your feedback at info@hybiscus.dev