I am using angular highcharts and I want to be able to select single stacked bar chart.
I want to be able to select single stacked bar or disable hover.
I am not sure if this was possible, but I found custom code which individually selects bars for each category. But I want to remove hover effects of the chart since hover effects are shared for each series. https://jsfiddle.net/wvnpd4ze/ I am not able to remove the hover for it.
data = [{
hName: "hh1",
eaCount: 5,
neaCount: 12,
peaCount: 6,
allAccCount: 23
},
{
hName: "hh2",
eaCount: 6,
neaCount: 6,
peaCount: 4,
allAccCount: 14
},
{
hName: "hh3",
eaCount: 15,
neaCount: 9,
peaCount: 6,
allAccCount: 30
},
{
hName: "hh4",
eaCount: 20,
neaCount: 12,
peaCount: 8,
allAccCount: 40
},
{
hName: "hh5",
eaCount: 25,
neaCount: 15,
peaCount: 10,
allAccCount: 50
},
{
hName: "hh6",
eaCount: 30,
neaCount: 18,
peaCount: 12,
allAccCount: 60
},
{
hName: "hh7",
eaCount: 35,
neaCount: 21,
peaCount: 14,
allAccCount: 70
},
{
hName: "hh8",
eaCount: 40,
neaCount: 24,
peaCount: 16,
allAccCount: 80
},
{
hName: "hh9",
eaCount: 45,
neaCount: 27,
peaCount: 18,
allAccCount: 90
},
{
hName: "hh10",
eaCount: 50,
neaCount: 30,
peaCount: 20,
allAccCount: 100
},
{
hName: "hh11",
eaCount: 55,
neaCount: 33,
peaCount: 22,
allAccCount: 110
},
{
hName: "hh12",
eaCount: 60,
neaCount: 36,
peaCount: 24,
allAccCount: 120
},
{
hName: "hh13",
eaCount: 65,
neaCount: 39,
peaCount: 26,
allAccCount: 130
},
{
hName: "hh14",
eaCount: 70,
neaCount: 42,
peaCount: 28,
allAccCount: 140
},
{
hName: "hh15",
eaCount: 75,
neaCount: 45,
peaCount: 30,
allAccCount: 150
},
{
hName: "hh16",
eaCount: 80,
neaCount: 48,
peaCount: 32,
allAccCount: 160
},
{
hName: "hh17",
eaCount: 85,
neaCount: 51,
peaCount: 34,
allAccCount: 170
},
{
hName: "hh18",
eaCount: 90,
neaCount: 54,
peaCount: 36,
allAccCount: 180
},
{
hName: "hh19",
eaCount: 95,
neaCount: 57,
peaCount: 38,
allAccCount: 190
},
{
hName: "hh20",
eaCount: 100,
neaCount: 60,
peaCount: 40,
allAccCount: 200
}
];
Highcharts.chart('container', {
chart: {
type: 'bar',
scrollablePlotArea: {
minHeight: 800,
opacity: 0.97
},
marginRight: 25
},
title: {
text: ''
},
xAxis: {
categories: data.map(detail => detail.hName),
title: {
text: 'hh'
}
},
credits: {
enabled: false
},
yAxis: {
min: 0,
tickInterval: 50,
title: {
text: 'Number of Acc',
},
labels: {
overflow: 'justify'
}
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
},
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
},
stacking: 'normal',
pointPadding: 0,
groupPadding: 0.2,
pointWidth: 30,
padding: 5,
point: {
events: {
click: function () {
var clickedPoint = this,
chart = clickedPoint.series.chart;
chart.series.forEach(function (s) {
s.points.forEach(function (p) {
if (p.x == clickedPoint.x) {
p.select(null, true);
}
});
});
}
},
states: {
select: {
enabled: false
}
}
},
},
bar: {
dataLabels: {
enabled: true
},
states: {
select: {
enabled: false
}
}
},
},
series: [
{
name: 'Partial',
data: data.map(detail => detail.peaCount),
color: '#523594',
states: {
hover: {
enabled: false
}
}
},
{
name: 'Not',
data: data.map(detail => detail.neaCount),
color: '#A11D2A',
states: {
hover: {
enabled: false
}
}
},
{
name: 'En',
data: data.map(detail => detail.eaCount),
color: '#869338',
states: {
hover: {
enabled: false
}
}
},
]
});
I tried disabling hover in multiple places, but its still showing.
To disable hover you need to set states.hover.enabled option to false and set states.inactive.opacity option to 1.
API references: https://api.highcharts.com/highcharts/plotOptions.series.states.hover.enabled
Demo: https://jsfiddle.net/BlackLabel/ucg23v08/
plotOptions: {
series: {
stacking: 'normal',
states: {
hover: {
enabled: false
},
inactive: {
opacity: 1
}
}
}
},