Chartist-js: Change SVG basic shapes for line chart points

[SimonTernoir]

Hi,

Do you think it could be possible to specify, for each serie of data, a svg basic shape element.
I know I can draw squares with the css property stroke-linecap: square but it could be really cool to change the line element by circle, polygon or polyline element.

Thanks for your feedbacks

[gionkunz]

Hi Simon

This is currently not supported and actually I'm not sure if this would fit into Chartist.js as I'm really careful about feature bloats. However, I'm thinking of an API that will allow you to hack into the drawing mechanism of Chartist.js and that allows you to draw any kind of shape you like and attach it to the chart. We need something like this to allow users to make use of the coordinates Chartist.js figures out for point, lines, labels etc and that allows the user to substitute each of these elements with a custom SVG element or a foreignObject https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

I think this would add great possibilities for customization without bloating the library.

Hope you still can use Chartist even without these custom dot shapes.

Cheers
Gion

[SimonTernoir]

Hack/override the drawing mechanism could be a good solution. It's cool to keep the lib simple to use!

[gionkunz]

Hi Simon

This is now possible in the just released version 0.2.0 using the Chartist events and the Svg module to intercept the drawing process. Here is an example: http://gionkunz.github.io/chartist-js/examples.html#add-peek-cricles-using-the-draw-events

Or this one: http://gionkunz.github.io/chartist-js/examples.html#using-events-to-replace-graphics

I hope this helps for your use case.
Cheers
Gion

[SimonTernoir]

Really awesome! Thanks for this feature!

[gionkunz]

Cool :-)