Highcharts Demo - JSFiddle - 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/js/highstock.src.js"></script>
<script src="http://code.highcharts.com/js/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-button text {
font-family: 'Glyphicons Halflings';
}
JavaScript
var chart = Highcharts.chart('container', {
"chart": {
"type": "column",
"renderTo": "periodChart",
events: {
load: function() {
var chart = this,
renderer = chart.renderer;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: 1,
id: "image1",
patternContentUnits: 'userSpaceOnUse'
});
renderer.image('https://www.highcharts.com/samples/graphics/sun.png', 0, 0, 24, 24).add(pattern);
}
}
},
"title": {
"text": "Verkoop per periode"
},
"xAxis": {
"categories": ["2015", "2016", "2017"]
},
"yAxis": {
"title": {
"text": "Aantal verkochte producten"
}
},
exporting: {
buttons: {
contextButton: {
enabled: false
},
exportButton: {
text: '\ue059',
// Use only the download related menu items from the default
// context button
menuItems: [
'downloadPNG',
'downloadJPEG',
'downloadPDF',
'downloadSVG'
]
}
}
},
"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)"
}]
});