Bar chart

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.

This component is now deprecated in favour of the BarChart v2 component which provides more options and flexibility.

Example JSON

Below are two examples of the JSON required to define a BarChart.

{
    "type": "BarChart",
    "options": {
        "width": "2/4",
        "data": [
            {"x": 0, "y": 5},
            {"x": 1, "y": 7},
            {"x": 2, "y": 3},
            {"x": 3, "y": 12},
            {"x": 4, "y": 9}
        ],
        "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"
    }
}

Description

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.
`sort_x_axis`	Optional. Whether to enable sorting of data on the X-axis. Defaults to `true`.
`width`	Optional. The width of the component. Only applies when inside a `Section` or `Row` component whose `columns` option is set to `null`.

Data

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.

Theming

The colour of the bars is automatically chosen by the theme selected for the report. For more details see Theming.

Width

For details on the width key, please see here.

general

getting started

api

reports

components

premium components

deprecated components