Highcharts Demo

author(s): Torstein Hønsi

by jpeter06

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; margin-top: 1em"></div>

JavaScript

$(function() {
  (function(H) {
    H.wrap(H.Renderer.prototype, 'label', function(proceed, str, x, y, shape, anchorX, anchorY, useHTML) {
      if (str.indexOf('<svg') >= 0) useHTML = true;
      return proceed.apply(this, [].slice.call(arguments, 1));
    });
  }(Highcharts));


  $('#container').highcharts({
    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }],

    navigation: {
      buttonOptions: {
        theme: {
          // Good old text links
          style: {
            color: '#039',
            useHTML: true
          },
          useHTML: true
        }
      }
    },

    exporting: {
      allowHTML: true,
      buttons: {
        contextButton: {
          enabled: false
        },
        exportButton: {
          text: '<div><svg width="15px" height="15px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>s</title><desc></desc><defs></defs><g id="black-icon-copy-6" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g id="Download" transform="translate(8.000000, 8.000000)" stroke="#00FF00" stroke-width="16"><path d="M240.463235,188.294116 L240.463235,209.163945 C240.463235,226.444557 226.444557,240.463235 209.163945,240.463235 L31.7540284,240.463235 C14.4625072,240.463235 0.454738562,226.444557 0.454738562,209.163945 L0.454738562,188.294116" id="Shape"></path><path d="M120.458987,187.094073 L120.458987,0.454738562" id="Shape"></path><polyline id="Shape" points="196.825327 110.727733 120.458987 187.094073 44.0926471 110.727733"></polyline></g></g></svg></div>',
          menuItems: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.splice(2)
        },
      }
    }

  });
});