getting started
premium components
deprecated components
Premium feature
This is a premium feature which requires a paid plan to be used. See here for more details.
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.
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. |
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

Missing something?
Hybiscus is continuously improving and adding new features. If you think we are missing a critical feature, please do not hesitate to contact us and offer your feedback at info@hybiscus.dev