Horizontal bar chart

This component requires a premimum subscription to be used. For more details, see Plans and pricing.

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.

Schema

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

{
    "type": "Chart.HorizontalBar",
    "options": {
        "width": "2/4",
        "data": [{"x": 0, "y": 5}, ...],
        "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

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 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

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.

Example