Page 1 of 1

How to add/store metadata for each series point

Posted: Sat Aug 13, 2022 2:27 am
by dizzy
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?

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

Posted: Mon Aug 15, 2022 8:01 am
by kamil.m
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!

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

Posted: Wed Aug 17, 2022 5:02 am
by dizzy
this works nicely. thank you Kamil!

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

Posted: Wed Aug 17, 2022 5:40 am
by kamil.m
You're welcome! Feel free to ask again!

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

Posted: Wed Aug 17, 2022 5:41 am
by dizzy
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?

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

Posted: Wed Aug 17, 2022 8:10 am
by kamil.m
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!

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

Posted: Wed Aug 17, 2022 8:13 pm
by dizzy
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

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

Posted: Thu Aug 18, 2022 6:04 am
by kamil.m
Exactly! You got that absolutely right.

Feel free to ask any further questions,
Have a nice day!