Bar Chart (v2)

The Chart.Bar 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 vertical bars, with either a categorical or numerical X-axis.

Example JSON

Below is an example of the JSON required to define a Chart.Bar component:

{
    "type": "Chart.Bar",
    "options": {
        "width": "5/12",
        "color_scheme": "Set2",
        "x_label": "Penguin species",
        "y_label": "Body mass (g)",
        "format_y_ticks": false,
        "data": [
            {"x": "Adelie", "y": 3300},
            {"x": "Chinstrap", "y": 3800},
            {"x": "Gentoo", "y": 5500}
        ]
    }
}

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.
chart_title	Optional. The chart title.
caption	Optional. Caption below the chart.
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.
width	Optional. The width of the component. Only applies when inside a Section or Row component whose columns option is set to null.
grouped_bars	Optional. Whether to group the bars by their X value, and colour by the label key. Defaults to false.
format_y_ticks	Optional. Whether to enable auto-formatting of the Y-axis tick labels using SI prefixes (e.g. m, k, M, G). Defaults to true.
y_ticks_decimals	Optional. The number of decimal places to render for the values on the Y-axis ticks (only applies if format_y_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 x may be categorical or numerical. A maximum of 1,000 points can be plotted on a chart.

If using the grouped_bars option, you must also supply an additional key, label, which is used to label the different bars at a single X-position.

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 the data 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.

Examples

Grouped bars

If you set grouped_bars to true, Hybiscus can group your data at each X-position. To do this, ensure each object in the data key's array has a label key. This key is used to colour the bars at each X-position and produce the legend above the chart. It is also recommended to use the color_scheme key, rather than manually setting colors on each datum object.

Below is an example JSON (try copying it straight into the Cloud Editor):

{
    "type": "Chart.Bar",
    "options": {
        "width": "5/12",
        "color_scheme": "Set2",
        "grouped_bars": true,
        "x_label": "Penguin species",
        "y_label": "Body mass (g)",
        "data": [
            {"x": "Adelie", "label": "Male", "y": 4000},
            {"x": "Adelie", "label": "Female", "y": 3300},
            {"x": "Chinstrap", "label": "Male", "y": 3800},
            {"x": "Chinstrap", "label": "Female", "y": 3500},
            {"x": "Gentoo", "label": "Male", "y": 5500},
            {"x": "Gentoo", "label": "Female", "y": 4800}
        ]
    }
}

The generated component will look like below:

---

More examples