Handdrawn Lines for Highcharts

Question

How would you extend Highcharts to accomplish a "hand-drawn" effect (example: https://www.amcharts.com/demos/column-and-line-mix/?theme=chalk ).

Or can it be done using a library?

Answer 1

Implementing that in Highcharts requires some core code analyzing and wrapping/overwriting SVGRenderer methods.

Example

Column points are SVG rect's shapes:

https://github.com/highcharts/highcharts/blob/master/js/parts/ColumnSeries.js

translate function:

        // Register shape type and arguments to be used in drawPoints
        point.shapeType = 'rect';

drawPoints function:

                point.graphic = graphic =
                    renderer[point.shapeType](shapeArgs)
                        .add(point.group || series.group);

SVGRenderer (https://github.com/highcharts/highcharts/blob/master/js/parts/SvgRenderer.js) contains rect method that can be wrapperd/overwritten so that it returns the complex path (handwritten effect) instead of simple rect tag.

Docs about wrapping/overwriting: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts