Advanced Hand-Drawn Charts: Sketchy Styles & Scroll Animations

In Part 1, we introduced our custom <BarChart /> component. Now, let’s push the boundaries with even more “sketchy” styles and interactive animations.

1. Sketchy Outlines

The sketchy-outline style combines the minimalist outline look with the hand-drawn distortion filter. It looks like a quick napkin sketch.

2. Sketchy Fill

The sketchy style fills the bars but keeps the distorted edges and adds a border. It feels like a marker drawing.

3. Scroll-Triggered Animations

By default, charts animate when the page loads. But what if the chart is further down the page? You want it to animate when the user sees it.

Use trigger="visible" to enable scroll-triggered animations.

4. Mixing Colors & Styles

You can combine these new styles with our existing color palettes.

Green Sketchy Outline

Red Sketchy Fill

Usage Code

Here’s how to implement the scroll-triggered sketchy chart:

<BarChart 
  data={[
    { label: 'A', value: 10 },
    { label: 'B', value: 20 }
  ]}
  style="sketchy"
  color="blue"
  trigger="visible"
/>

Enjoy your sketchy data!