dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

How to add/store metadata for each series point

Hi,
if you have a look at this fiddle: https://jsfiddle.net/dizzy0ny/3ukcexvh/207/

You will see that my data consists of arrays with 8 elements. these correspond to: date, open, high, low, close, volume, change, and change_percent

I would like to be able to add the last two elements (change and change_percent) of the array as metadata to a series point so that i may reference it later to build a tool tip that includes them. some what like this (note the last two rows):

Code: Select all

            orig_fmt[1] = '<span style="color:blue">●</span><b>'+point.series.name+'</b><br/>&emsp;O: '
              +Highcharts.numberFormat(point.open,2)+'<br/>&emsp;H: '
              +Highcharts.numberFormat(point.high,2)+'<br/>&emsp;L: '
              +Highcharts.numberFormat(point.low,2)+'<br/>&emsp;C: '
              +Highcharts.numberFormat(point.close,2)+'<br/>'
              +Highcharts.numberFormat(point.chg,2)+'<br/>'   //Change from previous close
              +Highcharts.numberFormat(point.chg_pct,2)+'<br/>';//Percent change from previous close 

Any suggestions on how to this?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to add/store metadata for each series point

Hello!

There is an API property called series.keys. In there, you can setup your own array of strings, where each string corresponds to each item in the array.
Of course, you need to remember to maintain the matching order of the array elements to your original data.

For example, in your data, the keys property would look like this:

Code: Select all

['date', 'open', 'high', 'low', 'close', 'volume', 'change', 'change_percent']
Then, these properties will be available on each point object.

Take a look at the API reference, and a demo below.

API: https://api.highcharts.com/highstock/se ... stick.keys
DEMO: https://jsfiddle.net/BlackLabel/csbu9nzd/

Let me know if you've managed to implement this in your code,
Best regards!
Kamil Musiałowski
Highcharts Developer
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: How to add/store metadata for each series point

this works nicely. thank you Kamil!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to add/store metadata for each series point

You're welcome! Feel free to ask again!
Kamil Musiałowski
Highcharts Developer
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: How to add/store metadata for each series point

Hi Kamil,
the solution almost works for the example i provide. But it does seem to affect rendering of the other series.
For example, have a look at this fiddle is you can: https://jsfiddle.net/dizzy0ny/3ukcexvh/262/

You will see i added the series keys to the first series (aapl) and now i am able to render the tool tip the way i want.
However, notice now the the 2nd series (volume) is shifted to the right when rendered. (note this series is on left axis).
Lastly i also added the keys to the 3rd series - but that is not rendered at all any longer.

What you know why this is happening?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to add/store metadata for each series point

Hi there, that's because each series needs different keys.

For example, for candlestick charts, Highcharts expects keys such as open, high, low, close. Where for the volume it will be just x, y values.
In short. For each series, you need to specify a separate keys array, to tell the Highcharts at which index in your data array you can find needed values.
(A general tip to get the keys would be to console.log a specific series, and see how the points values are named).

I have also changed the 'date' key in your demo to 'x' and I think that's what was missing:
https://jsfiddle.net/BlackLabel/k6yguj5z/

Regards!
Kamil Musiałowski
Highcharts Developer
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: How to add/store metadata for each series point

ah ok. so if understand this correctly, depending on series type there are required keys and then you can add additional keys if needed. correct?

Candle: date. open, high, low, close,...
Scatter: x, y,...
Line: x,y,....
Column: x, y, ...

that correct?

thanks much as always
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to add/store metadata for each series point

Exactly! You got that absolutely right.

Feel free to ask any further questions,
Have a nice day!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”