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
- Highchart - Display JSON Data - MYSQL / PHP
- Highcharts highstock plot with data from php
- Need tooltip in customization
- How can I put custom color in High Charts PIE data | Slice and want to change slice text
- Changing Directive that renders HighChart using AngularJS
- Highstock: How to change flag fill colour on click
- Creating a grid-like column graph in Highcharts
- Slider implementation for the dates on the x-axis not working correctly in Highcharts
- Timeline / Schedule in highcharts
- conflict between twitter-bootstrap and HighCharts plugin
- X-axis interval in Highcharts
- How can highcharts linear scale or log scale button enabel and zoom in or out full page
- How can I label days of month?
- Multiple group_by shiny app making a plot
- Why heatmap is on top scatter when using boost.js?
- Angular 11 - How to import array data into highcharts
- Highchart - position x-axis label bottom to next label
- How to fetch value from another series or data
- Needing to convert JSON Object to JSON Array for Highcharts
- Variable tick length in highcharts
- Highcharts click on column (not bar)
- How to set border on a 3d pie highchart?
- Highcharts: xAxis with vertical gridlines
- How can I hide series from a HighCharts legend?
- Rendering HTML data attributes on highcharts series
- how can I modify my JSON result?
- Load Unknown Number of Charts with Django Chartit
- HighCharts: Drilldown to a Stacked Column
- Highcharts - show only years in xAxis
- how to create a column char with highcharts where each column has a different color