Accepted answer

If you use a recent Chart.JS version (2.7.1 at time of writing) you can get this running by tweaking canvas2svg a bit. I added the following code to canvas2svg: Have a look at the Codepen

ctx.prototype.getContext = function (contextId) {
    if (contextId=="2d" || contextId=="2D") {
        return this;
    return null;
} = function () {

ctx.prototype.getAttribute = function (name) {
    return this[name];

ctx.prototype.addEventListener =  function(type, listener, eventListenerOptions) {
    console.log("canvas2svg.addEventListener() not implemented.")

BUT: It only works if you disable animation and responsiveness of the chart (set to false).


For devices that have a devicePixelRatio different than 1 or are zoomed in/out I did:

const getDevicePixelRatio = window.devicePixelRatio
window.devicePixelRatio = 1;
// C2S Code
window.devicePixelRatio = getDevicePixelRatio

Otherwise the svg may get cropped.


In case somebody stumbles across this question, replacing the ctx in sspechts answer to C2S and disabling animation and responsiveness of the graphdata one can get the svg from the canvas. I forked the codepen project and added one function which tweaks the library with the codesnippets from sspecht and the two flags:

// deactivate responsiveness and animation
graphData.options.responsive = false;
graphData.options.animation = false;

Related Query

More Query from same tag