change button image - image

Question

I have created a new custom button, can I set a different background image instead of 'circle' or 'triangle' ?
thanks
Chanan
exporting: {
enabled: true,
buttons: {
'realTimeButton': {
id: 'realTimeButton',
symbol: 'diamond',
x: -88,
symbolFill: realTimeColor,
hoverSymbolFill: realTimeColor,
_titleKey: "realTimeButtonTitle",
onclick: function(event) {
// handle change to real time
if ( enable_lastRoundsChart_realtime )
{
// disable real time flag
enable_lastRoundsChart_realtime = 0;
// re-create detail in real time mode disabled
createDetail(cache_last_rounds.last_rounds_data, window.show_top_round_ids);
// enable plotBand
if ( pb_master_chart )
{
pb_master_chart.options.chart.events.selection.enabled = 'true';
pb_master_chart.options.chart.zoomType = 'x';
}
}
else
{
// enable real time flag
enable_lastRoundsChart_realtime = 1;
// re-create detail in real time mode enabled
createDetail(cache_last_rounds.last_rounds_data, window.show_top_round_ids);
// update title
this.setTitle({text:"Players/Drops Per Round"}, {text:"Real Time"});
// if master found, remove plotBand and disable master selection
if ( pb_master_chart )
{
// remove plotBand
pb_master_chart.xAxis[0].removePlotBand('mask-before');
pb_master_chart.xAxis[0].removePlotBand('mask-after');
pb_master_chart.xAxis[0].addPlotBand({
id: 'mask-before',
from: -1,
to: 99999,
color: 'rgba(0, 0, 0, 0.2)'
})
// disable selection
pb_master_chart.options.chart.events.selection.enabled = 'false';
pb_master_chart.options.chart.zoomType = null;
}
}
}
},

Answer 1

According to the docs, the shapes are defined in the Highcharts.Renderer.symbols collection. Inspecting this object reveals the following available shapes:
Highcharts.Renderer.prototype.symbols:
arc: function (a,b,c,d,e){var f=e.start,c=e.r||c||d,g=e.end-1.0E-6,d=e.innerR,h=e.open,i=W(f),j=Z(f),k=W(g),g=Z(g),e=e.end-f<Aa?0:1;return["M",a+c*i,b+c*j,"A",c,c,
circle: function (a,b,c,d){var e=0.166*c;return["M",a+c/2,b,"C",a+c+e,b,a+c+e,b+d,
diamond: function (a,b,c,d){return["M",a+c/2,b,"L",a+c,b+d/2,a+c/2,b+d,a,b+d/2,"Z"]}
exportIcon: function (a,b,c,d){return y(["M",a,b+c,"L",a+c,b+d,a+c,b+d*0.8,a,b+d*0.8,"Z","M",a+c*0.5,b+d*0.8,"L",a+c*0.8,b+d*0.4,a+c*0.4,b+d*0.4,a+c*0.4,b,a+c*0.6,b,a+c*0.6,b+d*0.4,a+c*0.2,b+d*0.4,"Z"])}
printIcon: function (a,b,c,d){return y(["M",a,b+d*0.7,"L",a+c,b+d*0.7,a+c,b+d*0.4,a,b+d*0.4,"Z","M",a+c*0.2,b+d*0.4,"L",a+c*0.2,b,a+c*0.8,b,a+c*0.8,b+d*0.4,"Z","M",a+c*0.2,b+d*0.7,"L",a,b+d,a+
square: function (a,b,c,d){return["M",a,b,"L",a+c,b,a+c,b+d,a,b+d,"Z"]}
triangle: function (a,b,c,d){return["M",a+c/2,b,"L",a+c,b+d,a,b+d,"Z"]}
triangle-down: function (a,b,c,d){return["M",a,b,"L",a+c,b,a+c/2,b+d,"Z"]}
You can also add your own symbol by extending the collection. For example, drawing a simple X:
$.extend(Highcharts.Renderer.prototype.symbols, {
anX: function (a,b,c,d){return["M",a,b,"L",a+c,b+d,"M",a+c,b,"L",a,b+d]}
});
Produces:
Fiddle here.

Answer 2

You have ability to set image as icon
http://jsfiddle.net/Udgb3/
symbol: 'url(http://highcharts.com/demo/gfx/sun.png)',
symbolX:5,
symbolY:0