Charts - Line demonstration

This page groups demonstration using line charts.

SimpleLineChart

TinyLineChart

DashedLineChart

BiaxialLineChart

LineChartWithReferenceLines

LineChartConnectNulls

Line chart with live data

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 component 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.

Additionally, an uncertainty area is shown to represent the uncertainty of the forecast.

CustomLineMarks

Notice that using another shape than "circle" renders a <path /> instead of the <circle /> for mark elements. This modification implies a small drop of rendering performances (around +50ms to render 1.000 marks).

API

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

• <LineChart />
• <LineElement />
• <LineHighlightElement />
• <LineHighlightPlot />
• <LinePlot />
• <MarkElement />
• <MarkPlot />