CODEWITHSUNDEEP
javascriptc#jqueryhighchartsdotnethighcharts
bjjrolls
bjjrolls

Reputation: 549

Disable Print Chart option only from HighCharts

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?

Upvotes: 9

Views: 2769

Answers (2)

Lokman Hosen
Lokman Hosen

Reputation: 482

It's very simple with the help of css

enter image description here

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. enter image description here

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.

Upvotes: 0

wergeld
wergeld

Reputation: 14442

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.

Upvotes: 8

Related Questions