New
by Mike Rawling
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($) {
var chart;
var chartingOptions = {
colors: ['#222121', '#fac000', '#aaa'],
chart: {
type: "area",
zoomType:"x",
marginBottom:100,
backgroundColor: '#f4f4f4'
},
gridLineDashStyle: 'Dot',
tooltip: {
/*
positioner: function(labelWidth, labelHeight, point) {
var tooltipX, tooltipY;
tooltipX = point.plotX + chart.plotLeft + 20;
tooltipY = point.plotY + chart.plotTop - 20;
return {
x: tooltipX,
y: tooltipY
};
},
*/
valueSuffix: ' impressions',
backgroundColor: "#fff",
borderWidth: "2",
borderRadius:"2",
shadow: true,
useHTML: true,
style: {
padding: "10px"
},
shared: true,
crosshairs: {
dashStyle: "dash",
color: "grey",
width: 1
}
},
plotOptions: {
series: {
lineWidth: 1
},
area: {
marker: {
enabled: false
},
stacking: "normal",
stickyTracking: false
}
},
title: {
text: ""
},
legend: {
/* align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
x: 0,
y: 0
*/
},
subtitle: {
text: "",
x: -0
},
xAxis: {
categories: [
"20 June 2016",
"21 June 2016",
"22 June 2016",
"23 June 2016",
"24 June 2016",
"25 June 2016",
"26 June 2016",
"27 June...