leite.g
Posts: 8
Joined: Wed Jun 21, 2023 8:47 am

Hovering will not work when hovering over label

Tue Jul 25, 2023 3:34 pm

Hi There,

For my custom use, I needed to add a property 'icon' to the 'point' object in order to show birthdays with a gif as a dataLabels.
With the attached jsfiddle, it seems to work fine, however using the exactly the same 'dataLabels' code , I loose the hovering feature when hovering just over the image.

Any tips on what I could be doing wrong here? Is there any oher Highcharts feature that could in conflict?

Many thanks!

Code: Select all

Highcharts.ganttChart('container', {

    title: {
        text: 'Highcharts Gantt Chart'
    },

    subtitle: {
        text: 'With custom symbols in data labels'
    },

    xAxis: {
        minPadding: 0.05,
        maxPadding: 0.05
    },

    yAxis: {
        categories: ['Prototyping', 'Development', 'Testing']
    },

    tooltip: {
        outside: true
    },

    accessibility: {
        point: {
            valueDescriptionFormat: '{point.yCategory}, assigned to {point.assignee} from {point.x:%Y-%m-%d} to {point.x2:%Y-%m-%d}.'
        }
    },

    lang: {
        accessibility: {
            axis: {
                xAxisDescriptionPlural: 'The chart has a two-part X axis showing time in both week numbers and days.'
            }
        }
    },

    series: [{
        name: 'Project 1',
        data: [{
            start: Date.UTC(2018, 11, 1),
            end: Date.UTC(2018, 11, 2),
            y: 0,
            assignee: 'bre1470'
        }, {
            start: Date.UTC(2018, 11, 2),
            end: Date.UTC(2018, 11, 5),
            y: 1,
            assignee: 'oysteinmoseng',
            fontSymbol: 'exclamation',
            accessibility: {
                description: 'Exclamation symbol.'
            }
        }, {
            start: Date.UTC(2018, 11, 8),
            end: Date.UTC(2018, 11, 9),
            y: 2,
            assignee: 'birthday-cake_1f382'
        }, {
            start: Date.UTC(2018, 11, 9),
            end: Date.UTC(2018, 11, 19),
            y: 1,
            assignee: 'bre1470'
        }, {
            start: Date.UTC(2018, 11, 10),
            end: Date.UTC(2018, 11, 23),
            y: 2,
            icon: 'https://em-content.zobj.net/source/microsoft-teams/363/birthday-cake_1f382.png',
            fontSymbol: 'smile-o',
            accessibility: {
                description: 'Smiling face symbol.'
            }
        }],
        dataLabels: [{
            enabled: true,
            format: '<div style="width: 20px; height: 20px; overflow: hidden; border-radius: 50%; margin-left: -25px">' +
                '<img src="{point.icon}" ' +
                'style="width: 30px; margin-left: -5px; margin-top: -2px"></div>',
            useHTML: true,
            align: 'left'
        }, {
            enabled: true,
            format: '<i class="fa fa-{point.fontSymbol}" style="font-size: 1.5em"></i>',
            useHTML: true,
            align: 'right'
        }]
    }]
});

jedrzej.r
Posts: 537
Joined: Tue Jan 24, 2023 11:21 am

Re: Hovering will not work when hovering over label

Tue Jul 25, 2023 4:15 pm

Hi!

Thanks for reaching out to us with your inquiry!

I'm not sure if I understood correctly, but after copying your code the highlighting feature seems to works just fine, even after hovering on image. Could you please elaborate a bit more about this issue, so that I can reproduce it and find a solution to your problem?

I'm waiting for your reply!
Best regards!
Jędrzej Ruta
Highcharts Developer

leite.g
Posts: 8
Joined: Wed Jun 21, 2023 8:47 am

Re: Hovering will not work when hovering over label

Fri Jul 28, 2023 8:46 am

Hey there,

Yes. As I mentioned, the code that I posted works just fine. I lose the feature when I use pretty much the same code in my integration.
My question goes more along with whether or not this functionality could be conflicting with another feature that may not be documented.

The only difference between the code posted and the actual use is the CSS and therefore, a div class. Could it be a problem, for instance?

BR,

Glauber

jedrzej.r
Posts: 537
Joined: Tue Jan 24, 2023 11:21 am

Re: Hovering will not work when hovering over label

Fri Jul 28, 2023 1:14 pm

Hi!

Perhaps it might be the reason. Unfortunately, I can't tell more without looking at your implementation, since there are too many variables that can interfere with this functionality. If you could share your code in an online editor, than it would be easier for me to reproduce this issue and provide a solution to your problem. You can start by editing this fiddle: https://jsfiddle.net/iVestBl/k7L21ruj/

I'm waiting for your reply.
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Gantt”