`<LineChart />`

There are loads of ways to use the <LineChart /> component.

Basic Usage

export const MyApp = () => {
  return (
    <>
      <h2>My Chart</h2>
      <LineChart data={[50, 100, 30]} />
    </>
  );
};

Let's add some labels:

<LineChart
  data={[50, 100, 30]}
  labels={['1st', '2nd', '3rd']} 
/>

And make the line reach the edges of the chart:

<LineChart
  data={[50, 100, 30]}
  labels={['1st', '2nd', '3rd']}
  fullWidthLine={true} 
/>

And let's make the output SVG smaller - half the default height & width:

<LineChart
  data={[50, 100, 30]}
  labels={['1st', '2nd', '3rd']}
  fullWidthLine={true}
  height={150} 
  width={150} 
/>

Built In Styling

There's a bunch of built-in options for styling the charts!

Color

The colors parameter allows coloring of line elements with corresponding indexes.

<LineChart
  data={[50, 100, 30]}
  labels={['1st', '2nd', '3rd']}
  colors="cyan"
/>

Colors will wrap if there are more lines than colors, which makes alternating colors trivial!

<LineChart
  data={[
    [50, 100, 30, 10],
    [10, 30, 100, 50],
    [75, 25, 90, 40],
  ]}
  labels={['1st', '2nd', '3rd', '4th']}
  colors={["cyan", "magenta"]} 
/>

Stroke

Of course the line stroke can also be customized via thickness, cap, and lineType:

<LineChart
  data={[50, 100, 30, 10]}
  labels={['1st', '2nd', '3rd', '4th']}
  colors="cyan"
  thickness={10} 
  cap="round"
  lineType="smooth"
/>

Multiple line options can also be provided as arrays, with each value targeting the corresponding line:

<LineChart
  data={[
    [50, 100, 30, 10],
    [10, 30, 100, 50],
  ]}
  labels={['1st', '2nd', '3rd', '4th']}
  colors={["cyan", "magenta"]}
  thickness={[3, 10]} 
  lineType={["straight", "smooth"]} 
/>

Gradients

Not only that but gradients are fully supported by default.

<LineChart
  data={[50, 100, 30, 10]}
  labels={['1st', '2nd', '3rd', '4th']}
  thickness={10}
  lineType="smooth"
  gradientColors={[ 
    'oklch(0.7017 0.3225 328.36)', 
    'oklch(0.9054 0.15455 194.769)', 
  ]} 
  gradientDirection={'left-to-right'} 
/>

You can also change the stops for colors by supplying a percentage along with each color in the format color:% like so:

<LineChart
  data={[50, 100, 30, 10]}
  labels={['1st', '2nd', '3rd', '4th']}
  thickness={10}
  lineType="smooth"
  gradientColors={[
    'gray:33%', 
    'yellow:33%', 
    'yellow:66%', 
    'gray:66%', 
    'gray:100%', 
  ]}
  gradientDirection={'left-to-right'}
/>

I've also added support for instead having a continuous shared gradient!

<LineChart
  data={[
    [50, 100, 30, 10],
    [10, 30, 100, 50],
  ]}
  labels={['1st', '2nd', '3rd', '4th']}
  thickness={[3, 10]}
  lineType={["straight", "smooth"]}
  gradientColors={[
    'oklch(0.7017 0.3225 328.36)',
    'oklch(0.9054 0.15455 194.769)',
  ]}
  gradientDirection={'left-to-right'}
  gradientMode="continuous"
/>

Linechart Examples