Highcharts redimensiona el tamaño del gráfico usando el botón de exportación personalizado y reemplaza el botón expandir y contraer dinámicamente - jquery, highcharts

Estoy trabajando en la funcionalidad de cambio de tamaño de Highcharts. Para eso estoy usando dos botones personalizados con la imagen uno se expande y el segundo se colapsa.

exporting: {
buttons: {
customButton: {
symbol: "url(http://localhost/abc/expand.png)",
symbolX: 20,
symbolY: 20,
onclick: function() {
$("#container2").hide();
$("#container3").hide();
$("#container4").hide();
chart.setSize(1250, 500);
}
},
anotherButton: {
symbol: "url(http://localhost/widget/collapse.png)",
symbolX: 20,
symbolY: 20,
onclick: function() {
$("#container2").show();
$("#container3").show();
$("#container4").show();
chart.setSize(607, 300);
}
}
}
}
onclick = "function();" > Fill < /a>

Estoy buscando usar un solo botón en lugar deusando dos botones separados y después de expandir el botón obtener reemplazar con el botón contraer. En el botón Expandir, haga clic en Reemplazar el botón Expandir para contraer, pero al hacer clic en el botón Contraer, debo llamar a la funcionalidad de colapso que no funciona.

Respuestas

Puedes probar algo como esto.

exporting: {
buttons: {
customButton: {
symbol: "url(http://localhost/abc/expand.png)",
text:"customButton",
symbolX: 20,
symbolY: 20,
onclick: function(e) {
if($(e.currentTarget).find("image").attr("href") == "http://localhost/abc/expand.png"){
$("#container2").hide();
$("#container3").hide();
$("#container4").hide();
chart.setSize(1250, 500);
$(e.currentTarget).find("image").attr("href","http://localhost/widget/collapse.png")
}
else{
$("#container2").show();
$("#container3").show();
$("#container4").show();
chart.setSize(607, 300);
$(e.currentTarget).find("image").attr("href","http://localhost/abc/expand.png")
}
}
}
}
}