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

Is there a pie chart slice hover event in Highcharts?

I just started using Highcharts and I need to capture an event when the user hovers over a slice of the pie and also to get contextual information about that slice. Is there an event for that? I haven't been able to find one in the documentation.

plotOptions.series allows events.mouseOver and events.mouseOut handlers to be added, a la:
$('#container').highcharts({
...
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
$reporting.html('x: ' + this.x + ', y: ' + this.y);
}
}
},
events: {
mouseOut: function () {
$reporting.empty();
}
}
}
},
...
});
Demo

Highcharts - Hide subtitle on exporting

I have a chart with time series and zoom. It will be better if the subtitle ("Click and drag in the plot area to zoom in") which is certainly very usefull in order to understand how to zoom don't appears when the chart is exported to pdf or image.
So I wonder if there is a way to hide it.

Here is a example on how to do what you are asking. The part does the subtitle manipulation is:
exporting: {
buttons: {
exportButton: {
menuItems: null,
onclick: function() {
chart.exportChart(null, {subtitle: {text:''}});
}
},
printButton: {
onclick: function() {
chart.setTitle(null, { text: ' ' });
chart.print();
chart.setTitle(null, { text: 'Click and drag in the plot area to zoom in' });
}
}
}
},
EDIT:
Sedondary option
You could remove the Highcharts generated print and export buttons. Then create your own print and export buttons along with a drop down for selecting the export type. Then if the export button is clicked, check the type and export as the type and without the sub title. Here is an example. Here is the code that handles the export and print button clicks:
$('#buttonExport').click(function() {
var e = document.getElementById("ExportOption");
var ExportAs = e.options[e.selectedIndex].value;
if(ExportAs == 'PNG')
{
chart.exportChart({type: 'image/png', filename: 'my-png'}, {subtitle: {text:''}});
}
if(ExportAs == 'JPEG')
{
chart.exportChart({type: 'image/jpeg', filename: 'my-jpg'}, {subtitle: {text:''}});
}
if(ExportAs == 'PDF')
{
chart.exportChart({type: 'application/pdf', filename: 'my-pdf'}, {subtitle: {text:''}});
}
if(ExportAs == 'SVG')
{
chart.exportChart({type: 'image/svg+xml', filename: 'my-svg'}, {subtitle: {text:''}});
}
});
$('#buttonPrint').click(function() {
chart.setTitle(null, { text: ' ' });
chart.print();
chart.setTitle(null, { text: 'Click and drag in the plot area to zoom in' });
});

I did another example keeping the subtitle if anyone have translations on their pages and want to print the chart. Just simply add a variable on the #Linger answer:
var subtitle = this.options.subtitle.text;
chart.setTitle(null, { text: ' ' });
chart.print();
chart.setTitle(null, { text: subtitle });
Example code here:
http://jsfiddle.net/pb6tbx7u/

Changing Jquery key binding for Modal Dialog

I have a modal dialog. I need to close the dialog on a different key combination than the Easape key. How can I do that.
I have the following code, but that never is executed. Any clues why ?
var agreeDialog = $j('#termsOfAgreementConfirm').dialog({
modal: true,
autoOpen:false,
resizable:false,
width : 1000,
height :400,
stack:false,
title:"Terms of Usage",
open: function(event, ui) { $j('.ui-dialog-titlebar-close').hide(); },
buttons: {
Disagree: function() {
disagree.dialog('open');
disagree.dialog('moveToTop');
},
Agree: function() {
$j(this).dialog('close');
$j.cookie("agree","Y");
new Ajax.Request('/test/user/ajaxUpdateAgreementForUser',
{
onSuccess:function(resp){
},
onError: function(resp) {
alert("Error:" + resp.toJSON());
return;
},
asynchronous:true,
evalScripts:true
});
$j(this).dialog('close');
}
}
});
if (result == "false" && $j.cookie("agree")== null) {
agreeDialog.dialog('open')
agreeDialog.keyup(function e() {
alert(e.keyCode);
});
}

You will need to catch the key events on the body and then trigger the close event. See this exmaple. Pressing any key will close the dialog box. You have to do it outside your declaration.
http://jsfiddle.net/yu8Sg/
$('body').keyup( function(e) {
$('#dialog').dialog('close');
});