Highstock scrollbar not covering the whole length in multiple series - javascript

I'm having an issue with the scrollbar in multiple series line chart where x-axis is date.
Looks like the max length of the scrollbar is determined by the length of the first (older) series.
Although when pressing the 'All' button in range selector I can see all of the series, as the first series ends before the others, as soon as I touch the scrollbar the chart readjusts so that all I can see is the data contained in the first series' length period.
After that, if I want to see the series after the first one has ended, I need to drag the chart or click the 'All' button in range selector again.
I would really appreciate any help you could provide.
Thanks in advance!
jsFiddle: http://jsfiddle.net/8DdP4/2/

Indeed, it's not supported to cover all series. Here you can find workarund.
With demo: http://jsfiddle.net/highcharts/SD4XN/
In short: in callback add series to the navigator on your own:
function (chart) {
chart.addSeries({
data: seriesOptions[2].data,
xAxis: 1,
yAxis: 1
});
}

The scrollbar you refer to is called navigator.
There is a property in navigator called series which is defined as:
series: Object
Options for the navigator series. Available options are the same as
any series, documented at plotOptions and series.
Unless data is explicitly defined on navigator.series, the data is
borrowed from the first series in the chart.
You can see it here.
Im not sure if you can build your navigator from multiple series, i suppose it is posibles. In case it is not build build the navigator with the largest.

Related

How to hide xAxis category of a hidden series in highcharts boxplot?

I'm trying to hide a certain series by clicking on the legend item and/or using the hide() method. The series gets hidden, but the category is still visible on the xAxis. In some other solutions for other charts, like this column chart solution, breaks were suggested, but that doesn't work on the boxplot chart. Only the leftmost and rightmost categories get hidden. Here's a jsfiddle of the boxplot that's not working:
https://jsfiddle.net/mjan7y48/
In the same application I have a column chart that hides its category immediately without any trouble. Any idea how to solve this issue?
You need to disable grouping for this solution to work:
plotOptions: {
series: {
grouping: false,
...
},
}
Live demo: http://jsfiddle.net/BlackLabel/w6nhvge7/
API Reference: https://api.highcharts.com/highcharts/series.boxplot.grouping
Importing Highstock solved the issue.

Highcharts - No X Axis Crosshair

I have a Highcharts 5.0.14 line chart in which the x-axis crosshair will not display. The y-axis works.
xAxis: { crosshair: true },
yAxis: { crosshair: true },
Both the x-axis and y-axis documentation show objects so that's what I started with. When the x-axis wasn't working and I started Googling and found a JSFiddle with them as true rather than objects. I tried that and x-axis still does not work.
http://api.highcharts.com/highcharts/xAxis.crosshair
http://api.highcharts.com/highcharts/yAxis.crosshair
The following JSFiddle is linked directly from Highcharts' documentation. It shows crosshair: true for both x and y and it works.
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/crosshair-both/
Inspecting the HTML I found a <path> element with class="highcharts-crosshair highcharts-crosshair-category undefined" - the "undefined" class caught my eye.
I appreciate your attention, thank you.
I got this working though I don't understand why the chart configuration resulted in the x-axis crosshair not appearing.
Before wanting to use crosshairs, when I first built the chart I was populating xAxis['categories']. I soon changed some of the chart design and no longer needed 'categories'. While making the changes, rather than delete the code to populate it with the previous data I set it to null.
Long story short, once I removed 'categories' altogether the x-axis crosshair appeared.
Strange considering the documentation at http://api.highcharts.com/highcharts/xAxis.crosshair.color states (for 'color')...
The color of the crosshair. Defaults to... rgba(204,214,235,0.25) for category axes, where the crosshair by default highlights the whole category.
I'm not sure what the last part, "where the crosshair by default...", means. Regardless, crosshairs and categories must work is what the documentation reveals.

Highcharts. Highlight line chart date interval on hover

I'm trying to implement highlight for a single section of line chart while hovering over this section. Under section I mean space between (in my case) vertical lines, which are representing separate date intervals depending on chart zoom level. The chart itself has dynamic data, which is being pulled from an endpoint with more detailed data, depending on date interval zoomed in.
During investigation I've found a plotBands property of x/yAxis. But the thing is, that this property only allows to set each plotBand manually.
So the question is, if there is something that will help me to do automatic creation of plotBands or similar hoverable/clickable stuff, for each separate time "interval"?
you can set the TestValue dynamically according to your needs and use something like this JSFiddle:
plotBands: [{
color: '#FCFFC5',
from: ($.TestValue)+1,
to: ($.TestValue)+2
},...]

Highcharts Custom display of tooltips, based on data series values

I could explain better if you can focus on the image attached here:
Can the hover line height be shown only up to the max line height (Please see the image below)
I do not want to show the hover values for first and last week. (I mean on hover of 'week 0', I do not want to show the hover boxes, same as for 'week 7')
Can I set the floor and ceiling for the each series data, Some thing like
series: [{
name: 'CPM',
data: [5,524,4,1,4,1,3,20,3],
color: 'rgb(87, 188, 0)'
//floor: 5,
//ceiling: 524,
},{ ....}
}]
Is there any such floor/min and max/ceil for the each data set.
Such that the other two series data gets visible in the chart. please refer this fiddle
How to show All Data Series Fiddle jsfiddle.net/4vzEt/21/
Could you show jsFiddle what is wrong? It's a little not clear for me.
In tooltip.formatter check this.x and return false when tooltip shouldn't be displayed.
Well, you can set that options, but it won't do anything.
Your image is saying something really different than 2) .. to remove that vertical line, just disable tooltip.crosshairs.
To change order of points, you need to use tooltip.formatter - sort points descending and return formatter string.
References:
tooltip.formatter
tooltip.crosshairs

Error bars (confidence intervals) in Highcharts

Error bars (or confidence intervals)are not currently supported in Highcharts but someone edited an existing module as a workaraound. The results are shown in this jsFiddle:
http://jsfiddle.net/b74Tt/
However, what if I have more than one series that needs to have error bars? How can one ErrorBar series be tied to a specific column series (and therefore be displayed exactly on top of it)? My problem is shown here in this other jsFiddle:
http://jsfiddle.net/FaYdK/1/
I added a new type of chart based on the column one. What I get is thin columns that act as error bars. I also used the events > legendItemClick to create a small function that hides the next series (the Error bar) when a column is clicked, so that its corresponding error bar also hides or displays.
See the following example:
http://jsfiddle.net/FaYdK/3/
I'm pretty satisfied with the solution, the only thing is that I would like the error bars to be displayed in the usual form (an inverted H) instead of a single line (thin rectangle). If anyone knows how to do this, please comment!

Categories