JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.jchartfx.com/libs/jQuery/jquery-1.7.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.system.js"></script>
<script src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector.js"></script>
<link rel="stylesheet" href="http://www.jchartfx.com/libs/v7/current/styles/Attributes/jchartfx.attributes.css">
<link rel="stylesheet" href="http://www.jchartfx.com/libs/v7/current/styles/Palettes/jchartfx.palette.css">
<canvas width="600" height="400" style="display:none"></canvas>
<div id="currentChart" style="width:600px; height:400px;"></div>
<br/><br/>
<a id="save">Save</a>
JavaScript
$(document).ready(function(){
var chart = new cfx.Chart();
// Configure the chart here
chart.setGallery(cfx.Gallery.Bar);
//
chart.create("currentChart");
});
$("#save").on("click", function () {
// Obtain the chart's div tag
var html1 = $("svg.jchartfx").parent().html();
// Filter the SVG tag only
var html = html1.substring(html1.indexOf("<svg"));
// Since CSS is used, a reference to the external css must be added to the SVG. This is not needed if CSS is not used
html = "<?xml-stylesheet href=\"http://www.jchartfx.com/libs/v7/current/styles/Attributes/jchartfx.attributes.css\" type=\"text/css\"?>" + html;
html = "<?xml-stylesheet href=\"http://www.jchartfx.com/libs/v7/current/styles/Palettes/jchartfx.palette.css\" type=\"text/css\"?>" + html;
var canvas = document.querySelector("canvas");
context = canvas.getContext("2d");
var imgsrc = 'data:image/svg+xml;base64,' + btoa(html);
var image = new Image;
image.src = imgsrc;
// This function creates the PNG and saves it to disk
image.onload = function() {
context.drawImage(image, 0, 0);
var canvasdata = canvas.toDataURL("image/png");
var a = document.createElement("a");
a.download = "sample.png";
a.href = canvasdata;
a.click();
};
});