finnc52
Posts: 2
Joined: Mon May 23, 2022 8:33 pm

Line Series Chart Keeps Snapping to End in React

Hi there,

I have a Highstock line chart setup with the following options in React.

For some reason, the end date of the series keeps snapping to the end point, rather than where I set it to. If I use just the min option, that works. But the max option seemingly breaks it.

Is there any option I can do that will absolutely force min and max values, regardless of if there's data on that point? I tried endOnTick, though that didn't work.

Thanks so much!

Code: Select all

options={{
            series: loadData,
            title: 'Load',
            credits: {
              enabled: false
            },
            chart: {
              alignTicks: false
            },
            legend: {
              enabled: false
            },
            yAxis: {
              title: 'Load',
              alignTicks: false
            },
            xAxis: {
                ordinal: false,
                alignTicks: false,
                title: 'Date',
                type: "datetime",
                labels: {
                    formatter: function() {
                        var format_days = moment.utc(this.value).format('MM/DD/YY');
                        var format_minutes = moment.utc(this.value).format('HH:mm');
                        if (moment.utc(this.value).format('HH:mm') == '00:00' || moment.utc(this.value).format('HH:mm') == '08:00') {
                          return format_days;
                        } else {
                          return format_minutes;
                        }
                    }
                },
                min: moment().utc().startOf('day').valueOf(),
                max: moment().utc().endOf('day').valueOf(),
            }
          }}
          
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Line Series Chart Keeps Snapping to End in React

Hi,

Thanks for the question!

It seems to me like you have everything setup correctly. Could you please try to reproduce this issue in an online code editor like JSFiddle?

Here's a demo with your config: https://jsfiddle.net/BlackLabel/bLgqt3xa/

From what I can see I believe that everything works as expected.

Best regards,
Jakub
Jakub
Highcharts Developer

Return to “Highcharts Stock”