悬停时的高图更改dataLabel的字体大小

Question

I have a pie highchart and what i want is to change dataLabels font size when i hover over the specific part of the pie.

I found that the hover event is established like this:

plotOptions: {

            series: {
                shadow: {
                color: '#000',
                offsetX : 5,
                offsetY : 5,
                opacity : 0.5
                },
                events: {
                    mouseOver: function(event) {

                    },
                    mouseOut: function(event) {

                    }
                }

            }

but i dont know how to access dataLabel from inside the mouseOver/Out.

Answer 1

You can reach the dataLabel via this.dataLabel within the point events for the series :

series: {
    point: {
        events: {
            mouseOver: function (e) {
                this.dataLabel.css({
                    fontSize: "30px",
                });
            },
            mouseOut: function (e) {
                this.dataLabel.css({
                    fontSize: "12px",
                });
            }
        }
    }
}

Demo

Answer 2

Is the dataLabel you are referring to in HTML? If you want to access dataLabel you can do this in JavaScript like this (assuming the HTML element is an id):

document.getElementById("dataLabel").setAttribute("style", "font-size: 20px");

This would set dataLabel's font size to 20px. You can put this inside the mouse event function you desire.