We Keep Coding

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

ChartJS doughnut legend click

I have a problem with custom onClick function on doughnut chart.
The only thing I need is to override default legend onClick function calling the original one + my custom code.
Following their official documentation and this suggestion on github page I wrote this js
var defaultLegendClickHandler = Chart.defaults.doughnut.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
console.log(legendItem);
defaultLegendClickHandler.call(this, e, legendItem);
};
Then I associate it to the onClick option (JSfiddle here) but it is not working. It seems that the legendItem variable is always an empty array so the default click function does nothing.

Your JSfiddle looks fine except that the newLegendClickHandler is defined at the wrong place inside options. You should define it inside legend as follows.
legend: {
position: 'top',
onClick: newLegendClickHandler
},
Please also check Custom On Click Actions from Chart.js
documentation

The click handler was set to the chart itself and not the legend. Move the new onClick handler inside of the legend options.
var options = {
cutoutPercentage: 20,
responsive: true,
legend: {
position: 'top',
onClick: newLegendClickHandler,
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
};

Chart js tooltip position above chart

Is there a way of positioning the tooltip on top of the chart, so when i'm showing it on mobile my tooltips won't overlap the chart so easily.
I'm using vue charts.
Thanks in advance.

Well i had a similiar issue.
I use vue. After importing for Example Bar as your Chart, you can create your custom postitioning like in the Doc of chartjs:
<script>
import { Bar } from "vue-chartjs";
Chart.Tooltip.positioners.custom = function(elements, eventPosition) { //<-- custom is now the new option for the tooltip position
/** #type {Chart.Tooltip} */
var tooltip = this;
/* ... */
return {
x: eventPosition.x,
y: eventPosition.y
};
}
This for example sets the positioning of the tooltip to the event(mouse) position.
Don't forget to set your custom function into your options when rendering your chart:
export default {
extends: Bar, ...
.
.
.
this.renderChart(
{ labels: this.labels, datasets: this.datasets },
{ ...
tooltips: {
position : 'custom', //<-- important same name as your function above
callbacks: {
label: function(tooltipItem, data) {
var label = Math.floor(tooltipItem.yLabel*100)/100+" "+data.datasets[tooltipItem.datasetIndex].label;
return label;
}
}
}

You could define a custom positioning map.
http://www.chartjs.org/docs/latest/configuration/tooltip.html#position-modes

Title to the graph when saved as image in Echarts

I want to give title to the graph image which we get when we save the graph as image in Echarts. Echarts does not have option for the same. So, is there any way that we can achieve our requirement.
Attaching a link for your reference from echarts. Which provide the option for saveAsImage
https://ecomfe.github.io/echarts-doc/public/en/option.html#toolbox.feature.saveAsImage
As attaching a link of echarts example which has save image icon on the right top corner
https://ecomfe.github.io/echarts-examples/public/editor.html?c=area-rainfall
I also want to position the hover tooltip which we get on hover of the save image icon. they have some default options. But, I have to increase the space more.
I really thank the guys who can come up with the solution for the above requirement.

By default, the name of the image is the chart title.
You can set the title by using:
option: {
title: {
text: 'myTitle'
}
}
To provide a custom name, you can use the saveAsImage.name function:
option: {
toolbox: {
feature: {
saveAsImage: {
name: 'myImageName'
}
}
}
}
Bonus: To increase the space between the icons, you can set toolbox.itemGap, and maybe get the result you want:
option: {
toolbox: {
itemGap: 20,
bottom: 20,
...
}
}
Or customize the icons itself through toolbox.iconStyle. For example, by setting a transparent border:
option: {
toolbox: {
iconStyle: {
borderWidth: 10,
borderColor: rgba(0, 0, 0, 0),
...
}
}
}
Toolbox documentation

option: {
toolbox: {
feature: {
saveAsImage: {
title: 'Save',
}
}
}
}

Filtering legend of a Highcharts by only visible series only in Export

I have an highchart and I create an export generated picture with the export function.
How can I make is so that the legend of the hidden series are not shown at all (I donøt want them greyed out) in the export?
I've tried this but it hides only the text, the symbol is still there.
exporting: { //the export button
type: 'image/jpeg',
chartOptions: {
legend: {
enabled: true,
itemHiddenStyle: {
display: 'none',
}
}
}
},...
I have also seen this answer: Filtering legend of a Highcharts by only visible series
but I need it done ONLY in export. That will remove it from the screen too.

In your case you will have empty item, better is using load event and destroy series which are not visible.
exporting: { //the export button
type: 'image/jpeg',
chartOptions: {
chart: {
events: {
load: function () {
var chart = this;
$.each(chart.series,function(i,serie) {
if(!serie.visible) {
serie.update({
showInLegend:false
});
}
});
}
}
}
}
},
See the example: http://jsfiddle.net/DMJf5/3/