CODEWITHSUNDEEP
highchartshighcharts-boost
jeffjenx
jeffjenx

Reputation: 17457

Highcharts boost rendering extra points at bottom while zoomed

I've created a Highcharts scatter graph with X-Y points that are arranged in a grid-like pattern, alternating between even and odd positions.

While using the boost module, I am seeing extra points being rendered at the bottom of the chart when zoomed in.

enter image description here

Not sure what to do about it. The extra points do no appear to have events attached to them and I can't seem to hide them any other way.

I suspect this may be a bug with the boost module, because the erroneous points are not plotted when the boost module is not being used.

// Prepare the data
var data = [],
    n = 100,
    i;
for (x = 0; x < n; x += 1) {
    for (y = 0; y < n; y += 1) {
        if (x % 2 === y % 2)
        continue
      data.push([x, y])
  }
}

Highcharts.chart('container', {
    chart: {
        zoomType: 'xy',
        height: '100%',
        events: {
          load: function() {
            var x = this.xAxis[0]
            var y = this.yAxis[0]
            x.setExtremes(18, 23)
            y.setExtremes(44, 52)
          }
        }
    },

    boost: {
        useGPUTranslations: true,
        usePreAllocated: true
    },

    xAxis: {
        min: 0,
        max: 100,
        gridLineWidth: 1
    },

    yAxis: {
        // Renders faster when we don't have to compute min and max
        min: 0,
        max: 100,
        minPadding: 0,
        maxPadding: 0,
        title: {
            text: null
        }
    },

    legend: {
        enabled: false
    },

    series: [{
        type: 'scatter',
        color: 'magenta',
        data: data,
        marker: {
            radius: 3
        },
        tooltip: {
            followPointer: false,
            pointFormat: '[{point.x:.1f}, {point.y:.1f}]'
        }
    }]

})
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

Upvotes: 0

Views: 81

Answers (1)

jeffjenx
jeffjenx

Reputation: 17457

It looks like your dataset might not work well with the useGPUTranslations (API).

Please, for this specific dataset, do not use this option- demo. An explanation of why this is recommended in this case in the API.

Highcharts.chart('container', {
  boost: {
    //  useGPUTranslations: true,
    usePreAllocated: true
  },
  // ...
})

Upvotes: 0

Related Questions