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
- How to format PHP into the proper string for JSON in pie chart using highchart
- Callback and Testing Highcharts
- Highchart stacked area not functioning with missing datapoint
- How can I draw Highcharts horizontal stacked bar with date-time duration
- Max number of flags on highstock control
- Highcharts changing data granularity in combined charts
- Highcharts - Ignore Series in Pie Percentage
- how to COUNT explode imploding data with comma?
- bind data to date using Highcharts
- How to hide only the columns of this group when hovering over a group column in highcharts?
- Reverse one chart and leave the other unreversed - Synchronized highcharts
- Inconsistencies with the display of metric notations in Highcharts
- Server-side c# and client side javascript with json loading Highcharts gantt chart Task Progress Indicator, need to change Tooltip and Label name
- Strange behaviour of new mysql json selection syntax with Laravel
- highcharts: how to update marker fillcolor using angularjs
- Restructuring array for Highcharts use
- Remove month from the axisX in highcharts.js
- Highlighting only selected regions in highmaps
- HIGHCHARTS: Filling area above line with color area representing contribution to line values
- HighCharts / HighStock newly added series have problem with shared tooltips and mouse hover effect
- disappearing highstock series
- Text Ellipsis in bubble chart
- Highcharts variation (%) between yaxis values in tooltip
- Highmaps mulitple series can't seen without disable one
- Is it possible to Customize highcharts drillup button
- Pass string variable to data Highchart
- Loading Highcharts series from XML using jQuery
- Highchart, SQL and Laravel
- highcharts gantt display as bar instead of lines
- HighCharts, HighChartTable - pie chart default slice