How to hide the export button in highcharts-ng

Question

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

@Sajeetharan look at the accepted answer at the bottom, that is how I "solved" it. I could not find a better way. — David Barreto, Apr 01 '15 at 18:12

score 2 · Answer 1 · answered Jun 30 '15 at 11:09

2

var HighChartChartModel = { options: { exporting: { enabled: false }, chart: { type: 'bar' } },

This will work

answered Jun 30 '15 at 11:09

madhuka

101
4

score 2 · Answer 2 · answered Aug 19 '15 at 15:37

2

Here is the right way to do this in highcharts-ng:

options: { chart: { type: 'bar' }, exporting: { enabled: false } },

Note that exporting is at the same level as chart.

answered Aug 19 '15 at 15:37

ABOS

3,723
3
17
23

score 1 · Answer 3 · answered Jan 08 '15 at 10:03

1

looks like a bug in highcharts-ng.

if you simply don't include the exporting.js you won't get that button.

a working fiddle here

answered Jan 08 '15 at 10:03

Strikers

4,698
2
28
58

Yes I realize that, but the problem is that for another directive I need the ability to export the chart. Excluding the file will remove the functionality everywhere in my app. – David Barreto Jan 09 '15 at 01:21
Not a bug. see answers above – ABOS Aug 19 '15 at 15:38

score 1 · Accepted Answer · answered Feb 12 '15 at 14:56

1

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');

answered Feb 12 '15 at 14:56

Jeffrey Roosendaal

6,872
8
37
55

I would rather call it a workaround, but I agree though that this should not be the accepted answer. Your solution is, but it's identical to mudhaka's, minus the formatting (why?), but i'll +1 you both, hoping OP would notice. – Jeffrey Roosendaal Aug 20 '15 at 22:02

How to hide the export button in highcharts-ng

4 Answers4