JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://bitbucket.org/cleonello/jqplot/raw/35a16c08f4c7/src/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<link rel="stylesheet" href="https://bitbucket.org/cleonello/jqplot/raw/35a16c08f4c7/src/jquery.jqplot.css">
<script src="https://bitbucket.org/cleonello/jqplot/raw/35a16c08f4c7/src/jquery.jqplot.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.logAxisRenderer.min.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<div id="chart2" style="width: 600px; float: right; height: 500px; background-color: #fff;padding:40px">
</div>
JavaScript
$.jqplot('chart2', [[[3, 5], [6, 10], [9, 66],
[12, 44], [15,55], [29,77], [36, 78]
]],
{
axes: {
yaxis: { numberTicks: 5, tickOptions: {}, min: 0, max: 100, label: 'Participation Rate', labelRenderer: $.jqplot.CanvasAxisLabelRenderer, tickOptions: { formatString: '%d%', showGridline: true }, rendererOptions: { forceTickAt0: true, forceTickAt100: true } },
xaxis: { renderer:$.jqplot.CategoryAxisRenderer, rendererOptions:{sortMergedLabels:true}, label: 'Week', tickOptions: { formatString: '%d', showGridline: true }}
},
seriesDefaults: {
showMarker: false ,
rendererOptions: {
diameter: undefined, // diameter of pie, auto computed by default.
padding: 10, // padding between pie and neighboring legend or plot margin.
fill: true, // render solid (filled) slices.
shadowOffset: 2, // offset of the shadow from the chart.
shadowDepth: 15, // Number of strokes to make when drawing shadow. Each stroke
// offset by shadowOffset from the last.
shadowAlpha: 1 // Opacity of the shadow
}
},
seriesColors: ['#3591cf', '#ef4058', '#73C774', '#C7754C', '#17BDB8']
});