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

adding 'signal' up/down ticks or arrows above a series point

Hi,
in the attached chart, you will see some red highlighted areas on a candlestick chart. i achieve this by plotting two series, one the candlestick series and the 2nd is a scatter plot. I would like to change that to be arrows (up or down), and offset either above or below the candles.

I am looking at the documentation here: https://api.highcharts.com/highcharts/p ... ker.symbol
and i think what i want is 'triangle' and 'triangle-down'. Im not sure how to apply them on a specific series however and offset them either above or below the price series.

are there any examples i can follow?
chart1.png
chart1.png (108.74 KiB) Viewed 701 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: adding 'signal' up/down ticks or arrows above a series point

Hi there!

That's an interesting feature!

To achieve that you have to create another series with the type "scatter".
Then, you can programmatically add a triangle to the desired candlestick. I have created a small function that can help you achieve that. Right now you only have to specify to which point you would like to append your triangle, choose a direction, size, and offset - and it's ready!

Make sure to analyze how this function is structured, how we pass in parameters, and how it works with the Highcharts.addPoint method, and parameters. I'm sure it will be beneficial to you and inspire you to create other helper functions in your code while utilizing our core methods.

DEMO: https://jsfiddle.net/BlackLabel/41uxoh67/
AddPoint method: https://api.highcharts.com/class-refere ... s#addPoint

Let me know if that's what you were looking for!
Have a great day
Kamil Musiałowski
Highcharts Developer
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: adding 'signal' up/down ticks or arrows above a series point

Thanks. This is an interesting solution. since im plotting the 'signal' series separately right now, i think it would require some looping or map to convert that series as
markers im guessing. What i had so far prior to reading your suggestion was the folloowing:

In code i iterate over my model and build a 'series' array first then build the chart, assign the series to that chart. My model has an 'stype' propertly that tells it what kind of series it is (i.e. Candlestick, ohlc, scatter). In the case of a signal, it is 'signal_buy' or 'signal_sell', but the values are still ohlc values. the code looks like this:

Code: Select all

                series.push({
                    type: s.stype,
                    id: s.descr,
                    name: s.descr,
                    data: s.data.values,
                    yAxis: (s.y2_axis)? y_axis_idx+1 : y_axis_idx,
                    dataGrouping: {
                        enabled: false,
                        units: groupingUnits
                    },
                    color: get_color(s.stype, 'dn', s.color),
                    upColor: get_color(s.stype, 'up', s.color),
                    opacity: s.opacity,
                    tooltip: { valueDecimals: 2 },
                });

                if (['signal_buy', 'signal_sell'].includes(s.stype)){
                    var s1 = series[series.length-1];
                    s1.type = 'scatter';
                    s1.marker = {
                        symbol: (s.stype == 'signal_buy')?'triangle':'triangle-down'
                    }
                }
With the above, i am able to get the marker for the 'signal' series. Now i need to just offset it to draw at an offset about the HIGH value or LOW value for.
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: adding 'signal' up/down ticks or arrows above a series point

adding the following when building my arrays and the 'type' is a signal seems to work:

Code: Select all

                    var offset= (is_buy_sig) ? 0.005: -0.005;
                    s1.data = s1.data.map(([ a, b ]) => [ a, b-(b * offset)]);
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: adding 'signal' up/down ticks or arrows above a series point

Hi!

It seems that you have figured it out, that's great!

But in case of any other questions, feel free to contact us,
Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”