JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.enhancedLegendRenderer.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.css">
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script>
<div id="chartdiv" ></div>
JavaScript
var plot3 = $.jqplot('chartdiv', [[['2013-01',1800], ['2013-2',1200], ['2013-03',1400], ['2013-04',1450], ['2013-05',1900]]], {
animate: true,
animateReplot: true,
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions:{
formatString:'%b',
angle: -90
},
tickInterval:'1 month'
},
yaxis:{
label:'asd',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: 15
},
}
},
legend:{
show:true,
renderer: $.jqplot.EnhancedLegendRenderer,
location: 's' ,
placement : "outside",
marginTop : "50px",
rendererOptions: {
numberRows: 1
}
},
series:[{
lineWidth:4,
label: "Series A1",
markerOptions:{style:'square'}}]
});