Line chart

The LineChart component is used for visualising data as a line chart. It provides a simple way to include charts without the need for using external libraries to generate an image.


Below are two examples of the schema required to define a LineChart.

    "type": "LineChart",
    "options": {
        "width": "2/4",
        "data": [{"x": 0, "y": 5}, ...],
        "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"
    "type": "LineChart",
    "options": {
        "data": [{"x": 0, "y": 5}, ...],
        "x_label": "X axis label",
        "y_label": "Y axis label"


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.
colour_by Optional. The key in the data objects to use to colour each line by.
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.


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.

You can also provide another key, whose name if passed to colour_by will be used to draw separate lines with different colours. See the example image below for an example.


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.


The colour of the line / curve is automatically chosen by the theme selected for the report. For more details see Theming. This only applies if you have not used the colour_by option.


By default, the lines are smoothed to make them more visually appealing. These charts should not be used for communicating data very precisely, but rather for showing general trends.


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