JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Reach and Frequency Reporting'
},
subtitle: {
text: 'Source: tapp.cablevision.com'
},
xAxis: [{
categories: ['05 Jan 15', '12 Jan 15', '19 Jan 15', '26 Jan 15', '02 Feb 15', '09 Feb 15', '16 Feb 15', '23 Feb 15', '02 Mar 15','09 Mar 15','16 Mar 15','23 Mar 15', ],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Household Reach',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Cumulative Impressions',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 100,
verticalAlign: 'top',
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Cumulative Impressions',
type: 'column',
yAxis: 1,
data: [30000, 50000, 70000, 100000, 150000, 200000, 220000, 230000, 310000, 360900, 420000, 521000],
tooltip: {
valueSuffix: ''
}
}, {
...