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.
Selecting my zoom area
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.
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)