Charts - Line demonstration

This page groups demonstration using line charts.

SimpleLineChart

<LineChart
  width={500}
  height={300}
  series={[
    { data: pData, label: 'pv' },
    { data: uData, label: 'uv' },
  ]}
  xAxis={[{ scaleType: 'point', data: xLabels }]}
/>

<LineChart
  width={500}
  height={300}
  series={[
    { data: pData, label: 'pv' },
    { data: uData, label: 'uv' },
  ]}
  xAxis={[{ scaleType: 'point', data: xLabels }]}
/>

Press Enter to start editing

TinyLineChart

DashedLineChart

BiaxialLineChart

<LineChart
  width={500}
  height={300}
  series={[
    { data: pData, label: 'pv', yAxisId: 'leftAxisId' },
    { data: uData, label: 'uv', yAxisId: 'rightAxisId' },
  ]}
  xAxis={[{ scaleType: 'point', data: xLabels }]}
  yAxis={[{ id: 'leftAxisId' }, { id: 'rightAxisId' }]}
  rightAxis="rightAxisId"
/>

<LineChart
  width={500}
  height={300}
  series={[
    { data: pData, label: 'pv', yAxisId: 'leftAxisId' },
    { data: uData, label: 'uv', yAxisId: 'rightAxisId' },
  ]}
  xAxis={[{ scaleType: 'point', data: xLabels }]}
  yAxis={[{ id: 'leftAxisId' }, { id: 'rightAxisId' }]}
  rightAxis="rightAxisId"
/>

Press Enter to start editing

LineChartWithReferenceLines

LineChartConnectNulls

<LineChart
  xAxis={[{ data: xData, scaleType: 'point' }]}
  series={[{ data }]}
  height={200}
  margin={{ top: 10, bottom: 20 }}
/>
<LineChart
  xAxis={[{ data: xData, scaleType: 'point' }]}
  series={[{ data, connectNulls: true }]}
  height={200}
  margin={{ top: 10, bottom: 20 }}
/>

<LineChart
  xAxis={[{ data: xData, scaleType: 'point' }]}
  series={[{ data }]}
  height={200}
  margin={{ top: 10, bottom: 20 }}
/>
<LineChart
  xAxis={[{ data: xData, scaleType: 'point' }]}
  series={[{ data, connectNulls: true }]}
  height={200}
  margin={{ top: 10, bottom: 20 }}
/>

Press Enter to start editing

Line with forecast

To show that parts of the data have different meanings, you can render stylised lines for each of them.

In the following example, the chart shows a dotted line to exemplify that the data is estimated. To do so, the slots.line is set with a custom components that render the default line twice.

The first one is clipped to show known values (from the left of the chart to the limit).
The second one is clipped to show predictions (from the limit to the right of the chart) with dash styling.

<LineChart
  series={[
    {
      type: 'line',
      data: [1, 2, 3, 4, 1, 2, 3, 4, 5],
      valueFormatter: (v, i) => `${v}${i.dataIndex > 5 ? ' (estimated)' : ''}`,
    },
  ]}
  xAxis={[{ data: [0, 1, 2, 3, 4, 5, 6, 7, 8] }]}
  height={200}
  width={400}
  slots={{ line: CustomAnimatedLine }}
  slotProps={{ line: { limit: 5, sxAfter: { strokeDasharray: '10 5' } } as any }}
/>

<LineChart
  series={[
    {
      type: 'line',
      data: [1, 2, 3, 4, 1, 2, 3, 4, 5],
      valueFormatter: (v, i) => `${v}${i.dataIndex > 5 ? ' (estimated)' : ''}`,
    },
  ]}
  xAxis={[{ data: [0, 1, 2, 3, 4, 5, 6, 7, 8] }]}
  height={200}
  width={400}
  slots={{ line: CustomAnimatedLine }}
  slotProps={{ line: { limit: 5, sxAfter: { strokeDasharray: '10 5' } } as any }}
/>

Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.