We Keep Coding

apexcharts with vue - pie chart seriesIndex and dataPointIndex are -1 for click

I'm using Vue apexcharts and whenever I click on a Pie chart I have this:
options: {
chart: {
events: {
click:
(event: any, chartContext: any, config: any) => {
console.log('Clicked', chartContext);
console.log('Event', event);
console.log('Config', config);
}
},
},
In the console, config.seriesIndex and config.dataPointIndex are always -1 - How do I get the value of the pie slice I clicked on? Index/label/whatever??

To get a reference to a pie slice clicked on you'll want to use the dataPointSelection function instead. This allows you to get the config.seriesIndex and config.dataPointIndex in the way which you've tried.
options: {
chart: {
events: {
dataPointSelection:
(event, chartContext, config) => {
console.log('seriesIndex', config.seriesIndex);
console.log('dataPointIndex', config.dataPointIndex);
}
},
},
},
The click function fires when a user clicks anywhere on the chart and is not intended to be used to extract data about user interaction with specific data points.

Highcharts JS: barchart select the only selected bar without the rest in series

I want to inactive and set the gray color in all the rest of the unselected bars in the bar chart of highcharts JS, but the problem here is when I select a bar in the first serie for example, all the rest connected bars are selected on the rest of series, I want to select only the selected bar in the selected serie, and inactive all the rest of bars.
picture of the problem :
what I want to do :
the code in JSfiddle

You should be able to achieve it by using the mouseOver & mouseOut callbacks and by updating the other points.
The important thing - we need to set the redraw flag as false in the point.update config to avoid the many redraws in the loops but trigger it only once.
Demo: https://jsfiddle.net/BlackLabel/yd9ex6v2/
plotOptions: {
series: {
states: {
inactive: {
opacity: 1
}
},
point: {
events: {
mouseOver() {
const chart = this.series.chart;
chart.series.forEach(s => {
s.points.forEach(p => {
if (p.id !== this.id) {
p.update({
color: 'grey'
}, false, false)
}
})
});
chart.redraw();
},
mouseOut() {
const chart = this.series.chart;
chart.series.forEach(s => {
s.points.forEach(p => {
p.update({
color: s.color
}, false, false)
})
});
chart.redraw();
}
}
}
}
},
API: https://api.highcharts.com/highcharts/plotOptions.series.point.events.mouseOut
API: https://api.highcharts.com/class-reference/Highcharts.Point#update

Rename legend on export in highchart

I know highcharts makes it possible to update a legend by using the following function:
chart.legend.allItems[0].update({name:'aaa'});
Also the possibility to hide or show the legends on export are working.
exporting:{
chartOptions:{
legend:{
enabled:true
}
}
}
But now, I like to rename a specific legend during export. Is there any way to bind the update code to the export-function in Highcharts?

Update series in the chart.events.load event, for example:
exporting: {
chartOptions: {
chart: {
events: {
load: function (e) {
this.series[0].update({ name: "New name." });
}
}
}
}
}

Angular HighChart in tabs width

Okay so i have the following highChart tag:
<highchart id="chart1" config="chartConfig" ></highchart>
Now in my system i have several tabs. it happens to be that the high chart is not under the first tab.
Now when i press the tab that contains the chart, the chart looks abit odd:
(You can't tell from this picture but it is only using like 30% of the total width)
But change the browser size and then changing it back to normal the chart places it self correctly inside the element (this also happens if i just open the console while i am inside the tab):
I am guessing that it has something to do with the width of the element once it has been created (maybe because it is within another tab) but i am unsure how to fix this.
I attempted to put a style on the element containg the highchart so that it would look something like this: <highchart id="chart1" config="chartConfig style="width: 100%"></highchart>
However this resulted in the chart running out of the frame.
My chart config
$scope.chartConfig = {
};
$scope.$watchGroup(['login_data'], function(newValues, oldValues) {
// newValues[0] --> $scope.line
// newValues[1] --> $scope.bar
if(newValues !== oldValues) {
$scope.chartConfig = {
options: {
chart: {
type: 'areaspline'
}
},
series: [{
data: $scope.login_data,
type: 'line',
name: 'Aktivitet'
}],
xAxis: {
categories: $scope.login_ticks
},
title: {
text: ''
},
loading: false
}
}
});

Can you try one of the following in your controller? (or perhaps both!)
$timeout(function() {
$scope.chartConfig.redraw();
});
$timeout(function() {
$scope.chartConfig.setSize();
});

Calling the reflow method solved my similar issue on showing chart in a modal. Hope this will help others :D
Add this to your controller after $scope.chartConfig:
$scope.reflow = function () {
$scope.$broadcast('highchartsng.reflow');
};

Highcharts pie chart list of selected section

I have enabled my pie chart to have multiple sections selected. (Not yet got it working as I want it though). Open SO questions here
But once I get this done, I would like to return the list of selected sections everytime a change in made in any selection.
Can someone please suggest. !!
My COde:
series: [{
name: 'Departments',
// allowPointSelect : true,
slicedOffset: 0,
states: {
select: {
color: 'red'
}
},
point: {
events: {
click: function(event){
//this.slice(null);
this.select(null, true);
filterCharts(cloneDonutData.Departments, dChart.series[0].name,this.name);
//console.log(this.series[0].chart.getSelectedPoints());
}
}
} ,
data: ....
]

USe: http://api.highcharts.com/highcharts#Chart.getSelectedPoints
getSelectedPoints () Since 1.2.0
Returns an array of all currently selected points in the chart. Points can be selected either programmatically by the point.select() method or by clicking.