floatingrock
Posts: 7
Joined: Sun Sep 11, 2022 3:03 pm

Show % change relative to first point in window

I'd like to display the % change for a stock price, relative to the first point in the visible timeframe:

Image

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}
    />
  )
}
The problem is that when I zoom in, I am no longer able to zoom out (presumably because the series data was overriden when I used setData):

Image

How can I accomplish what I'm after, while still being able to use the zoom controls?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Show % change relative to first point in window

Hi there,

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

I don't think your demo shows what you have showed us on the screenshots, but you are right - if you are using the setData method it overwrites the existing data. To prevent that I'd suggest the following steps.
1. Save the data to a variable.
2. setData() to your desired, new dataset.
3. Once you want to go back to the previous data, simply refer to the previously created data variable.

Maybe the series compare will help you? Take a look into that.
https://jsfiddle.net/BlackLabel/90t4u5vs/

Do not hesitate to contact us in the future,
Best regards!
Kamil Musiałowski
Highcharts Developer
floatingrock
Posts: 7
Joined: Sun Sep 11, 2022 3:03 pm

Re: Show % change relative to first point in window

Hi Kamil!
kamil.m wrote: Mon Sep 12, 2022 1:24 pm setData() to your desired, new dataset.
The problem with using 'setData' is that the rangeSelectors don't work when you're "zoomed in"; I know it's possible to hook into the click action to restore the previous data set but it feels hacky.

I originally tried to do this using the 'setChartOptions' setter like so:

Code: Select all

setChartOptions({
   series: [replaceWithPcts(chart.series[0].points))]
});
The problem is that now the chart does not get updated at all. You can take a look at this fiddle to see what I mean: https://codesandbox.io/s/serene-chatterjee-mcnsnm (I set the return value to y: 1, but it's ignored). How can I change the "y" data points to reflect the "%" value when the extremes change?
kamil.m wrote: Mon Sep 12, 2022 1:24 pm Maybe the series compare will help you? Take a look into that.
https://jsfiddle.net/BlackLabel/90t4u5vs/
I actually saw that one before. What I need though is to set the first point to "0%" when the chart extremes change. That way, it would always show the relative performance during the displayed time period.

Does that make sense?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Show % change relative to first point in window

Hello again!

I did some research to find the easiest possible implementation, and I think I've found it!
The API property that would allow to create what you want is called series.compareStart.
https://api.highcharts.com/highstock/pl ... mpareStart

Take a look at the simple demo I have prepared, with rangeSelector enabled:
https://jsfiddle.net/BlackLabel/a259jcvp/

Let me know if that's what you were looking for,
Regards!
Kamil Musiałowski
Highcharts Developer
floatingrock
Posts: 7
Joined: Sun Sep 11, 2022 3:03 pm

Re: Show % change relative to first point in window

I'm so happy, I think I'm going to cry..

Thank you so much!!!!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Show % change relative to first point in window

That's so nice to hear that, you are far too kind!

In case of any other questions, you know where to find us,
Have a great day!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”