windH
Posts: 4
Joined: Wed Dec 21, 2016 6:52 am

Highstock navigator styling

Hey,

I'd like to be able to style the navigator better, by changing the size and color of the handles and by making the color of the navigator change between selected and un-selected areas.

This is what I'd like to end up with:
1) Custom navigator background color (supported)
2) Custom selected chart area color (supported)
3) Custom unselected chart area color (not supported)
4) Custom, bigger navigator handles, preferably icons (not supported)
Image

This is a fairly small thing to add I suppose, but would greatly benefit the appearence of Highstock charts that use a navigator. Currently the handles look horrible pretty much regardless of what you do, as only the background/border color can be changed. I also think that bigger handles would be "more inviting" on touch input devices to users who are new to the functionality.

EDIT: Also it would be nice if the cursor changed according to the functionality of the navigator, so when on hovering over the handle you'd get resize-cursor, when hovering over the middle of the navigator you'd get grab-cursor to indicate pan-functionality, and when hovering above the unselected area of the navigator chart you'd get default cursor.

This is a very small detail that ruins the appearance of an otherwise well stylized chart, at least for me.

Is there any way to achieve this result now? Best I could come up with is: http://jsfiddle.net/0k0e40sr/1/
pawel_d
Posts: 1910
Joined: Thu Jun 02, 2016 10:28 am

Re: Highstock navigator styling

Hi windH,

For a different colors for selected and unselected navigator series area, you can use zones. As for the handles, you can wrap function responsible for drawing them (H.Navigator.prototype.drawHandle()). Please, look at the example I prepared for you and in case of any questions, feel free to ask.

API Reference:
http://api.highcharts.com/highstock/plo ... ries.zones

Example:
http://jsfiddle.net/d_paul/ss8rsf5s/

Regards.
Paweł Dalek
Highcharts Developer
windH
Posts: 4
Joined: Wed Dec 21, 2016 6:52 am

Re: Highstock navigator styling

d_paul wrote:Hi windH,

For a different colors for selected and unselected navigator series area, you can use zones. As for the handles, you can wrap function responsible for drawing them (H.Navigator.prototype.drawHandle()). Please, look at the example I prepared for you and in case of any questions, feel free to ask.

API Reference:
http://api.highcharts.com/highstock/plo ... ries.zones

Example:
http://jsfiddle.net/d_paul/ss8rsf5s/

Regards.
Amazing, thank you very much and happy holidays!
windH
Posts: 4
Joined: Wed Dec 21, 2016 6:52 am

Re: Highstock navigator styling

d_paul wrote:Hi windH,

For a different colors for selected and unselected navigator series area, you can use zones. As for the handles, you can wrap function responsible for drawing them (H.Navigator.prototype.drawHandle()). Please, look at the example I prepared for you and in case of any questions, feel free to ask.

API Reference:
http://api.highcharts.com/highstock/plo ... ries.zones

Example:
http://jsfiddle.net/d_paul/ss8rsf5s/

Regards.
One more thing I noticed; is it possible to make the navigator change color when moving the handles? Attached are 2 GIF's, the first of which is what I'm looking for.

Preferred outcome:
Image

d_paul:
Image
pawel_d
Posts: 1910
Joined: Thu Jun 02, 2016 10:28 am

Re: Highstock navigator styling

Hi windH,

Sorry for my late reply. You can enable live redraw but unfortunately scrollbar needs to be enabled as well in order live redraw to work (although you can hide it by setting its height to 0). But there still will be a little delay between moving handles and changing selected section's color of navigator series.

API Reference:
http://api.highcharts.com/highstock/scr ... liveRedraw

Example:
http://jsfiddle.net/d_paul/ss8rsf5s/1/

Regards.
Paweł Dalek
Highcharts Developer
adamhun94
Posts: 3
Joined: Mon Oct 15, 2018 1:44 pm

Re: Highstock navigator styling

Hi pawel_d,
I didn't want to open a new thread for this, because in this discussion the demo is not working anymore. I found out that with Highstock 6.1.4 the drawHandles function is not working as expected, but with 5.0.0 it is. I found this thread after wanted to draw circle handles, but I got into errors. As I saw that the elementsToDestroy array is not present anymore. Any suggestion how to override default handles?

Thanks!
Adam
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: Highstock navigator styling

Hi adamhun94,

You're right drawHandle method changed a little and that's why this example is not working with a new version. However, changing handles will be the same approach. You have to make a wrapper to Highcharts.Navigator.prototype.drawHandle method and there change the way rendered creates handles. Check the demo I posted below where I implement this approach. The most important part of it:

Code: Select all

handles[index] = renderer
          .circle(0, 6, 6) // here I changed path to circle method
          .attr({
            zIndex: 10 - index
          }) // zIndex = 3 for right handle, 4 for left / 10 - #2908
          .addClass('highcharts-navigator-handle highcharts-navigator-handle-' + ['left', 'right'][index])
          .add();
Check also Highcharts.SVGRenderer documentation where you will find how to create paths, circles etc.

Demo:
http://jsfiddle.net/wchmiel/6cym58nu

Api reference:
https://api.highcharts.com/class-refere ... VGRenderer

Kind regards.
Wojciech Chmiel
Highcharts Developer
adamhun94
Posts: 3
Joined: Mon Oct 15, 2018 1:44 pm

Re: Highstock navigator styling

Dear wojtek,
thanks for your reply! Your demo code looks good, except that you are still using Highstock v5.0.0, and I'm trying to achieve this modification under v6.1.4 (the current latest).
Importing the latest version of Stock results this:
http://jsfiddle.net/adamhun94/cuog53tm/

This is the same behavior what I could achieve in the past (trying to figure out what's wrong).
Is there a way to style the handles in version 6, or should I drop it? I'm not sure if I can downgrade to v5, because I'm using the ng version of the module.

Thanks for in advance!

Adam
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: Highstock navigator styling

adamhun94,
Your demo code looks good, except that you are still using Highstock v5.0.0, and I'm trying to achieve this modification under v6.1.4 (the current latest).
Sorry about my mistake in the last post, somehow I misunderstood you.
Is there a way to style the handles in version 6, or should I drop it?
Yes, of course, the solution is even simpler than in version 5. Navigator provides a possibility to choose handles from Highcharts defined ones, add your custom handles or use a graphic. More about it here https://api.highcharts.com/highstock/na ... es.symbols. Check demos I posted below with defined circle handles and custom circle handles.

Demos:
http://jsfiddle.net/wchmiel/szdaqpuw/
http://jsfiddle.net/wchmiel/fqjpvyro/

Api reference:
https://api.highcharts.com/highstock/na ... es.symbols
https://api.highcharts.com/class-refere ... .SymbolKey

Kind regards.
Wojciech Chmiel
Highcharts Developer
adamhun94
Posts: 3
Joined: Mon Oct 15, 2018 1:44 pm

Re: Highstock navigator styling

Dear wojtek,
sorry for the late reply. Thank you so much for your help! That's what I was looking for :)

Adam
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: Highstock navigator styling

You're welcome :wink:

Kind regards.
Wojciech Chmiel
Highcharts Developer

Return to “Highcharts Stock”