Line chart

Basic line chart

Below is a basic line chart example. In order to get the gradient below the line, we're using the <AreaChart> component and a SVG linearGradient element with a unique id.

Two-line chart

Creating a two-line chart (technically two-"area") is as simple as adding another <AreaChart> component with corresponding gradients to the chart.

Multi-line chart

Below is a bit more complex line chart example. The chart has a clickable legend which lets you toggle lines on and off, and highlights the corresponding line when hovering.