Line Chart (v2)

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.

Example JSON

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

{
    "type": "Chart.Line",
    "options": {
        "width": "2/4",
        "data": [
            {"x": 0, "label": "A", "y": 5},
            {"x": 1, "label": "A", "y": 7},
            {"x": 2, "label": "A", "y": 3},
            {"x": 3, "label": "A", "y": 12},
            {"x": 4, "label": "A", "y": 9},

            {"x": 3, "label": "B", "y": 5},
            {"x": 4, "label": "B", "y": 7},
            {"x": 5, "label": "B", "y": 3},
            {"x": 6, "label": "B", "y": 12},
            {"x": 7, "label": "B", "y": 9}
        ],
        "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.
curve_format	Optional. The curve fitting algorithm used to connect the dots. See below for more details.
x_label	Optional. The X-axis label.
y_label	Optional. 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.

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 lines. A maximum of 1,000 points can be plotted on a chart.

Curve format

The curve interpolation algorithm used to connect the dots between data points can be customised. By default, it is set to MonotoneX. Any of the following options are allowed:

• Linear
• Step
• Basis
• Step
• StepBefore
• StepAfter
• Natural
• Cardinal
• CatmullRom
• MonotoneX

The interpolation algorithms are based on the implementations in the D3.js data visualisation library, detailed here. Examples of the different algorithms are shown below:

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

For details on the width key, please see here.

Example