getting started
premium components
deprecated components
Premium feature
This is a premium feature which requires a paid plan to be used. See here for more details.
Horizontal bar chart
The Chart.HorizontalBar
component is part of the premium set of chart components, with
greater control over their layout and design. The bar chart allows visualising
data on horizontal bars, with either a categorical or numerical Y-axis.
Example JSON
Below is an example of the JSON required to define a Chart.Bar
component:
{
"type": "Chart.HorizontalBar",
"options": {
"width": "2/4",
"data": [
{"y": 1, "x": 55},
{"y": 2, "x": 75},
{"y": "Label A", "x": 75}
],
"color_scheme": "Tableau10",
"font_size": 12,
"aspect_ratio": 1.2,
"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"
}
}
Config options
Key | Description |
---|---|
data | The data to plot in the chart. See below for more details. |
font_size | Optional. The font size in pixels. Defaults to 16. |
aspect_ratio | Optional. The aspect ratio of the chart (width / height). Defaults to 1.6. |
color_scheme | Optional. A Brewer color scheme to color each bar using. |
x_label | The X-axis label. |
y_label | The Y-axis label. |
horizontal_margin | Optional. Margin added horizontally to the element. Defaults to 3. Accepts any integer between 1 - 12 , 14 or 16 . |
vertical_margin | Optional. Margin added vertically to the element. Defaults to 1. Accepts any integer between 1 - 12 , 14 or 16 . |
margin | Optional. Instead of setting horizontal or vertical margins separately, a global value can be set here. |
chart_title | Optional. The chart title. |
caption | Optional. Caption below the chart. |
width | Optional. The width of the component. Only applies when inside a Section or Row component whose columns option is set to null . |
format_x_ticks | Optional. Whether to enable auto-formatting of the X-axis tick labels using SI prefixes (e.g. m, k, M, G). Defaults to true . |
x_ticks_decimals | Optional. The number of decimal places to render for the values on the X-axis ticks (only applies if format_x_ticks is set to false ). Defaults to null . To force integer only ticks, set value to 0 . |
Data
The data key must be an array of objects, with each object containing the keys
x
and y
. To set the colour for each bar, provide a color
key with a hex value. Values for y
may be categorical or numerical. A maximum of 1,000 points can be plotted on a chart.
Theming
The colour of the bars can be set in one of three ways:
- Automatically chosen by the theme selected for the report. For more details see Theming.
- Overriding the color of each bar by passing a
color
key for each object in thedata
key. - Setting the
color_scheme
key to an option from color brewer scales. Allowed values include:- Category10
- Accent
- Dark2
- Paired
- Pastel1
- Pastel2
- Set1
- Set2
- Set3
- Tableau10
Width
For details on the width
key, please see here.
Example
Missing something?
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