Turn any SVG based chart into hand writing style

1 day ago 1

turns svg graph into sketchy

Sketchify is a js tool that turns svg graph into sketchy visualization. It is based on Rough.js

npm install npm run build

To turn an existing graph that composed by svg into sketch mode.

Add dependencies to your html:

Run following js code:

const option = { fillStyle: 'hachure', roughness: 1, bowing: 1, chartType: 'highcharts', }; // container is the root dom element that contains related graph svg const handler = Sketchifier(container, option); handler.handify(); // call restore will turn the graph back to original one handler.restore();

Refer to roughjs api document for options of fillStyle, roughness and bowing.

There are 5 demo charts types:

After npm run build-dev, open related html file in demo folder will show you the demo.

Or you can refer to following codepen pages:

Sketchify is high generalized, now I have tried to support most chart types in highcharts and xCharts, the customization is to filter some svg element that does not need to sketchify. Adding a blacklist of related element class. In case you want to do something similar, refer to highcharts.js

Read Entire Article

Turn any SVG based chart into hand writing style

Related

Scientists unearth "universal thermal performance curve" tha...

Are transformer all we need?

Morph: Fast Apply AI Edits