CODEWITHSUNDEEP
javascripthighchartscontextmenu
Ishara Amarasekera
Ishara Amarasekera

Reputation: 1449

HighCharts : How to add or remove "chart context menu" from chart container?

Is there any property in highcharts that I can use to remove the chart context menu (the one looks like a hamburger menu on the right hand side) appears in this column chart using javascript?

Is this option comes in highchart by default? I also have a line chart but in that one there was no chart context menu by default. Also if I want to add a chart context menu to that line chart how can I do it? 

Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        var series = this.series[0];
        setInterval(function() {
          newValue = Math.random() * 100;
          series.update({
            data: [newValue],
          }, true)
        }, 1000);
      }
    }
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: [
      'Jan'
    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Rainfall (mm)'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
    name: 'Tokyo',
    data: [49.9]

  }, {
    name: 'New York',
    data: [83.6]

  }, {
    name: 'London',
    data: [48.9]

  }, {
    name: 'Berlin',
    data: [42.4]

  }]
});

Upvotes: 6

Views: 11882

Answers (2)

Jackson Jegatheesan
Jackson Jegatheesan

Reputation: 668

To disable the context menu in high charts as per the discussion

The context menu button comes from exporting module. To not show it, do not add the module script:

<script src="https://code.highcharts.com/modules/exporting.js"></script>

(or)

we can disable it by hiding the highcharts-contextmenu class which is present in the exporting.js using javascript

Example in JQuery

$(".highcharts-contextmenu").hide()

And to enable it on certain scenarios we can do vise-versa

$(".highcharts-contextmenu").show()

Upvotes: 2

User863
User863

Reputation: 20039

Just Include <script src="https://code.highcharts.com/modules/exporting.js"></script>

you can enable or disable it by adding buttonOptions. Defaults to true

Highcharts.chart('container', {
    navigation: {
        buttonOptions: {
            enabled: true
        }
    }
});


Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        var series = this.series[0];
        setInterval(function() {
          newValue = Math.random() * 100;
          series.update({
            data: [newValue],
          }, true)
        }, 1000);
      }
    }
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: [
      'Jan'
    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Rainfall (mm)'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
    name: 'Tokyo',
    data: [49.9]

  }, {
    name: 'New York',
    data: [83.6]

  }, {
    name: 'London',
    data: [48.9]

  }, {
    name: 'Berlin',
    data: [42.4]

  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; margin-top: 1em"></div>

Upvotes: 8

Related Questions