Disable Print Chart option only from HighCharts

Question

I have a DotNetHighchart with the usual options Print Chart, Download as PDF etc etc.

I only want to remove the print chart option, which seemed like a breeze in previous versions of highchart by using

.SetExporting(new Exporting
{
    Buttons = new ExportingButtons
    {
       PrintButton = new ExportingButtonsPrintButton 
       {
          Enabled = false
       }
    }
}

But for reasons unbeknown to me the updated highcharts module only allows for one class within ExportingOptions...

        .SetExporting(new DotNet.Highcharts.Options.Exporting
        {
            Buttons = new DotNet.Highcharts.Options.ExportingButtons
            {
                ContextButton = new DotNet.Highcharts.Options.ExportingButtonsContextButton
                {

                }
            }
        }

Which when set to Enabled=False disables ALL of the menu items which seems silly, meaning it's probably a gap in my own knowledge.

What am I missing here?

If you have the ability to set up global highcharts options (http://api.highcharts.com/highcharts#global) via javascript you could add that to the page with this setting applied. This would be used by all highcharts graphs on the page you load it on (load global options first, of course). The dotnethighcharts code has not been updated in about 2 years it looks like so it is missing all kinds of functionality that has been added to the main highcharts javascript library. — wergeld, Aug 04 '16 at 16:54
@wergeld ah I see. Do you have any more information on how to do this? Do I need to initialise my chart to a javascript variable? — bjjrolls, Aug 05 '16 at 08:19
That API link I placed in my comment should tell you what you need. You create a script tag on your HTML page. Contained within is the highcharts options you want all charts to have. Then, any chart created on this page will use those options unless specifically overridden in that chart's option. — wergeld, Aug 05 '16 at 11:39
I still haven't managed to get this working @wergeld. I have placed it within the doc.ready tags, and have not set the exporting options on the dotnet side of things yet the 'Print chart' option is still there. Any idea why this is? Thanks — bjjrolls, Aug 08 '16 at 13:42
here is a fiddle of how my chart is created from the view, but do you need to see all my C# code also? https://jsfiddle.net/vvbp74dw/ — bjjrolls, Aug 08 '16 at 13:55
Your jsFiddle does not disable the print button. I am not sure where you got that from. But, to do this you need to explicitly define the options you want enabled via `exporting.buttons.contextButton.menuItems`. API: http://api.highcharts.com/highcharts#exporting.buttons.contextButton.menuItems — wergeld, Aug 08 '16 at 14:05
so all this within the global brackets? like https://jsfiddle.net/vvbp74dw/1/ ? — bjjrolls, Aug 08 '16 at 14:08
Again, I am not sure where you are getting "printButton" from. Please see here for setting global options: http://www.highcharts.com/docs/getting-started/how-to-set-options and my API link in previous comment on how to set your export buttons. — wergeld, Aug 08 '16 at 14:26
sorry my bad. Some progress at last, I have done console.log(Highcharts.getOptions().exporting.buttons.contextButton.menuItems); and found that print chart is index 0 in the array. Now I just need to figure out how to remove that from the global menu options. Thanks again for your patience with me. — bjjrolls, Aug 08 '16 at 14:32

wergeld · Accepted Answer · 2016-08-08T14:42:16.237

I am not sure where you are getting printButton from but this is how you would do it. You create a Highcharts.setOptions javascript block and add in the exporting code:

 Highcharts.setOptions({
   global: {
     useUTC: false
   },
   exporting: {
     buttons: {
       contextButton: {
         menuItems: [{
           text: 'Export to PNG (small)',
           onclick: function() {
             this.exportChart({
               width: 250
             });
           }
         }, {
           text: 'Export to PNG (large)',
           onclick: function() {
             this.exportChart();
           },
           separator: false
         }]
       }
     }
   }
 });

This creates only 2 export buttons. To change the type of the export please ready up further on exportChart() code. Then you have your chart code later down the page. I would not put the setOptions in the document ready section. I would put your actual chart in document ready. Working fiddle.

Option 2 Suppose you know that the default export menu items are always going to be in the order they are in right now. Then you can get the export menu items:

var theExportOptions = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;

Now, remove the "print" section:

theExportOptions.splice(0, 1);

Close, but we still have a weird divider there. So, now remove it:

theExportOptions.splice(0, 2);

This seems OK. But, you have to put this bit of code in javascript before you load any chart. I don't like this option because you are dependent on HighCharts always having the same order/amount of export options.

awesome, thanks so much. I went with the first option on your recommendation and it's now resolved. — bjjrolls, Aug 08 '16 at 16:19

score 0 · Answer 2 · answered Jun 21 '21 at 06:04

It's very simple with the help of css

Now look at the above image. I want to hide 2nd(Print Chart) option. All options are displayed by html ul and li(unorder list). So i need to select 2nd child(as i want to hide print option) and make it display none.

<style>
        ul.highcharts-menu li:nth-child(2){
            display: none !important;
        }
</style>

After applying this css the "Print Chart" option will be hide like below image.

You can hide any option by changing child number. For example li:nth-child(3) or li:nth-child(4) etc. I did by this way and sure, this will help you.

Disable Print Chart option only from HighCharts

2 Answers2