Highcharts Demo - JSFiddle
author(s):
Torstein Hønsi
HTML
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.highcharts.com/stock/5.0.13/highstock.src.js"></script>
<script src="http://code.highcharts.com/modules/exporting.src.js"></script>
<div id="container"></div>
CSS
@import 'https://code.highcharts.com/css/highcharts.css';
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.highcharts-button-symbol {
display: none
}
.highcharts-contextbutton text {
font-family: 'Glyphicons Halflings';
}
JavaScript
var chart = Highcharts.chart('container', {
"chart": {
"type": "column",
"renderTo": "periodChart"
},
"title": {
"text": "Verkoop per periode"
},
"xAxis": {
"categories": ["2015", "2016", "2017"]
},
"yAxis": {
"title": {
"text": "Aantal verkochte producten"
}
},
"exporting": {
"buttons": {
"contextButton": {
"enabled": true,
text: "\ue059",
width: 20
}
}
},
"series": [{
"borderColor": "#555",
"data": [{
"name": "2015",
"y": 6121.0
}, {
"name": "2016",
"y": 6172.0
}, {
"name": "2017",
"y": 4943.0
}],
"name": "Aantallen per jaar (P/s)"
}]
});