Line Chart (v2)

Premium component

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

The Chart.Line component is part of the premium set of chart components, with greater control over their layout and design. The line chart allows visualising data as individual lines grouped by a label, with or without dots.

Schema

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

{
    "type": "Chart.Line",
    "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",
        "plot_dots": true,
        "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.
`plot_dots`	Optional. Whether to plot dots for each line. Defaults to `false`
`color_scheme`	Optional. A Brewer color scheme to color each line 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.
`width`	Optional. The width of the component, when inside a `Section` or `Row` component with their `columns` option set to `null`.

Data

The data key must be an array of objects, with each object containing the keys x and y. Values can be grouped by providing a label key, which is used to plot data points as separate. A maximum of 1,000 points can be plotted on a chart.

Theming

The colour of the line is automatically chosen by the theme selected for the report. For more details see Theming. If the data key contains data that can be grouped with multiple label values, the color_scheme key must be set 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.

Getting started

API

Reports

Components

Premium components