I accomplished this by using series.setData with the desired data, in response to the xAxis.events.setExtremes() event:
Code: Select all
export default function StockChart({ symbols, colors }) {
const [min, setMin] = useState(0);
const chartEl = useRef(null);
const [chartOptions, setChartOptions] = useState({
chart: {
spacing: [10, 10, 35, 10],
},
credits: false,
scrollbar: { enabled: false },
tooltip: {
shared: true,
valueDecimals: 2,
valueSuffix: '%',
},
legend: {
enabled: true
},
series: symbols.map((symbol, i) => mapToSeries(symbol, results, colors[i], results.length === 2 && i === 0)),
yAxis: {
gridLineColor: 'rgba(128,128,128,.2)',
labels: {
formatter() {
return (this.value > 0 ? '+' : '') + this.axis.defaultLabelFormatter.call(this) + '%';
}
}
},
xAxis: {
events: {
setExtremes: ({ dataMin, min }) => setMin(dataMin ?? min)
}
},
})
useEffect(() => {
const chart = chartEl.current?.chart
if (!chart) return
const replaceWithPcts = (points) => {
const first = points.find(point => point.x >= min)
return points.map(point => ({ x: point.x, y: 100 * (point.y / first.y - 1) })) // convert to %
}
console.log('charts', chart)
chart.series[0].setData(replaceWithPcts(chart.series[0].points))
}, [min]);
return (
<HighchartsReact
highcharts={Highcharts}
constructorType={'stockChart'}
options={chartOptions}
ref={chartEl}
/>
)
}
How can I accomplish what I'm after, while still being able to use the zoom controls?