score:12
To add button use options for chart. Then you can set for each chart different set of options: http://jsfiddle.net/4uP5y/4/
Get default buttons:
var buttons = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;
buttons.push({
text: "Tokyo Only Option",
onclick: HelloWorld
});
And set them for a chart:
exporting: {
buttons: {
contextButton: {
menuItems: buttons // or buttons.slice(0,6)
}
}
},
score:0
I found another possiblity to add it only to one chart. Add following to the chart where you want to extend the context menu
exporting: {
buttons: {
contextButton: {
menuItems: [
]
}
}
},
. Now you are able to extend the chart dynamicly with a method like
function (button) {
var userMenu = this.chart.userOptions.exporting.buttons.contextButton.menuItems;
if (userMenu.length === 0) {
var menuItems = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;
for (var itemIndex in menuItems) {
userMenu.push(menuItems[itemIndex]);
}
}
userMenu.push(button);
};
. Where this.chart points to the chart which context menu should be extended
score:1
See the updated fiddle with result : http://jsfiddle.net/4uP5y/3/
You just needed to mark the newYork chart with exporting enabled false, like this :
exporting: {
enabled: false
}
score:1
Starting from Paweł Fus answer, I found out a cleaner solution for the general case. The main issue is you need not to mess around with original object and extend it. Instead, you'd be better cloning it. Please note that my solution requires jQuery.
function appendExportButton(mytext, myfunction){
var defaultButtons = Highcharts.getOptions().exporting.buttons; // get default Highchart Export buttons
var myButtons = $.extend(true, {}, defaultButtons);
myButtons.contextButton.menuItems.push({
text: mytext,
onclick: myfunction
});
return {buttons: myButtons};
}
To insert this button in the desired chart, define the chart this way:
var mychart = new Highcharts.Chart({
chart: {
...whatever...
},
plotOptions: {
...whatever...
},
series: {
...whatever...
},
exporting: appendExportButton("Save data in CSV format", saveCSV)
});
In the case of OP problem, this is the line you have to use:
exporting: appendExportButton("Tokyo Only Option", HelloWorld)
Source: stackoverflow.com
Related Query
- Custom Highcharts Context Menu Button Appearing in Every Chart on Page
- Highcharts context menu button appearing thrice for the same chart
- Highcharts applying custom style to context button using css class
- Highcharts context menu causes chart to disappear on return from print screen only on Chrome
- How do I align the hover/dropdown menu with the my custom context button symbol?
- Highcharts resize chart size using custom export button and replace expand and collapse button dynamically
- Preventing a custom piece of text from appearing ON ALL Highcharts present on a page ← piece of text inserted using {events:{load:function(){var
- Tooltip on custom button in Highcharts
- Highcharts chart click event fired on click of the reset zoom button (bug?)
- Highcharts : Chart with drilldown how to obtain click event of drill up button
- Highcharts custom renderer chart and tooltip
- Showing Context Menu on right click of High Chart series
- HighCharts Hide specific context Menu items
- Add custom buttons in Angular Highcharts Line Chart
- HighCharts tooltip appearing behind the dialog holding the chart
- HighCharts : How to add or remove "chart context menu" from chart container?
- Highcharts create custom button in config
- Toggle the custom button text using highcharts
- Highcharts - Remove first marker from Area chart in every series
- Highcharts symbol not appearing in chart (opacity set to 0, it appears)
- Angular Highcharts Custom Legend Label In Area Chart
- HighCharts Stock Chart error code 18
- Highcharts - how to set custom content in point tooltip (popup) on 3D scatter chart or how to customize point tooltip information?
- Highcharts - Hide export menu in print page
- Why do I have the issue 'property assigment expected' when I want to display a chart on my web page using highcharts
- Implementing Jaspersoft Studio Community (v6.2.2) Custom Visualisation Component showing Highcharts chart
- Highcharts context menu hidden behind series
- Export of high chart to CSV using custom button
- How can we add chart context menu in highcharts-angular?
- Multiple Highcharts in one page - only one chart displays
More Query from same tag
- HighChart not getting data from server side?Error in parseJSON
- JSON format is not supported by highchart
- Highcharts missing array
- Highcharts multiple data on single point in series
- Fullscreen bootstrap card with highcharts (100% height)
- response with status 200: ok
- Performing styling action on specific data in a highcharts graph
- Highmaps in React
- HighCharts Graphs don't load half the time
- Looking for a program, that supports DOM funtions and run javascript in linux server, just like a browser but without User Interface
- Getting data from Postgres in JSON format in ROR into a Highcharts javascript
- Disable all UI events on highcharts
- Angular child component doesnt recognize input changes
- trouble embeding highcharts in a html php page
- Data security highcharts
- Highcharts highstock plot with data from php
- Divide y-axis values by 10 onclick
- Highcharts does not display years on Xaxis when data with NULL values
- How to show numbers in datalables donut highchart
- Remove exporting button from HighChart Objective-C
- Highcharts Point Select/Unselect Events
- $.getJSON is not getting the values to show as a line graph
- HighCharts: Getting rid of tooltip but mantain crosshairs
- Highcharts and Json data
- highcharts spline with multiple series update every few seconds
- (HighCharts) Color reverts on mouseOut after manual mouseOver
- How to shift Highchart's line chart from simple html to Flask?
- Return Highcharts using Ajax and Python
- Can highcharts generate a 3d column chart like this?
- Can't show the color in interactive highchart choropleth map