I am trying to export chart.js chart to svg using canvas2svg.js.

It does not seems to be working, since chart.js refuses to use 'fake' canvas created by canvas2svg.js

My HTML code:

<div style="position: relative; height:20vh; width:100vh">
<canvas id="radarCanvas" ></canvas>
</div>

My script:

var ctx = document.getElementById("radarCanvas").getContext("2d");

var radarChart = new Chart(ctx, graphData);  // Works fine


// Create canvas2svg 'fake' context
var c2s = C2S(500,500);

// new chart on 'fake' context fails:
var mySvg = new Chart(c2s, graphData);
// Result (console):
// "Failed to create chart: can't acquire context from the given item"

I've posted full example on Codepen (Sorry for long js there, I could not find a link from which to import canvas2svg so I pasted it at the beginnning of the script.)

I am trying to export chart.js chart to svg using canvas2svg.js.

It does not seems to be working, since chart.js refuses to use 'fake' canvas created by canvas2svg.js

My HTML code:

<div style="position: relative; height:20vh; width:100vh">
<canvas id="radarCanvas" ></canvas>
</div>

My script:

var ctx = document.getElementById("radarCanvas").getContext("2d");

var radarChart = new Chart(ctx, graphData);  // Works fine


// Create canvas2svg 'fake' context
var c2s = C2S(500,500);

// new chart on 'fake' context fails:
var mySvg = new Chart(c2s, graphData);
// Result (console):
// "Failed to create chart: can't acquire context from the given item"

I've posted full example on Codepen (Sorry for long js there, I could not find a link from which to import canvas2svg so I pasted it at the beginnning of the script.)

• javascript
• svg
• chart.js

• Also, I don't insist on nither of two libraries mentioned. I just need nice (preferably animated) radar/polar charts which I can export to SVG. Suggestions are welcome. – bocko Commented Aug 10, 2017 at 11:45

4 Answers 4

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

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

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.

The most recent version of Chart.js (3.9.1) seems to use setTransform() and resetTransform() methods which are not implemented by Canvas2SVG ( no updates on github for ~5 years ).

This maintained version does implement theses methods : https://github.com/zenozeng/svgcanvas/ ( https://www.npmjs.com/package/svgcanvas ).

However, it seems to have issues for drawing line. I wrote a little workaround for that ( see https://github.com/zenozeng/svgcanvas/issues/25 ).

I hope it'll help.