Hi guys I've been working on the highcharts and I got stuck in a logic where I can't find a way. If anyone can help me it will be very helpful.
HTML
<highcharts-chart
id="container"
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 400px; display: block;"
>
</highcharts-chart>
TS FILE
chartoptions:Highchart.options
chartOneRender() {
this.chartoptions = {
title : {
text: "Chsart1",
},
exporting : {
sourceWidth: 1500,
sourceHeight: 300,
scale: 1,
enabled: true,
buttons: {
contextButton: {
menuItems: ["viewFullscreen", "downloadCSV", "downloadPNG", "downloadPDF"],
theme: {
stroke: '#adaaaa00',
fill: '#adaaaa00',
},
y: 10,
x: 0,
},
custom: this.buttonClicker(optionchart)
}
},
series : [
{
name: "s1",
type: 'column',
data: [20,30,40,50]
visible: true,
}, {
name: "s2",
type: 'column',
data: [90,98,76,54],
visible: false,
}, {
name: "s3",
type: 'column',
data: [67,78,89,54],
visible: false,
},
{
name: "s4",
type: 'column',
data: [89,78,65,45],
visible: false,
},
{
name: "s5",
type: 'column',
data: [78,56,90,98],
visible: false,
}
],
}
}
buttonClicker(chartOptions: any) {
var button = {
y: 10,
x: -630,
text: 'Select All',
theme: {
stroke: '#000',
states: {
hover: {
stroke: '#298AFC',
fill: '#fff'
},
select: {
stroke: '#298AFC',
fill: '#fff'
}
}
},
onclick: () => {
this.chartOptions.series.update({
visible:true
})
this.chartOneRender()
}
return button
}
In the above there is a function called buttonClicker() I want to select all the legends while clicking the button. If anyone knows any solution help me in this please.
In your code this.chartOptions.series refers to all series in the chart. You need to iterate on all series and update() each of them separately.
Simplified demo: https://jsfiddle.net/BlackLabel/oL45egh8/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#update