I need two things to be done I have tried every way to my knowledge. Don't mistake me if I am asking small questions. I just wanna know
below is my custom button in highcharts
MY COMPONENT.TS FILE
textData = 0; //declared outside the function
chartGenerate(){
chart:{......},
yAxis:{.....},
xAxis:{....},
series:[....],
exporting: {
buttons: {
contextButton: {
menuItems: [.......]
},
change:{
symbol:'triangle',
onclick: function () {
this.textData += 1
},
},
gotit:{
text:this.textData
},
},
}
FIRST THING
How to change the text in gotit when clicking change button
SECOND THING
How to rotate the symbol to 180deg
You can use the arrow function to refer to the context of this some properties above.
counter = 0;
constructor() {
this.chartOptions = {
exporting: {
buttons: {
change: {
symbol: 'triangle',
onclick: () => {
this.counter += 1;
console.log('change btn, counter:',this.counter)
}
},
gotit: {
text: `${this.counter}`,
}
}
},
};
}
Next, your change has to be passed somewhere, notice when you click it you have to update it via chartRef i.e. referring to the chart reference.
updateChart(): void {
this.chartRef.title.update({
text: 'Title was updated',
});
this.chartRef.exporting.update({
buttons: {
gotit: {
text: `${this.counter}`,
}
}
});
}
In official wrapper docs you will find how to load exporting module in Highcharts in Angular.
Check this docs options for the export button.
Demo: https://stackblitz.com/edit/highcharts-angular-basic-line-gh8gsg
EDIT -----
To change the symbol rotation, the best option will be implement symbol as custom shape with rotation
Highcharts.SVGRenderer.prototype.symbols.download = function(x, y, w, h) {
var path = [
// Arrow stem
'M', x + w * 0.5, y,
'L', x + w * 0.5, y + h * 0.7,
// Arrow head
'M', x + w * 0.3, y + h * 0.5,
'L', x + w * 0.5, y + h * 0.7,
'L', x + w * 0.7, y + h * 0.5,
];
return path;
};
Highcharts.chart('container', {
exporting: {
buttons: {
contextButton: {
symbol: 'download'
}
}
}
});
API: https://api.highcharts.com/highcharts/exporting.buttons.contextButton.symbol