angularchartshighchartsangular-highcharts

Angular highchart Bar chart disable hover


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.


Solution

  • 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
        }
      }
    }
    

    },