Docs › Chart types

Line chart

Change over time: curves, steps, points and the last value.

type: 'line' is the default. Hovering shows a vertical crosshair and one tooltip with every series at that x. A single line gets its last value labelled (lastPoint).

Live example

Code for this example

createChart('#chart', {
  type: 'line',
  title: 'Monthly visitors',
  smooth: true,
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
    series: [
      { name: 'This year', data: [41200, 43800, 52100, 49800, 61200, 66400, 71800, 69500, 74300, 80100] },
      { name: 'Last year', data: [36500, 35200, 40100, 42800, 47900, 51300, 55100, 53800, 58200, 60400], dashed: true },
    ],
  },
});

Options

Option	Default	What it does
`curve`	'straight'	`'straight' \| 'smooth' \| 'step'`; smooth is monotone and never overshoots the data
`smooth`	false	Same as `curve: 'smooth'`; on a series, just that series
`points`	'auto'	Show points; auto shows them up to 30 points
`pointShape`	'circle'	`'circle' \| 'square' \| 'diamond'`
`lastPoint`	true for one line	Highlight the last point
`nulls`	'gap'	Missing values: `'gap' \| 'connect' \| 'zero'`
`dataLabels`	false	`true` or `'end'`: the value at the end of each line only

Step lines

Data that holds until it changes (prices, stock levels) reads correctly with curve: 'step'.

Live example

Code for this example

createChart('#chart', {
  type: 'line',
  title: 'Stock on hand',
  curve: 'step',
  points: true,
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series: [{ name: 'Stock', data: [120, 120, 85, 85, 140, 132, 132] }],
  },
});