Turn Any SVG Chart into Hand‑Drawn Sketches with Sketchify and RoughJS

Several years ago the author, working at a BI company, was inspired by the 2013 paper “Sketchy Rendering for Information Visualization” and built a prototype tool for hand‑drawn style visualizations.

The paper’s core idea is to apply random deformations to basic graphic elements (lines, circles) to achieve a sketchy look.

Existing sketchy chart libraries such as chart.xkcd and chartjs‑plugin‑rough have limited chart types, so the author created a generic tool called Sketchify, based on RoughJS, to convert any SVG‑based chart into a hand‑drawn style.

Sketchify works by starting from a root DOM element, locating all SVG objects, recursively traversing child elements, reading their basic attributes, creating RoughJS copies with a sketchy appearance, and hiding the original elements. Restoring the original chart simply recreates the hidden elements and removes the RoughJS copies.

Example usage:

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

The author tested Sketchify on several popular SVG chart libraries: ECharts, AntV G2, Highcharts, amCharts, and xCharts. Screenshots show original versus sketchy versions for each library.

Notes: Sketchify only supports SVG‑based visualizations; it does not work with Canvas‑based libraries such as ECharts (when using Canvas) and AntV G2. The sketchy rendering adds many SVG elements and may consume significant resources.

If you like Sketchify, you can star the project on GitHub: https://github.com/gangtao/sketchify .