amdeshpande
Posts: 26
Joined: Thu Oct 04, 2018 4:57 am

Highstock graph- outlineColor modification

Hi there,
I am doing R & D on HighStock graphs for our project.
In Highstock navigator part , I need to outline the area which is under navigator selection.

But with outlineColor property I can see there is one line at the top. I don't require this line.
Any suggestions for this?

Find the fiddle below
https://jsfiddle.net/adeshpan/rytofaLb/1/
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Highstock graph- outlineColor modification

Hi, amdeshpande!

Are you looking for this?

https://jsfiddle.net/BlackLabel/hbwzo9nm/

API Reference: https://api.highcharts.com/highstock/navigator.series

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
amdeshpande
Posts: 26
Joined: Thu Oct 04, 2018 4:57 am

Re: Highstock graph- outlineColor modification

hi rafalS,
I am not looking for this.
The issue is , in your fiddler , I need to remove the extended top line (blue line) from the graph.
Is there a way to do this?
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Highstock graph- outlineColor modification

amdeshpande,

In your first message you write "I need to outline the area", in your second message you write "I need to remove the extended top line". I am really confused now. Can you explain more precisely or even send a picture of what exactly you want to achieve?

Kind regards.
Rafal Sebestjanski,
Highcharts Team Lead
amdeshpande
Posts: 26
Joined: Thu Oct 04, 2018 4:57 am

Re: Highstock graph- outlineColor modification

Whatever you have done in your fiddler is correct, the only thing is the blue line that is getting extended back and forth on top of navigator is problem for me.
How to remove the top line that is extended back and forth on top of navigator?

Let me know if you need some more explanation
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Highstock graph- outlineColor modification

amdeshpande,

There is only one way to change navigator outline - wrapping function responsible for drawing it and changing its path.

jsFiddle: https://jsfiddle.net/BlackLabel/Lrgok19a/

I hope this is what you've been looking for.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
amdeshpande
Posts: 26
Joined: Thu Oct 04, 2018 4:57 am

Re: Highstock graph- outlineColor modification

Thanks for your reply. This may help.
Any idea how can we implement this with angular 6.

We are using angular2 highcharts npm.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Highstock graph- outlineColor modification

amdeshpande,

I don't quite know because angular2 highcharts is not our official wrapper.
You can see here how it is working in our official wrapper: https://stackblitz.com/edit/highcharts- ... mponent.ts

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
amdeshpande
Posts: 26
Joined: Thu Oct 04, 2018 4:57 am

Re: Highstock graph- outlineColor modification

Thanks Rafal,
I would be continuing with the angular2highchart implementation.

I was trying to implement your solution for in the below code but getting error.

Code: Select all

H.wrap(H.Navigator.prototype, 'drawOutline', function(procced, zoomedMin, zoomedMax, inverted, verb) {
    var navigator = this,
      maskInside = navigator.navigatorOptions.maskInside,
      outlineWidth = navigator.outline.stroke
.
.
.
}
Error- while using draw line function we are getting undefined object for H.Navigator.

Can you please help?
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Highstock graph- outlineColor modification

I am sorry, but I have no idea why you get this error. I am not even able to debug it anyhow. I gave you working code with Highcharts official angular wrapper. If you have any problems with other wrappers, you should contact its authors.

Kind regards
Rafal Sebestjanski,
Highcharts Team Lead
amdeshpande
Posts: 26
Joined: Thu Oct 04, 2018 4:57 am

Re: Highstock graph- outlineColor modification

Thanks for your response.

I tried with Angular-highchart (your official module) too. However I am getting 'undefined' on H.Navigator property.

error message: outline-render.js:15 Uncaught TypeError: Cannot read property 'prototype' of undefined

Please suggest me on this.

Thanks,
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Highstock graph- outlineColor modification

amdeshpande,

Like I said in my previous message - I am not able to debug it anyhow until I see your working online demo with the occurring problem. I have sent you already working angular implementation of what you had asked me: https://stackblitz.com/edit/highcharts- ... mponent.ts

I will be glad to help you if you manage to put your project online and it will work properly without outline-render plugin.
Rafal Sebestjanski,
Highcharts Team Lead
Majonez69
Posts: 13
Joined: Fri Mar 18, 2022 4:33 pm

Re: Highstock graph- outlineColor modification

rafalS wrote: Tue Oct 23, 2018 9:58 am amdeshpande,

There is only one way to change navigator outline - wrapping function responsible for drawing it and changing its path.

jsFiddle: https://jsfiddle.net/BlackLabel/Lrgok19a/

I hope this is what you've been looking for.

Best regards!
Hi!

This has been really helpful and I appreciate it! I do have one question though - it looks great when dragging the range, or expanding/colapsing it. However when you click on the navigator to reposition the range there the outline drawn by your overridden function is there immediately (like the transition is not animated), while the handles follow shortly after. It can be also observed on your fiddle, just click somewhere on the navigator instead of dragging the range. Is there a way to animate it as well, so that the outline moves smoothly with the handles?

Best regards
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highstock graph- outlineColor modification

Hi majonez69,

You can set animation-delay to 0 and this is turn off the animation of the navigator.

Code: Select all

  chart: {
    animation: {
      duration: 0
    }
  },

Live demo:
https://jsfiddle.net/BlackLabel/g5fadL6j/

API References:
https://api.highcharts.com/highstock/chart.animation

Best regards
Sebastian Hajdus
Sebastian Hajdus
Highcharts Developer
Majonez69
Posts: 13
Joined: Fri Mar 18, 2022 4:33 pm

Re: Highstock graph- outlineColor modification

sebastian.h wrote: Tue Mar 22, 2022 4:09 pm Hi majonez69,

You can set animation-delay to 0 and this is turn off the animation of the navigator.

Code: Select all

  chart: {
    animation: {
      duration: 0
    }
  },

Live demo:
https://jsfiddle.net/BlackLabel/g5fadL6j/

API References:
https://api.highcharts.com/highstock/chart.animation

Best regards
Sebastian Hajdus

Thank you Sebastian, that does the trick and we'll probably go with that!

Just out of curiosity - would it be possible to animate the drawn rectangle so that it also moves/gets animated into moving to the target position along with the handles, instead of disabling the animations completely?

If that's too much of work then let's not bother, but just wanted to know would it even be possible.

Thanks

Return to “Highcharts Stock”