score:22
Accepted answer
You can add custom buttons using the exporting object:
exporting: {
buttons: {
customButton: {
text: 'Custom Button',
onclick: function () {
alert('You pressed the button!');
}
},
anotherButton: {
text: 'Another Button',
onclick: function () {
alert('You pressed another button!');
}
}
}
}
EDIT: He wanted to add buttons after config
var chart = $('#container').highcharts();
normalState = new Object();
normalState.stroke_width = null;
normalState.stroke = null;
normalState.fill = null;
normalState.padding = null;
normalState.r = null;
hoverState = new Object();
hoverState = normalState;
hoverState.fill = 'red';
pressedState = new Object();
pressedState = normalState;
var custombutton = chart.renderer.button('button', 74, 10, function(){
alert('New Button Pressed');
},null,hoverState,pressedState).add();
new fiddle: http://jsfiddle.net/NxK39/2/ answer using technique from Highcharts: replace custom button image on hover
score:0
If you want to use some custom HTML:
this._chart = new Highcharts.Chart(container, options, chart => {
chart.renderer.text('<span class="material-icons">settings</span>', 15, 335, true)
.attr({ zIndex: 3 })
.add();
});
score:5
This seems much more clean (due to being able to align properly):
JS
chart.renderer.button('Reset zoom', null, null, chart.resetZoom, {
zIndex: 20
}).attr({
align: 'right',
title: 'Reset zoom level 1:1'
}).add(chart.zoomGroupButton).align({
align: 'right',
x: -10,
y: 10
}, false, null);
originally found here: http://forum.highcharts.com/viewtopic.php?f=9&t=15416
if you need to pass any information simply do the following:
chart.renderer.button('Reset zoom', null, null, function(){ myFunction(chart) }, {
zIndex: 20
}).attr({
align: 'right',
title: 'Reset zoom level 1:1'
}).add(chart.zoomGroupButton).align({
align: 'right',
x: -10,
y: 10
}, false, null);
Source: stackoverflow.com
Related Query
- Add buttons in chart of Highcharts at runtime
- Add custom buttons in Angular Highcharts Line Chart
- Can we add fixed buttons on top of bars in highcharts bar chart
- Highcharts saying undefined is not a function when trying to add a new chart
- HighCharts Pie Chart - Add text inside each slice
- How to add space between chart and axis in highcharts
- Add dynamic data to line chart from mysql database with highcharts
- Add onclick event on chart made with the highcharts library
- HighCharts : How to add or remove "chart context menu" from chart container?
- I want to add a line to each column in a Highcharts column chart
- HighCharts Stock Chart error code 18
- How to add a horizontal line in Column bar chart in Highcharts plugin?
- How do i add mouse wheel code in Angular2 highcharts in typescript
- Highcharts add point to line chart with json
- how to add new index Highcharts column drilldown chart
- How to add different click events on each pie of a pie chart created by highcharts usin jquery
- Add different symbols to highcharts chart with dynamic data
- Highcharts add a Mean line to BoxPlot chart
- Add border on highcharts bar chart on start of bar
- Highcharts add an image to that chart with an onClick event attached to it
- Highcharts - add border radius to boxplot chart
- Highcharts - Dynamically change chart type with on radio buttons click
- Highcharts display label for pie chart using html table as data source
- Highcharts add 3 buttons Hide/Remove/Settings to Legend
- Add animation to bar in data sorting bar chart Highcharts
- HighCharts how to add live series data set to existing chart
- Add Source to Highcharts Export CSV
- highcharts polar chart add max tick mark
- "Extend" highcharts chart add properties and functions, prototype
- Add or declare two plotOptions in highcharts for Synchronized chart
More Query from same tag
- Dynamic PDF from html that contains Javascript
- Highcharts don't show data after remove
- How to move a chart (Highcharts) using the arrow keys?
- Default X Axis position of highchart
- Reset zoom doesn't adhere to axis extremes
- HIGHCHARTS, Replace zero with 0.1 >
- Proper format of json for Highchart.js with multiple series
- Highcharts event redraw/load with reflow, and Angular
- Highcharts formats differently in Safari vs Chrome
- Loading multiple variables using Highcharts and jquery with php
- Align Bar Graph with Negative Stack
- Highcharts allowDecimals condition
- Highcharts chart width to dispay size dynamically
- How to transform a point with latitude and longitude value to a coordinates in highcharts map?
- How to space columns in HighCharts
- Add CSS to a specific series' legend label in Highcharts
- angular2-highcharts first point loses on xAxis
- Highstock doesn't show all data in serie
- Draw something under highstock chart navigator
- Why are the xAxis labels in my Highcharts graphic so strangely positioned?
- HIghcharts.js addseries doesn't work?
- Column Chart Show datalabel for null values - Highcharts
- HighCharts: pie slices need background images
- Highcharts yAxis title click
- Keep highcharts y-axis labels in view
- How should I parse dateTime for Highcharts?
- Highcharts - series color on shadow
- Highcharts Trying to Hide/Show series
- gantt chart plot wrong date on xAxis
- HighCharts area graph - show tooltip only on hover of marker