Vladand
Posts: 1
Joined: Wed Oct 06, 2021 6:37 am

Xrange scroll perfomance

Hello
I have an xrange chart with a big data array. The config is below:

Code: Select all

 Options = {
    chart: {
      resetZoomButton: {
        theme: {
          display: 'none',
        },
      },
      spacing: [0, 0, 0, -15],
      animation: true,
      type: 'xrange',
      zoomType: 'x',
      panning: {
        enabled: true,
        type: 'x',
      },
      panKey: 'shift',
      events: {
        selection(this: Highcharts.Chart) {
          const chart = this;

          chart.xAxis.forEach((axis) => {
            axis.update({
              minRange: 3600 * 1000,
            });
          });
          return true;
        },
      },
    },
    series: [
      {
        type: 'xrange',
        data: dataSeries as any,
        dataLabels: {
          enabled: true,
          inside: true,
          y: -18,
          className: 'dataLabel',
        },
        selected: true,
      },
    ],
    credits: {
      enabled: false,
    },
    tooltip: {
      enabled: false,
    },
    plotOptions: {
      series: {
        turboThreshold: 0,
        dataLabels: {
          enabled: true,
        },
        events: {
          click(this: Series, event: any) {

          },
        },
      },
    },
    xAxis: [
      {
        currentDateIndicator: {
          color: '#FF6767',
          label: {
            format: 'Today',
          },
        },
      },
      {
        dateTimeLabelFormats: {
          month: '%B, %Y',
          week: 'Week %W, %Y',
          day: '%e %b %Y',
        },
      },
    ],
    yAxis: [
      {
        scrollbar: {
          enabled: true,
          showFull: false,
          liveRedraw: true,
        },
        max: ITEMS_PER_PAGE,
        tickWidth: 1,
        categories: dataCategories as any,
      },
    ],
I have a problem when the number of objects becomes more than 500, lags appear. I think that the problem is in the rerendering of all objects when scrolling. Also, part of the frames is taken by the rendering of labels for each object.
How can this be optimized so as not to damage key functionality? The scroll is made in such a way that the chart header does not go beyond the frame.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Xrange scroll perfomance

Hi,

Welcome to our forum and thanks for contacting us with your question!

When you set turboThreshold to 0, it is disabled. Disabling turboThreshold could lead to lower performance when you are displaying many points. You should enable turboThreshold and specify your points as an array instead of objects. Turbo threshold has to be set to a lower value than your actual data length in order to make it work.

Let me know if that was what you were looking for!
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Usage”