jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

select/highclight candlestick point

I have requirement where i need to select/highlight certain points on charts.. and possible chart types are -- line,ohlc,candlestick
below demo is working if i do line,ohlc but its not working when chart Type = candlestick.

is this a bug or i am missing something ?

https://jsfiddle.net/x5avjt4h/11/

is there any other way i can highlight a particular candle ?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: select/highclight candlestick point

Hi jahnvi25,

Thanks for contacting us with your question.

It seems to work correctly. As you can see both the point style and its state property changes after selecting:
https://jsfiddle.net/BlackLabel/4y2kLcx9/

Perhaps you missed it because the point that you select in your demo is quite small and it is hard to see the change in the state.

Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer
jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

Re: select/highclight candlestick point

Thanks for quick reply. this is helpful. in my demo i was missing this code

Code: Select all

states: {
        select: {
          color: 'red'
        }
now thats working as per our need..
Thanks a lot
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: select/highclight candlestick point

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer
jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

Re: select/highclight candlestick point

one more question on same topic. i am trying to use halo:{} property to highlight the candle.. but drawing line on top of it.. but its not working.. can you please help.. something is like below.. but related to candle and straight line..

Code: Select all

halo: {
            size: 3,
            attributes: {
              fill: Highcharts.getOptions().colors[2],
              'stroke-width': 2,
              'd': ['M', 10, 10, 'L', 40, 40, 'z'],
              stroke: Highcharts.getOptions().colors[1]
            }
          }
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: select/highclight candlestick point

Hi jahnvi25,

Most likely it doesn't work because of incorrect path positioning. In this case you should use mouseOver event to draw the path relatively to point position.
Demo: https://jsfiddle.net/BlackLabel/t3pzome7/
API reference: https://api.highcharts.com/highcharts/p ... .mouseOver,
https://api.highcharts.com/class-refere ... VGRenderer


Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer
jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

Re: select/highclight candlestick point

Thanks for reply.. but i have to highlight certain candle based on condition.. so i cant use mouseOver.. point/candle will be highlighted on matching condition. How can i do it ?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: select/highclight candlestick point

Hello jahnvi25!
You can move the logic of highlighting points to e.g. chart.events.load and there, conditionally highlight certain points. Please, check the demo below.

Demo: https://jsfiddle.net/BlackLabel/s1vhk905/
API reference: https://api.highcharts.com/highcharts/chart.events.load

Feel free to ask any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Stock”