JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/excanvas.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.cursor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.canvasTextRenderer.min.js"></script>
Plot:
<div id="chart" style="width: 600px; height: 300px;"></div>
Image:
<div id="imgChart"></div>
JavaScript
$(document).ready(function(){
var s1 = [[2002, 62000], [2003, 122000], [2004, 44000], [2005, 99000], [2006, 51000]];
var s2 = [[2002, 40200], [2003, 10800], [2004, 88200], [2005, 51800], [2006, 32400]];
var plot2 = $.jqplot ('chart', [s1, s2], {
title: 'Plot With Options',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
seriesDefaults: {
rendererOptions: {
smooth: true
}
},
axes: {
xaxis: {
label: "X Axis",
pad: 0
},
yaxis: {
label: "Y Axis"
}
}
});
// IMAGE OUTPUT
var imgData = $('#chart').jqplotToImageStr({});
var imgElem = $('<img/>').attr('src',imgData);
$('#imgChart').append(imgElem);
});