JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.css">
<script src="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.pointLabels.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.cursor.js"></script>
<div id="chart" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
JavaScript
var cos1 = [];
var cos2 = [];
var cos3 = [];
for (var i = 0; i < 2 * Math.PI; i += 2) {
if(i <= 2)
cos1.push([i, Math.cos(i)]);
if(i >= 2 && i <= 4)
cos2.push([i, Math.cos(i)]);
if(i >= 4 && i <= 6)
cos3.push([i, Math.cos(i)]);
}
var myColorTab = new Array("#FF0000", "blue", "green");
var plot3 = $.jqplot('chart', [cos1,cos2,cos3], {
seriesColors : myColorTab,
cursor: {
show: true,
showTooltip: true,
showTooltipGridPosition: true,
// showTooltipDataPosition: false,
showTooltipUnitPosition: false,
useAxesFormatters: false,
// showVerticalLine : true,
followMouse: true
},
title: 'Line Style Options',
// Series options are specified as an array of objects, one object
seriesDefaults: {
markerRenderer: $.jqplot.MarkerRenderer,
markerOptions: {
color: 'black'
}
}
});