It is currently Fri Sep 22, 2017 7:04 pm Advanced search

Highstock drilldown/up - various issues

Technical support for the Highcharts Stock package

Highstock drilldown/up - various issues

Postby cjs118 » Mon Sep 11, 2017 11:13 pm

Hey there,

I have run into various issues when switching from Highcharts to Highstock because of the need to use a scrollbar on the drill down chart. I have found a work around, but I had to downgrade to v 5.0.9 in order for it to work properly. Below are the issues I have experienced.

Issue 1:
This may not be a real issue but figured it was worth mentioning. After drilling down - the xAxis labels are not automatically wrapped. I am using a custom label formatter. FIX: Added chart.redraw() in drilldown event.

Issue 2:
After clicking to drill up (aka Back button), a small portion of the bottom of the chart is missing. I believe this may be an issue with the chart resizing after removing the scrollbar? See below image.
drillupissue.png
drillupissue.png (60.76 KiB) Viewed 67 times

Potential fixes:
1. Use chart.redraw() - this works but the points on the line graph are no longer clickable and anywhere else on the line is.
2. Use chart.drillupAll() - this works great except chart.setTitle does not seem to work.
3. Downgrade to v 5.0.10 - everything works perfectly as long as I include chart.redraw() in drillUp event.

I can send over an example, if necessary.
Chrystal Langston
cjs118
 
Posts: 5
Joined: Fri Sep 08, 2017 11:26 pm

Re: Highstock drilldown/up - various issues

Postby kamil » Tue Sep 12, 2017 9:50 am

Hi cjs118,

Thank you for reporting this issues. Please provide me with the live working example that you've mentioned.

Best regards!
Kamil Kulig
Highcharts Developer
kamil
 
Posts: 371
Joined: Tue May 30, 2017 11:12 am

Re: Highstock drilldown/up - various issues

Postby cjs118 » Tue Sep 12, 2017 6:48 pm

Sure thing - here ya go!
https://jsfiddle.net/cjs118/8x03k0y1/

The fiddle shows the issue displayed in the original post's image. I also removed the chart.redraw() from the drilldown event to show the label redraw issue. You'll notice that if you use the scroll bar on the drilldown the labels will redraw appropriately.

Let me know if you need anything else.
Thanks again,
C
Chrystal Langston
cjs118
 
Posts: 5
Joined: Fri Sep 08, 2017 11:26 pm

Re: Highstock drilldown/up - various issues

Postby kamil » Fri Sep 15, 2017 3:56 pm

Hi,

Thanks for the demo. Please refer to this fiddle: https://jsfiddle.net/kkulig/3gjb4jx3/

1. Labels problem
I noticed that your code throws an error while resizing the chart:
Code: Select all
Uncaught TypeError: Cannot read property 'name' of undefined
    at Object.formatter (https://fiddle.jshell.net/_display/:1155:71)

It occurs because you're using value of the point as array index (data[this.value]) in labels.formatter. Value of the label can be a double number. Array index can be only unsigned integer.

I commented this function out in my demo.

2. Hidden part of the series problem
It seems to be a bug. I've reported it here: https://github.com/highcharts/highcharts/issues/7155

As a workaround you can hide title like this:

Code: Select all
      drillup: function(e) {
        this.setTitle({
          text: 'Not empty title',
          style: {
             visibility: 'hidden'   
          }
        });
      }

Demo: https://jsfiddle.net/kkulig/rjxzdv4u/

Best regards!
Kamil Kulig
Highcharts Developer
kamil
 
Posts: 371
Joined: Tue May 30, 2017 11:12 am

Re: Highstock drilldown/up - various issues

Postby cjs118 » Fri Sep 15, 2017 5:44 pm

Hey there,

Thank you so much for the update and the workaround!

For the label formatter issue... Is there a better way to handle custom axis labels in Highstock? I need the text identifier for the label and not a numeric or date. I have several other charts that will need to utilize this in some fashion. Since I cannot use categories I'm stuck with using a custom formatter. I'm also having a related issue with using multiple axes: one for drilldown and other for drillup that requires a different label formatter. I'm planning on reporting that in a separate post.

Any help is greatly appreciated!

Thank you again,
C
Chrystal Langston
cjs118
 
Posts: 5
Joined: Fri Sep 08, 2017 11:26 pm

Re: Highstock drilldown/up - various issues

Postby kamil » Mon Sep 18, 2017 1:25 pm

Hi,

Please refer to this demo: http://jsfiddle.net/kkulig/k81u1z13/

You can use xAxis.tickPositions property to make sure that all the labels are always displayed. Your code was throwing an error while resizing the chart to the smaller size. Some labels were omitted by Highcharts, because there wasn't enough space - that's the default Highcharts behavior.

Now all you have to handle the relation between this.pos (position of the label - by using tickPositions we make sure that this value will be provided for every tick) and the label you want to display. In my demo I placed the labels inside every point. Then I simply find the point by x value in my data and return it's label property.

Best regards!

API reference:
http://api.highcharts.com/highstock/xAxis.tickPositions
Kamil Kulig
Highcharts Developer
kamil
 
Posts: 371
Joined: Tue May 30, 2017 11:12 am


Return to Highstock Usage

Who is online

Users browsing this forum: No registered users and 0 guests