JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://highcharts.com/js/2.1.6/highcharts.src.js"></script>
<div id="linecontainer" style="width: 980px; height: 500px; margin: 0 auto"></div>
JavaScript
// JavaScript Document
//var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'linecontainer',
defaultSeriesType: 'line',
marginRight: 130,
marginBottom: 25,
backgroundColor: '#e3dfd4'
},
title: {
text: '',
},
xAxis: {
categories: ['2001', '2002', '2003', '2004', '2005', '2006',
'2007', '2008', '2009', '2010'],
},
plotOptions: {
series: { //line series color + size
lineWidth: .5,
lineColor:'#000',
shadow: false,
marker: { //marker fill (circle itself) + line = border
fillColor: null,
lineColor: null // inherit from series
}
},
},
yAxis: {
title: {
text: 'Brand Value',
}
},
//legend of brands
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 30, /*change to 0 when using regular js - change back to 30 when using github*/
y: 80,
borderWidth: 0
},
//uses ajax to load
tooltip: {
...