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', yAxisKey: 'leftAxisId' },
    { data: uData, label: 'uv', yAxisKey: 'rightAxisId' },
  ]}
  xAxis={[{ scaleType: 'point', data: xLabels }]}
  yAxis={[{ id: 'leftAxisId' }, { id: 'rightAxisId' }]}
  rightAxis="rightAxisId"
/>

<LineChart
  width={500}
  height={300}
  series={[
    { data: pData, label: 'pv', yAxisKey: 'leftAxisId' },
    { data: uData, label: 'uv', yAxisKey: '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

API

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