score:8

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;
}

ctx.prototype.style = function () {
    return this.__canvas.style
}

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).

score:0

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.

score:6

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;

https://codepen.io/anon/pen/RYVVPY


Related Query

More Query from same tag