DoumiLo
Posts: 35
Joined: Wed Jan 20, 2021 2:09 pm

Tooltip date format broken after setExtremes

Hi,

I'm changing the date range of a stockChart graph like this:

Option 1

Code: Select all

chart1_1.xAxis[0].setExtremes(1582848000000, 1594425600000);

Option 2

Code: Select all

chart1_1.xAxis[0].setExtremes(1598140800000, 1616198400000);

Option 3

Code: Select all

chart1_1.xAxis[0].setExtremes(1616284800000, 1626480000000);

Option 4 (max should be today)

Code: Select all

chart1_1.xAxis[0].setExtremes(1626566400000, chart1_1.xAxis[0].getExtremes().max);


Works fine with the graph but the tooltip date format is broken for some Options. It looks like this:

Mercredi, Sept 15, 00:00-11:59

Where it should look like this:

15 septembre 2021

I was not able to reproduce the bug in a JSFiddle and strangely, on my local machine Option 3 and 4 are showing the bug, but on our development server, only Option 4 is showing the bug.

I really don't know where to look to fix this.

Thank you in advance for your help!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Tooltip date format broken after setExtremes

Hello DoumiLo,

Thanks for contacting us with your issue.

It is hard to tell what exactly might be the cause of the issue, but if the extremes is being updated correctly, then you should probably use tooltip.xDateFormat to specify tooltip's date format.
Demo: https://jsfiddle.net/BlackLabel/u1sr6nmj/
API reference: https://api.highcharts.com/highstock/to ... DateFormat,
https://api.highcharts.com/class-refere ... dateFormat

Best regards!
Mateusz Bernacik
Highcharts Developer
DoumiLo
Posts: 35
Joined: Wed Jan 20, 2021 2:09 pm

Re: Tooltip date format broken after setExtremes

Hello mateusz.b,

Thanks for your answer. I'm already using xDateFormat: '%d %B %Y'.
DoumiLo
Posts: 35
Joined: Wed Jan 20, 2021 2:09 pm

Re: Tooltip date format broken after setExtremes

Hello,

This is the parameters I'm using for my chart:

Code: Select all

chart1_1 = Highcharts.stockChart('evolutionCas', {
    chart: {
        type: 'column',
        events: {
            redraw: function(){
              console.log(this.xAxis[0].getExtremes());
            },
            load: function() {
                var extremes = this.xAxis[0].getExtremes();
                var maxX = extremes.max;
                var minX = extremes.min;
                this.xAxis[0].addPlotBand({
                    color: {
                        linearGradient: {
                            x1: 0,
                            y1: 1,
                            x2: 1,
                            y2: 1
                        },
                        stops: [
                            [0, 'rgba(255, 255, 255, 0.0)'],
                            [1, 'rgba(200, 200, 255, 0.8)']
                        ]
                    },
                    from: maxX - (1000 * 60 * 60 * 24 * 6.5),
                    to: maxX + (1000 * 60 * 60 * 24 * 2.5),
                    zIndex: 1000
                });
            }
        }
    },
    rangeSelector: {
        buttonTheme: {
            width: 120,
            style: {
                color: '#1C819a',
                fontWeight: 'bold'
            },
        },
        enabled: true,
        inputEnabled: true,
        inputDateFormat: '%e %b %Y',
        inputEditDateFormat: '%Y-%m-%e',
        allButtonsEnabled: true,
        buttons: [{
            type: 'month',
            count: 6,
            text: 'Jour',
            preserveDataGrouping: true,
            dataGrouping: {
                forced: true,
                groupAll: true,
                units: [
                    ['day', [1]]
                ],
                dateTimeLabelFormats: {
                    day: ["%e %B %Y"],

                }
            },
            events: {
              click: function () {
                // couleurs des séries avec doublement
                jQuery.each(doublement_jour1_1, function(index, value) {
                    chart1_1.options.series[0].data[value].color = '#003742';
                    chart1_1.options.series[1].data[value].color = '#005566';
                });

                jQuery('.highcharts-plot-band').show();
              }
            }
        }, {
            type: 'year',
            count: 1,
            text: 'Semaine',
            preserveDataGrouping: true,
            dataGrouping: {
                forced: true,
                groupAll: true,
                units: [
                    ['week', [1]]
                ],
                dateTimeLabelFormats: {
                    week: ["Semaine du %e %B %Y"],

                }
            },
            events: {
              click: function () {
                // couleurs des séries normales (enlever couleurs doublement)
                jQuery.each(doublement_jour1_1, function(index, value) {
                    chart1_1.options.series[0].data[value].color = '#6db5ce';
                    chart1_1.options.series[1].data[value].color = Highcharts.getOptions().colors[0];
                });
                jQuery('.highcharts-plot-band').show();
              }
            }
        }, {
            type: 'year',
            count: 1,
            text: 'Mois',
            preserveDataGrouping: true,
            dataGrouping: {
                forced: true,
                groupAll: true,
                units: [
                    ['month', [1]]
                ],
                dateTimeLabelFormats: {
                    week: ["%B %Y"],

                }
            },
            events: {
              click: function () {
                // couleurs des séries normales (enlever couleurs doublement)
                jQuery.each(doublement_jour1_1, function(index, value) {
                    chart1_1.options.series[0].data[value].color = '#6db5ce';
                    chart1_1.options.series[1].data[value].color = Highcharts.getOptions().colors[0];
                });
                jQuery('.highcharts-plot-band').show();
              }
            }
        }, {
            type: 'year',
            count: 1,
            text: 'Année',
            preserveDataGrouping: true,
            dataGrouping: {
                forced: true,
                groupAll: true,
                units: [
                    ['year', [1]]
                ],
                dateTimeLabelFormats: {
                    week: ["%B %Y"],

                }
            },
            events: {
              click: function () {
                // couleurs des séries normales (enlever couleurs doublement)
                jQuery.each(doublement_jour1_1, function(index, value) {
                    chart1_1.options.series[0].data[value].color = '#6db5ce';
                    chart1_1.options.series[1].data[value].color = Highcharts.getOptions().colors[0];
                });

                jQuery('.highcharts-plot-band').hide();
              }
            }
        }],


    },
    legend: {
        enabled: true
    },
    title: {
        text: ''
    },
    series: [{
            name: 'Serie 1',
            type: 'column',
            stacking: 'normal',
            dataGrouping: {
                type: 'column',
                approximation: 'high'
            },
            color: '#6db5ce',
            //index: 1,
            legendIndex: 0,
            showInNavigator: true
        }, {
            name: 'Serie 2',
            type: 'column',
            stacking: 'normal',
            dataGrouping: {
                type: 'column',
                approximation: 'high'
            },
            color: Highcharts.getOptions().colors[0],
            //index: 0,
            legendIndex: 1,
            showInNavigator: true
        },
        {
            yAxis: 1,
            name: 'Serie 3',
            type: 'line',
            dataGrouping: {
                approximation: 'high'
            },
            color: Highcharts.getOptions().colors[1],
            //index: 3,
            visible: true,
            legendIndex: 3,
            showInNavigator: true,
            tooltip: {
                pointFormatter: function() {
                    return this.series.name + ': ' + Highcharts.numberFormat(this.y, 0) + ' cas<br/>';
                },

            },
        }
    ],
    exporting: {
        buttons: {
            contextButton: {
                menuItems: ['viewFullscreen', 'printChart', 'separator', 'downloadPNG', "downloadJPEG", "downloadPDF", 'separator', "downloadCSV"]
            }
        },
        chartOptions: {
            title: {
                text: titreGraph('1-1'),
            },
            rangeSelector: {
                enabled: false,
            },
            chart:{
                 marginTop:'75'
            }
        },
        filename:'graph_1-1'

    },
    credits: {
        enabled: false
    },
    yAxis: [{
        title: {
            enabled: true,
            text: 'Nombre de sujets',
            style: {
                fontWeight: 'normal'
            }
        },
        opposite: false,
        min: 0,
        stackLabels: {
            enabled: false,
            style: {
                fontWeight: 'bold',

            }
        }
    },{
        title: {
            enabled: true,
            text: 'Nombre action',
            style: {
                fontWeight: 'normal'
            }
        },
        min: 0,
        opposite: true
    }],
    plotOptions: {
        column: {
            dataLabels: {
                enabled: false
            }
        }
    },
    tooltip: {
        shared: true,
        split: false,


        xDateFormat: '%d %B %Y',
        pointFormatter: function() {
            return this.series.name + ': ' + Highcharts.numberFormat(this.y, 0) + ' cas<br/>';
        },
        footerFormat: '<b>Total </b>: {point.total:,.0f} cas',


    },
    xAxis: {
        dateTimeLabelFormats: {
            day: '%e %B'
        },
        title: {
            text: 'Date de déclaration du cas'
        },


    },
    data: {
        csv: graph1,
        startRow: 34,
        itemDelimiter: ',',
        firstRowAsNames: false,
        seriesMapping: [{
            x: 0,
            y: 1,
            test: 1
        }, {
            x: 0,
            y: 2,
            test: 2
        }, {
            x: 0,
            y: 3,
        }],
        complete: function(options) {
          //console.log(options);
            jQuery.each(doublement_jour1_1, function(index, value) {
                options.series[0].data[value].color = '#003742';
                options.series[1].data[value].color = '#005566';
            });
        }
    }

});

//Option 1
chart1_1.xAxis[0].setExtremes(1582848000000, 1594425600000);

//Option 2
//chart1_1.xAxis[0].setExtremes(1598140800000, 1616198400000);

//Option 3
//chart1_1.xAxis[0].setExtremes(1616284800000, 1626480000000);

//Option 4
//chart1_1.xAxis[0].setExtremes(1626566400000, chart1_1.xAxis[0].getExtremes().max);
DoumiLo
Posts: 35
Joined: Wed Jan 20, 2021 2:09 pm

Re: Tooltip date format broken after setExtremes

Hello,

I found the solution. It's a bug with highcharts version 9.2.2.
I have rollback to version 9.1.2 and everything works fine...
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Tooltip date format broken after setExtremes

Hi DoumiLo,

Thanks a lot for sharing that information. It doesn't sound good, I will take a closer look at that issue and if it is a regression an appropriate ticket will be created. I will let you know once I have more information about this.

Thanks again.
Best regards!
Mateusz Bernacik
Highcharts Developer
DoumiLo
Posts: 35
Joined: Wed Jan 20, 2021 2:09 pm

Re: Tooltip date format broken after setExtremes

Thanks a lot!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Tooltip date format broken after setExtremes

Hello DoumiLo,

Recently new 9.3.1 version came out with some real improvements and I wonder if you had a chance to try if and mentioned issue still occurs? Could you give me some info on that case? If the problem is still occurs could you try to create a demo with that issue?

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”