Line Charts

API

Extends the base chart options. All options below are optional.

Name	Type	Default	Description
area	`Array<Data> \| boolean`	-	Specifies for which sub-array of data an area should be shown. If the chart is only one line, you can set it to true.
confidenceBand	`[Accessor, Accessor]`	-	Two-element array specifying how to access the lower (first) and upper (second) value for the confidence band. The two elements work like accessors (either a string or a function).
voronoi	`Partial<IDelaunay>`	-	Custom parameters passed to the voronoi generator.
defined	`(point: Data) => boolean`	-	Function specifying whether or not to show a given datapoint. This is mainly used to create partially defined graphs.
activeAccessor	`Accessor`	-	Accessor that defines whether or not a given data point should be shown as active
activePoint	`Partial<IPoint>`	-	Custom parameters passed to the active point generator.

Examples

Simple Line Chart

This is a simple line chart. You can remove the area portion by adding area: false to the arguments list.

new LineChart({
  data: [fakeUsers.map(({ date, value }) => ({ date: new Date(date), value }))],
  width: 600,
  height: 200,
  yScale: {
    minValue: 0
  },
  target: '#my-div',
  brush: 'xy',
  area: true,
  xAccessor: 'date',
  yAccessor: 'value',
  tooltipFunction: (point) => `${formatDate(point.date)}: ${formatCompact(point.value)}`
})

Confidence Band

This is an example of a graph with a confidence band and extended x-axis ticks enabled.

new LineChart({
  data: [
    confidence.map((entry) => ({
      ...entry,
      date: new Date(entry.date)
    }))
  ],
  xAxis: {
    extendedTicks: true
  },
  yAxis: {
    tickFormat: 'percentage'
  },
  width: 600,
  height: 200,
  target: '#my-div',
  confidenceBand: ['l', 'u'],
  tooltipFunction: (point) => `${formatDate(point.date)}: ${formatPercent(point.value)}`
})

Multiple Lines

This line chart contains multiple lines.

new LineChart({
  data: fakeUsers.map((fakeArray) =>
    fakeArray.map((fakeEntry) => ({
      ...fakeEntry,
      date: new Date(fakeEntry.date)
    }))
  ),
  width: 600,
  height: 200,
  target: '#my-div',
  xAccessor: 'date',
  yAccessor: 'value',
  legend: ['Line 1', 'Line 2', 'Line 3'],
  tooltipFunction: (point) => `${formatDate(point.date)}: ${formatCompact(point.value)}`
})

Aggregate Rollover

One rollover for all lines.

new LineChart({
  data: fakeUsers.map((fakeArray) =>
    fakeArray.map((fakeEntry) => ({
      ...fakeEntry,
      date: new Date(fakeEntry.date)
    }))
  ),
  width: 600,
  height: 200,
  target: '#my-div',
  xAccessor: 'date',
  yAccessor: 'value',
  legend: ['Line 1', 'Line 2', 'Line 3'],
  voronoi: {
    aggregate: true
  },
  tooltipFunction: (point) => `${formatDate(point.date)}: ${formatCompact(point.value)}`
})

Broken lines (missing data points)

You can hide individual data points on a particular attribute by setting the defined accessor (which has to return true for visible points). Data points whose y-accessor values are null are also hidden.

new LineChart({
  data: [missing.map((e) => ({ ...e, date: new Date(e.date) }))],
  width: 600,
  height: 200,
  target: '#my-div',
  defined: (d) => !d.dead,
  area: true,
  tooltipFunction: (point) => `${formatDate(point.date)}: ${point.value}`
})

Active Points

This line chart displays pre-defined active points.

new LineChart({
  data: [
    fakeUsers.map((entry, i) => ({
      ...entry,
      date: new Date(entry.date),
      active: i % 5 === 0
    }))
  ],
  width: 600,
  height: 200,
  target: '#my-div',
  activeAccessor: 'active',
  activePoint: {
    radius: 2
  },
  tooltipFunction: (point) => `${formatDate(point.date)}: ${formatCompact(point.value)}`
})

Baseline

Baselines are horizontal lines that can added at arbitrary points.

new LineChart({
  data: [
    fakeUsers.map((entry) => ({
      ...entry,
      date: new Date(entry.date)
    }))
  ],
  baselines: [{ value: 160000000, label: 'a baseline' }],
  width: 600,
  height: 200,
  target: '#my-div',
  tooltipFunction: (point) => `${formatDate(point.date)}: ${formatCompact(point.value)}`
})