Weird HighCharts Gantt Navigator rendering - highcharts

Having some issues with the rendering of the navigator in gantt chart.
First on initial rendering it shows a range from like 1970 to 2017 (end date in this chart)
Then if I collapse a node, then it sets its date range correctly and the range stays correct thereafter.
Note that I added min and max values to the xAxis just to make sure that the range was fully set.
So that is correct but the content isn't as expected, where I'm trying to emulate the base example and show a mini gantt. My content is:
I originally had a yAxis like in the example but getting essentially the same results.

Related

HighStock with Multiple X-Axes, ToolTip is not showing values of all series

I am using HighStock for comparative analysis, where it shows same number of series during different time periods, as shown in this fiddle.
It has multiple x and y axes. when I move mouse over the chart, it shows series wit value at mouse current location.
Problem:
Problem in this chart is, tooltip do not show values of all series, but a few and those series change in tooltip window. I want tooltip to show all series with corresponding or nearest point value at mouse location.
Another problem is with navigator, navigator is showing only dates corresponding to first x-axis it should show dates of all axes, stacked one above the other(like in chart),
Moreover, when I minimize the navigator window, it shorten only first x-axis but not all, I want it to shorten all x-axes. The said issue can be observed in following image.

Charts - set Tooltip format per series

I have a use case where the client needs to see the previous date ranges stats overlaid on the current date range. This will allow them to easily compare current vs previous performance.
To do this I'm adding another series to the charts and retrieving the previous periods data. Previously, we then set the tooltip for the X value which was the current dates. I'm now needing to modify the tooltip to show the correct date value for each series such that a previous periods data point tooltip might look like:
12/1 : $4432.00
and the current periods data point:
1/1 : $21321.12
However it seems the charts are only capable of a single tooltip formatter instead of a per series formatter. If I continue to use the X axes label it will display the incorrect date on the previous periods data points. Using the above example would come out with 1/1 for the previous point:
1/1 : $4432.00
Is there a method by which I can set a tooltip format per series? Is there also any means by which we can modify and extend the underlying Highcharts?
I've found one solution for this function. Create a new XAxis and assign it to the Series.
XAxis xAxis = new XAxis();
xAxis.setCategories(categories);
xAxis.setOpposite(true);
configuration.addxAxis(xAxis);
series.setxAxis(1);
By adding the new XAxis the tooltip formatter can you use the same logic but receive different values depending on which axes the series is attached to.
I found setting the X axis by Integer a bit odd though. It should take the object imo but I suppose it needs to know which axis in the configuration's array to assign it to.
This solves the use case I have but won't be a solution if there are more than 2 axes to label.

Highcharts - Column range chart does not render properly

I've a highchart which displays categories on x-axis and time on y-axis.This chart does not show complete range for a particular set of dates. I've created a fiddle for the same. jsfiddle.net/kshrrgvo
For the series with name "Remaining" bars are not complete. Moreover, the axis labels does not denote the full range.

Highcharts Column chart Series data formatting change

I have a simple column chart where the yAxis series data contains numeric strings in the millions and tens of millions. The chart therefore displays the graph numbers like this: "12.5M"(on the side of the grid) and in the points tooltip it is being displayed with a decimal point at the end. How do I make the data be shown in the thousands with commas? Will the chart be adjusted automatically to display more grid lines and raise the columns higher? Thanks a lot in advance.
I would have added an image, however it seems that that requires more reputation points. Sorry. Here's a link to it Screenshot
1) you can change the formatting of the axis labels by setting your own format with the formatter function
http://api.highcharts.com/highcharts#yAxis.labels.formatter
2) you can change the number of ticks by setting a tickInterval or tickPixel interval setting
http://api.highcharts.com/highcharts#yAxis.tickInterval
http://api.highcharts.com/highcharts#yAxis.tickPixelInterval
3) You can change how much extra space is added at the top/how many ticks there are, in part, by setting the maxPadding setting to 0
http://api.highcharts.com/highcharts#yAxis.maxPadding
When you have a small chart like the one you posted, Highcharts will often have trouble adapting its normal tick pattern, and you will often end up with just a min and max tick by default.
It's pretty easy to work these setting to get what you need though.

How to get time interval of candlestick in candlestick chart in highchart

I was trying candlestick chart using highchart ( highstock ) and find out that when I increase/decrease Navigator in candlestick chart the width of candlestick get changed. Sometime it display high, open, close and low for one hour interval whereas sometime it is displaying for month. I would like to grab these dynamically changed candlestick width ( not the pixel width but the real time interval) and display them in the chart title. Is there anyway I can get these information and update them dynamically in chart subtitle?
http://www.highcharts.com/stock/demo/candlestick
Thank You
What you are seeing are the effects of plotOptions.series.dataGrouping (API Reference) where the data is grouped and values are approximated to display the data faster. If you look at the example for units on the above linked page you'll find that you can determine and set what those groupings are. The grouping isn't truly dynamic, it's predefined.

Resources