90

I'm creating charts with the Highcharts library and I wonder how to remove the 2 little buttons on the right corner which one you can print and download graphs and I'd like to add a new one.

Maybe someone could help me?

Kacper Madej
  • 7,846
  • 22
  • 36
tomzi
  • 1,215
  • 1
  • 12
  • 23
  • 1
    Inspect them via firebug, if they have identities or other things. use css selectors and call .remove() method on them. – mas-designs Mar 13 '12 at 14:12
  • use firebug and find those particular button ids, and in your css you can say to display:none for that particular id or class – manny Mar 13 '12 at 14:19

8 Answers8

224

Try adding exporting: { enabled: false } to your chart generation.

dgw
  • 13,418
  • 11
  • 56
  • 54
  • Thank you a lot, it works :D. Maybe would you know how can i add a new one ? – tomzi Mar 13 '12 at 14:41
  • No, not really creating a new one. But maybe you can modify one of the print/export buttons. The documentation hints in this direction http://www.highcharts.com/ref/#exporting-buttons ... playing with the `onClick`. – dgw Mar 13 '12 at 14:53
  • 5
    `exporting: false` is enough – Adi Azarya Oct 18 '17 at 17:22
13

Check this to create new button:

Example: http://jsfiddle.net/fXHB5/3496/

exporting: {
    buttons: [
        {
            symbol: 'diamond',
            x: -62,
            symbolFill: '#B5C9DF',
            hoverSymbolFill: '#779ABF',
            _titleKey: 'printButtonTitle',
            onclick: function() {
                alert('click!')
            }
        }
    ]
}
afuzzyllama
  • 6,538
  • 5
  • 47
  • 64
Andre Sampaio
  • 131
  • 1
  • 2
  • This jsfiddle doesn't work anymore. "NetworkError: 404 Not Found - http://www.highcharts.com/js/testing-exporting.js" – gps Nov 09 '15 at 18:09
9

The best way to replace the hamburger icon is to disable the navigation buttonOptions, then create your own menu and customize the context one by one as stated in the documentation. From here you can use any icon you want with your own dropdown menu.

This disables the hamburger icon.

navigation: {
buttonOptions: {
  enabled: false
  }
 }

This is how you customize export options for your own list.

$('#print').click(function() {
chart.print();
});
$('#pdf').click(function() {
chart.exportChart({
  type: 'application/pdf',
  filename: 'my-pdf'
 });
});
$('#png').click(function() {
chart.exportChart({
  type: 'image/png',
  filename: 'my-png'
 });
});
$('#jpeg').click(function() {
chart.exportChart({
  type: 'image/jpeg',
  filename: 'my-jpeg'
 });
});
$('#svg').click(function() {
chart.exportChart({
  type: 'image/svg+xml',
  filename: 'my-svg'
 });
});

jsfiddle

Christopher R.
  • 617
  • 7
  • 11
8
exporting: {
    buttons: {
        contextButton: {
            enabled: false
        }
    }
}

You have to disable only the contextButton.

Rafa Viotti
  • 9,998
  • 4
  • 42
  • 62
Ivan Ruski
  • 1,123
  • 1
  • 13
  • 19
1
exporting:false,

Add the above code to disable export option.

Sasikumar
  • 828
  • 12
  • 25
0

@dgw has the right idea to remove the export buttons, but I wasn't happy with the "and I'd like to add a new one" suggestions until I realized I should just make the buttons outside the graph. Unless your data is static, you don't really know if there's room to display your controls.

<div id="container" style="height: 400px; min-width: 600px"></div>
<button id="button" class="autocompare">new button</button>
Dan Ross
  • 87
  • 6
0

Other option is: you can just remove import of "node_modules/highcharts/modules/exporting.js" from the whole project if you don't need it at all.

That was a solution for me!

Renat Gatin
  • 6,053
  • 5
  • 37
  • 58
0

The best way to do this is to update the exporting.buttons.contextButton.menuItems array to only include the menu items you want. Below is an example that excludes the "Print Chart" and "View Full Screen" options.

exporting: {
    buttons: {
        contextButton: {
            menuItems: ["downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG"]
        }
    }
}

Highcharts Example

Debra Saunders
  • 1