`<BarChart />`

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

Basic Usage

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

Let's add some labels:

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

And place the chart on the right:

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

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

<BarChart
  data={[50, 100, 30]}
  labels={['1st', '2nd', '3rd']}
  placement="right"
  height={150} 
  width={150} 
/>

Built In Styling

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

Color

The fillColors parameter allows filling of bar elements with corresponding indexes.

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

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

<BarChart
  data={[50, 100, 30, 10]}
  labels={['1st', '2nd', '3rd', '4th']}
  fillColors={["cyan", "magenta"]} 
/>

Stroke

Of course the bar outlines can also be customized via strokeColors & strokeWidths, both also wrapping:

<BarChart
  data={[50, 100, 30, 10]}
  labels={['1st', '2nd', '3rd', '4th']}
  fillColors={["cyan", "magenta"]}
  strokeColors={["magenta", "cyan"]} 
  strokeWidths={[3]} 
/>

Gradients

Not only that but gradients are fully supported by default.

<BarChart
  data={[50, 100, 30, 10]}
  labels={['1st', '2nd', '3rd', '4th']}
  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:

<BarChart
  data={[50, 100, 30, 10]}
  labels={['1st', '2nd', '3rd', '4th']}
  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!

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

You can also manually tweak the width of each bar via barWidth if you'd like:

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

Barchart Examples