JSFiddle - React, Tailwind, and code Playground
by Ashish Kasama
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 20px auto"></div>
JavaScript
var chart;
$(document).ready(function () {
Highcharts.getOptions().exporting.buttons.contextButton.menuItems.push({
text: 'Download csv',
onclick: function () {
csv = this.getCSV();
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 't'
},
xAxis: {
categories: ["2005","2006","2007","2008","2009","2010","2011","2012","2013","2014"],
labels: {
rotation: -45
}
},
legend: {
layout: 'vertical',
backgroundColor: 'white',
align: 'right',
verticalAlign: 'top',
y: 60,
x: -10,
borderWidth: 1,
borderRadius: 0,
title: {
text: '::Legend'
},
floating: true,
draggable: true,
zIndex: 20
},
series: [{
"name": "'Crude Oil'_Consumer Price Index",
"data": [
[2005, 1.95267],
[2006, 2.01558],
[2007, 2.07344],
[2008, 2.15255],
[2009, 2.14565],
[2010, 2.18085],
[2011, 2.24937],
[2012, 2.29685],
[2013, 2.33792],
[2014, 2.38265]
],
"visible": true
}, {
"name": "'Crude Oil'_Nominal Price",
"data": [
[2005, 48.887],
[2006, 59.0483],
[2007, 67.1859],
[2008, 92.5737],
[2009, 59.0369],
...