Search code examples
javascripttypescripthighchartsbar-chart

highcharts bar chart disappearing when upgrading from 10.2.1 to 10.3.1

I am currently trying to upgrade highcharts to the latest version, but ran into trouble.

I have a bar chart with the following configuration:

{
            chart: {
                type: 'bar',
                height: 70,
                pointPadding: 0,
            },
            title: {
                text: null,
            },
            credits: {
                enabled: false,
            },
            xAxis: {
                type: 'datetime',
                visible: false,
            },
            yAxis: {
                type: 'datetime',
                min: startTime,
                max: endTime,
                visible: true,
                opposite: false,
                endOnTick: true,
                ordinal: false,
                minPadding: 0,
                maxPadding: 0,
                tickInterval: tickIntervalMs,
                minTickInterval: tickIntervalMs,
                reversedStacks: false,
                title: {
                    text: null,
                },
                labels: {
                    style: {
                        color: mfTheme.colorPalette.n500,
                    },
                    // This makes sure that the times are displayed in the correct timezone
                    formatter() {
                        return moment((this as any).value)
                            .tz(institutionTimezone)
                            .format('LT');
                    },
                },
            },
            time: {
                timezone: institutionTimezone,
                moment,
            },
            legend: {
                enabled: false,
            },
            tooltip: {
                borderWidth: 0,
                borderRadius: 24,
                backgroundColor: '#FFFFFF',
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    pointWidth: 50,
                    groupPadding: 0,
                    pointPadding: 0,
                    borderWidth: 0,
                },
            },
            series,
        }
}

and it renders perfectly fine up until version 10.2.1

bar graph on highcharts 10.2.1

When updating to Highcharts 10.3.1 however, the bar just dissappears, showing nothing. (no screenshot needed, it is just all white)

investigating the chart, it turns out, that all the elements are heigh and width 0.

I am running this with highcharts-react-official.

I went so far as to look into the PR changes in the update notes, but could not find a single PR that would give me any clues as to what is actually going wrong on the new version.

how can I make the chart reappear?

codesandbox reproducable:

https://codesandbox.io/p/sandbox/highcharts-react-demo-forked-s82pdf?file=%2Fdemo.jsx

Solution

  • The yAxis.min should be a number according to the API. I am not sure why this worked in previous versions; perhaps it was a typing gap that has since been fixed. The correct way of providing a minimal yAxis value would be, for example, a timestamp, just as you have in the case of yAxis.max.

    Demo: https://codesandbox.io/p/sandbox/highcharts-react-demo-forked-5623sy?file=%2Fdemo.jsx%3A31%2C1

    API Reference: https://api.highcharts.com/highcharts/yAxis.min