Highcharts Demo
author(s): Torstein Hønsi
by Sascha
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>
JavaScript
const data = {
chart: {
type: "column",
style: {
fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
},
},
credits: {
enabled: false,
},
exporting: {
enabled: false,
},
title: {
text: null,
align: "left",
style: {
fontSize: "16px",
},
},
boost: {
useGPUTranslations: true,
},
plotOptions: {
series: {
fillOpacity: 0.4,
pointPadding: 0,
groupPadding: 0.05,
label: {
style: {
fontWeight: "normal",
},
},
dataLabels: {
style: {
fontWeight: "bold",
},
enabled: true,
},
},
},
tooltip: {
useHTML: true,
headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>',
},
legend: {
enabled: true,
},
xAxis: {
tickmarkPlacement: "on",
labels: {
autoRotation: [-10, -20, -30, -40, -50, -60, -70, -80, -90],
},
title: {
text: null,
},
visible: true,
categories: [
"02.05.2017",
"03.05.2017",
"04.05.2017",
"05.05.2017",
"08.05.2017",
"09.05.2017",
"10.05.2017",
"11.05.2017",
"12.05.2017",
"13.05.2017",
"14.05.2017",
"15.05.2017",
"16.05.2017",
"17.05.2017",
"18.05.2017",
"19.05.2017",
"22.05.2017",
"23.05.2017",
"24.05.2017",
"26.05.2017",
"27.05.2017",
"29.05.2017",
"30.05.2017",
"31.05.2017",
"01.06.2017",
"02.06.2017",
"03.06.2017",
"05.06.2017",
"06.06.2017",
"07.06.2017",
"08.06.2017",
"09.06.2017",
"11.06.2017",
"12.06.2017",
"13.06.2017",
"14.06.2017",
"16.06.2017",
"17.06.2017",
"18.06.2017",
"19.06.2017",
"20.06.2017",
"21.06.2017",
"22.06.2017",
"23.06.2017",
"25.06.2017",
"26.06.2017",
"27.06.2017",
"28.06.2017",
"29.06.2017",
...