Data Viz with Personality: Hand-Drawn Bar Charts

Standard charts are great for dashboards, but sometimes you want your data to tell a story with a bit more personality.

We’ve built a custom <BarChart /> component that supports hand-drawn, scribble, and outline styles.

1. The Hand-Drawn Style

This style applies a displacement filter to the bars, giving them a shaky, sketched look.

2. The Scribble Style

Instead of a solid fill, this style uses a diagonal hatch pattern to simulate scribbling.

3. Outline Style

Minimalist and clean, just the outlines.

4. Animations

The charts come with built-in animations. The default is grow, but you can also use fade.

Usage

Using the component is simple. Just pass your data as an array of objects.

<BarChart 
  data={[
    { label: 'A', value: 10 },
    { label: 'B', value: 20 }
  ]}
  style="hand-drawn"
  color="red"
/>

Go ahead and make your data pop!