Highcharts Demo

author(s): Torstein Hønsi

HTML

<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';
.highcharts-button-symbol {
  display: none
}

.highcharts-button-box {
  fill: url(#image1)
}

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": {
        "align": "right",
        "symbol": "menu",
        "height": 24,
        "width": 24,
        "y": 0,
        "x": 0,
        "enabled": true,
        fill: 'url(#image1)'

      }
    }
  },
  "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)"
  }]
});