How to add/store metadata for each series point

[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?

[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!

[dizzy]

this works nicely. thank you Kamil!

[kamil.m]

You're welcome! Feel free to ask again!

[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?

[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!

[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

[kamil.m]

Exactly! You got that absolutely right.

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