Skip to content

Line chart

Along with bar graphs and pie charts, line charts are one of the most ubiquitous chart types.

Parameters

In addition to all of the standard parameters the following apply to line charts.

dataJSON/Python dict/various

Line charts take their data from a variety of formats, including:

  • A list of dictionaries, each of which has an x and a y element.
  • A file containing a JSON representation of such a list.
  • A file containing CSV with two numerical columns.
  • A Pandas, Fireducks, pyarrow or polars DataFrame, with two columns holding the x and y values.
curveBoolean

If true, a cubic spline is plotted to give a smooth(ed) version of the curve connecting the given points. curved defaults to false.

Examples

This:

html
<linechart
  data='[
    { "x": 1, "y": 10 }, 
    { "x": 2, "y": 20 },
    { "x": 3, "y": 15 },
    { "x": 4, "y": 25 },
    { "x": 5, "y": 30 },
    { "x": 6, "y": 35 }
  ]'
  width=600
  height=600
>
</linechart>

produces this:

As shown above, the data provided to the line chart is a list of dictionaries, each of which has a "x" and a "y" entry, with the X and Y values for a point, respectively. The line can also be rendered as a cubic spline (i.e. a curve) by adding the optional curve parameter:

html
<linechart
data='[
  { "x": 1, "y": 10 }, 
  { "x": 2, "y": 20 },
  { "x": 3, "y": 15 },
  { "x": 4, "y": 25 },
  { "x": 5, "y": 30 },
  { "x": 6, "y": 35 }
  ]'
  width=600
  height=600
  curved=true
>
</linechart>

produces this:

Released under the MIT License. | Privacy Policy