Compared to regular square graphics, hand-drawn styles can bring a cute and relaxed feeling.

Many chart libraries based on rough.js do exactly this, such as roughViz.js, rough-charts, and others.

With out-of-the-box rendering plugins, we can easily switch to hand-drawn styles in G2.

Getting Started

First install @antv/g-plugin-rough-canvas-renderer:

npm install @antv/g-plugin-rough-canvas-renderer --save

Then add it to the plugin list:

import { Plugin } from '@antv/g-plugin-rough-canvas-renderer';

const chart = new Chart({
  container: 'container',
  plugins: [new Plugin()],
});

Just one line of change is needed to complete the style transformation. In this example, we specify the 'zigzag' fill style through fillStyle, which resembles continuous scribble strokes:

chart
  .interval()
  .data([
    { month: 'Jan.', profit: 387264, start: 0, end: 387264 },
    //...
  ])
  .encode('x', 'month')
  .encode('y', ['end', 'start'])
  .encode('color', (d) =>
    d.month === 'Total' ? 'Total' : d.profit > 0 ? 'Increase' : 'Decrease',
  )
  .style('strokeWidth', 2)
  .style('fillStyle', 'zigzag'); // Specify fill style

chart.render();

The effect is shown below, you can see that the original fill color has become more lively!

Of course, fillStyle has many fill methods. The image below shows all currently supported effects. For more options, see the @antv/g-plugin-rough-canvas-renderer documentation:

Finally, choosing a hand-drawn style font can make the overall style more unified. In the example above, we chose 'Gaegu'. You can refer to how to load external fonts.

FAQ

How to use with SVG renderer?

G2 uses g-canvas as the default renderer. If you switch to g-svg, there's also a corresponding hand-drawn style plugin available: @antv/plugin-rough-svg-renderer, with exactly the same usage.

Applications in accessibility mode

Using fillStyle instead of fill can achieve pattern-like effects, making it suitable for accessibility scenarios, such as considering color-blind users and black-and-white printing.

In the example below, we set both fill/stroke to black and use fillStyle as the color attribute:

chart
  .interval()
  //... omitting data, transform, etc.
  .scale('color', {
    range: [
      'hachure',
      'solid',
      'zigzag',
      'cross-hatch',
      'dots',
      'dashed',
      'zigzag-line',
    ],
  })
  .style('fill', 'black')
  .style('stroke', 'black')
  .style('strokeWidth', '4')
  .style('colorAttribute', 'fillStyle');

The effect is shown below: