Chartjs to svg

convert canvas chartjs to svg image

by Reinventatuweb

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://rawgit.com/gliffy/canvas2svg/master/canvas2svg.js"></script>
<div class="chartContainer">
   <canvas id="radarCanvas"></canvas>
</div>

<div class="svgContainer"></div>

CSS

.chartContainer {
  position: relative; 
  margin: auto;
  height:500px; 
  width:500px;
  }

JavaScript

var graphData = {
  type: "line",
  data: {
    labels: ['Feb','Mar','Apr','May','Jun','Jul'],
    datasets: [{ 
        data: [86,98,78,82,99,80],
        label: "Effort Ratio",
        borderColor: "#3e95cd",
        fill: '+2',
        lineTension: 0.2
      }
    ]
  },
  options: {
    title: {
      display: false,
      text: 'World population per region (in millions)'
    }
  }
}





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

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

// tweak the lib according to sspecht @ https://stackoverflow.com/questions/45563420/exporting-chart-js-charts-to-svg-using-canvas2svg-js

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

// canvas2svg 'mock' context
var svgContext = new C2S(600,300);


// new chart on 'mock' context fails:
var mySvg = new Chart(svgContext, graphData);
// Failed to create chart: can't acquire context from the given item


var svg_chart = svgContext.getSerializedSvg(true);

console.log(svgContext.getSerializedSvg(true));

$(".svgContainer").html(svg_chart);