After upgrading the Chart version, it is not as good as how to apply the legendItem Click event defined in HighChartsJson to the latest version of Chart. Please provide guidance.
The code previously written in HighChartsJson is as follows:plotOptions: {
series: {
events: { legendItemClick: function(e) {
var index = this.index;
var series = this.chart.series;
if (series[index].visible) {
for (var i = 0; i < series.length; i++) {
var s = series[i];
i === index ? s.show() : s.hide(); }
} else{
s.show();} }
return false; }}}}
In the latest version of Highcharts, the way to apply the legendItemClick event has changed slightly. You now need to define the event within the legend property of plotOptions. Here's how you can modify your previous code to work with the latest version of Highcharts:
plotOptions: {
legend: {
itemClick: function(e) {
i === index ? s.show() : s.hide();
}
} else {
s.show();
return false;
In this updated code, the legendItemClick event has been replaced with the itemClick event, which is now defined within the legend property of plotOptions.series. This should allow you to achieve the same functionality as before with the latest version of Highcharts.
Hello, thank you very much for your reply.
I modified the Java Script code in the Initialized method of ColumnChart according to your method, but it still doesn't work.
Could you please help me check where the problem lies again?
Hello He,
I don't know if you managed to make it work.
If not, I can show you what I made to work between Charts 3.1.0 and 3.2.0 (or over, due to the breaking changes present on the Release Notes):
Outsystems Charts 3.1.0:
Unformatted code:const chartTooltip = { plotOptions: { series: { events: { legendItemClick: function(e) { var index = this.index; var series = this.chart.series; if (series[index].visible) { for (var i = 0; i < series.length; i++) { var s = series[i]; i === index ? s.show() : s.hide(); } } else{ for (var i = 0; i < series.length; i++) { var s = series[i]; s.show(); } } return false; } } } } } OutSystems.ChartAPI.ChartManager.GetChartById($parameters.ChartWidgetId).customizeChartObject(chartTooltip);
Outsystems Charts 3.2.0 or higher:
Unformatted code:
const chartTooltip = { 'plotOptions': { 'series': { 'events': { 'legendItemClick': function(e) { var index = this.index; var series = this.chart.series; if (series[index].visible) { for (var i = 0; i < series.length; i++) { var s = series[i]; i === index ? s.show() : s.hide(); } } else{ for (var i = 0; i < series.length; i++) { var s = series[i]; s.show(); } } return false; } } } } } OutSystems.ChartAPI.Chart.GetById($parameters.ChartWidgetId).provider.update(chartTooltip, true, true);
As you can see the only difference is the last line, which changed in 3.2.0.
Hope this helps.
Best regards,