Highcharts - Style Exporting Button

by Ben Clayton

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

Highcharts.SVGRenderer.prototype.symbols.download = function(x, y, w, h) {
  var path = [
    // Arrow stem
    'M', x + w * 0.5, y,
    'L', x + w * 0.5, y + h * 0.7,
    // Arrow head
    'M', x + w * 0.3, y + h * 0.5,
    'L', x + w * 0.5, y + h * 0.7,
    'L', x + w * 0.7, y + h * 0.5,
    // Box
    'M', x, y + h * 0.9,
    'L', x, y + h,
    'L', x + w, y + h,
    'L', x + w, y + h * 0.9
  ];
  return path;
};


Highcharts.chart('container', {

  title: {
    text: 'Style Exporting Button'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  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]
  }],

  exporting: {
    buttons: {
      contextButton: {
        symbol: 'download',
				symbolFill: '#FFFFFF',
				symbolStroke:'#FFFFFF',
        theme: {
          'stroke-width': 0,
          stroke: '#432667',
          fill: '#432667',
          r: 2,
          states: {
            hover: {
              fill: '#01C5C4'
            },
            select: {
              stroke: '#000',
              fill: '#01C5C4'
            }
          }
        }
      },
    },
  }
});