How do I get rid of the preview of offscreen points in a zoomed in Highcharts scatterplot?

84 views Asked by At

I'm using Highcharts to show multiple series of data, a few scatterplot and a few line. When I select an area to zoom in on a scatter point, I see a bunch of extra points that are supposed to be out of range drawn on the axis of the chart. Is there a Highcharts setting or a way to override the native zoom functionality to remove those offscreen points?

"@angular/core": "11.2.14",
"highcharts": "^9.0.1",
"highcharts-angular": "^2.10.0",

Here's the chart zoomed out. It has multiple series, but its the scatterplot series I'm debugging. Normal Chart

Selecting my zoom area Selecting

Zoomed in. Note that the other scatter points in the series are supposed to be way outside of the selected range but are still drawn on the axis. Zoomed selection

Here are rough HighCharts options I'm using (labels and ticks [etc] get tweaked once data loads so its not exact):

export const BASE_CHART_SETTINGS: ChartSettings = {
  chart: {
    renderTo: '',
    animation: false,
    backgroundColor: ChartColors.GridBg,
    plotBorderWidth: DEFAULT_GRID_LINE_WIDTH,
    plotBorderColor: ChartColors.BorderLine,
    marginBottom: 34,
    inverted: true,
    zoomType: 'xy',
    resetZoomButton: {
      theme: {
        style: {
          opacity: 0,
          display: 'none',
        },
      },
    },
  },
  title: { text: null },
  legend: { enabled: false },

  credits: { enabled: false },
  exporting: { enabled: false },
  plotOptions: {
    spline: {
      enableMouseTracking: true,
      marker: {
        radius: 3,
        symbol: 'circle',
        enabled: true,
      },
    },
    series: {
      enableMouseTracking: true,
      stickyTracking: true,
      lineWidth: 1.25,
      states: {
        inactive: { opacity: 1 },
      },
      turboThreshold: 1,
    },
  },
  boost: {
    enabled: true,
    useGPUTranslations: true,
  },
  lang: {
    noData: 'No Data',
  },
  tooltip: {
    enabled: false,
  },
};

export const DEFAULT_SCATTER_SERIES = {
  type: 'scatter',
  lineWidth: 0,
  color: ChartColors.AxisLabel,
  enableMouseTracking: false,
  marker: {
    radius: 3,
    symbol: 'circle',
  },
  states: {
    hover: { enabled: true },
  },
  boostThreshold: 1500,
};

EDIT: On further experimentation, it looks like it may be related to the scatterplots being boosted. If I disable boosting, the scatterplots do not show the offscreen point preview. For performance reasons, though, I need to keep the points boosted, so I'm still looking for a way to get rid of the extra points showing up

EDIT 2: The documentation for boostThreshold also mentions setting cropThreshold to change how many points are actually drawn in the plot area, but I haven't been able to get it to work (setting cropThreshold to 1 still shows all of the offscreen points)

0

There are 0 answers