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

Larger interaction area

A line is highlighted when a pointer is hovering over it. Which is a narrow interaction area. While a permanent solution isn't implemented, it's possible to define a larger interaction area with slots.

The idea is to have two paths: A small one to display the line, and a larger invisible one that handles the interactions.

This solution has an issue when lines cross over each other, as the highlight is not on the closest line to the pointer, but by the last defined series.

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 />