CODEWITHSUNDEEP
javascripthighcharts
Manos Serifios
Manos Serifios

Reputation: 577

HighCharts on hover change dataLabel's font size

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.

Upvotes: 2

Views: 2630

Answers (2)

emerson.marini
emerson.marini

Reputation: 9348

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

Upvotes: 5

Ben Adamsky
Ben Adamsky

Reputation: 96

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.

Upvotes: 0

Related Questions