Search code examples
angularjshighchartshighcharts-ng

How to hide the export button in highcharts-ng


I'm using Angularjs with highcharts-ng library and I want to have a highchart directive with the ability to export the chart (showing the export button) and another without that option (not showing the export button) but I have not managed to disable (hide) the button using the configuration object. How can I do that?

Here is the snippet

var app = angular.module('app', ['highcharts-ng']);

app.directive('myChart', function(){
  return {
    restrict: 'E',
    scope: {},
    template: '<highchart config="chartConfig"></highchart>',
    link: function(scope, element, attrs) {
      scope.chartConfig = {
        options: {
          exporting: {
            enabled: false
          }
        }
      };
    }
  };
});
<div ng-app="app">
    <my-chart></my-chart>    
<div>

<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular.js"></script>
<script src="https://rawgit.com/pablojim/highcharts-ng/0.0.7/src/highcharts-ng.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

Even if a disable the export property


Solution

  • I got the same problem, and since the regular options somehow don't work, I just hide it with some CSS and javascript (jQuery) where needed.

    $('.highcharts-button').css('display': 'none');