Problems with connecting series - highcharts

I can't figure out why I have a gap between series. Here's example http://jsfiddle.net/rsboarder/dbGH7/. The gap is between 10th and 11th April.
I tried
connectNulls: true
But that didn't work for me. Is it possible to fix?

It's caused by using two separate series, which can't be connected. Right now multiple colors for one series aren't supported, but will be released in the near future as plugin for Highcharts (~Q3).
Right now what you can do is to add one more point for left or right series, so all series will have one shared point with the same timestamp.

Related

highcharts - proximate legend items incorrectly assigned (edge case)

This is probably very edge case scenario, but I wanted to know if there is any workaround.
I noticed that when legend align set to right and layout is proximate and when last data points close to each other and bottom legend item has multiple lines in it, it confuses legend order.
Please take a look into this example and the image below:
I'm trying to have legend items ordered by their last value like test1,test2, test3, test longer text4, but instead got two last items mixed up. And it happens only when two last data points close to each other. Other times it worked perfectly.
I've tried to play around with legend.maxHeight, but unfortunately it has no effect.
I appreciate any help!

Possible bug in zooming in on Vaadin charts when more than 1 series present?

Earlier, I asked how to create "spectra" charts in Vaadin (see How to create a "spectrum" chart using Vaadin 14+). It turned out that one didn't actually need to create barcharts -- the only real need seemed to be to set the pointwidth to 1. (This solved the "very wide" widths lines when zooming.)
HOWEVER: I think there's a bug in vaadin charts when one has more than 1 series presents and when one zooms: the line moves to an inccorrect position on the x-axis (or the x-axis is no longer placed correctly.) Any thoughts on how to resolve? Here are two screenshots showing the problem. In the first one, only ONE series is visible and the line is at the correct x-axis point of ~598.36. In the second screenshot, though, (where the only change I have made is to enable the 2nd series), the line moves to an INCORRECT x-axis coordinate (it seems like it's ~598.25!!!).
One theory I have is that adding the second series somehow confuses the chart from determining the correct x-axes....maybe because each series has it's own x axis logic in some way? Not sure....(I'm using Vaadin 14 and I tested this both in my dev env and on production.)

Highcharts highstocks - candlestick graph has last value partially cut

In a candlestick graph i am building, the latest bar is cut-off partially such that even the bar is not visible. Thus it's difficult to judge the high and low by seeing the bar.
I'm unable to post a pic now but it's like the last rectangle being cut in half.
I'm tried a lot of options in the api but can't figure out why this is not showing correctly. The chart margin and axis offset options havent' helped. Is there a way i can set the series margin from the plot area so that it displays right.
For this problem, the best solution is to insert a dummy series which should be hidden from every aspect of the chart. So try this, insert a dummy series from the last point of the data series to some extra buffer(as per need). Then remove this series from the chart by explicitly removing it from the legends (using showinlegend),chart(setting linewidth to 0) and from tooltip by having a check in formatter. Hope this solves your problem.
I had the same problem and couldn't figure it out, because no matter how I changed the xAxis.maxPadding or changed the xAxis.max, it would always cut off the last candlestick when I clicked on the range selector.
To solve it, (hack) I just added an extra data point in my series and set it 1 day past the last day and set all values to null.
Without any code or a pic, it's hard to tell the problem, but it sounds like you need to use the max padding option. http://api.highcharts.com/highcharts#xAxis.maxPadding. You may also want to look at endOnTick as well as whether you are setting max on the axis.

Teechart with Candlestick for Delphi

I am using the TeeChart VCL Delphi module. I am trying to plot a candlestick chart. I have the following questions:
When I run the code it shows me the last date data on the right hand side. However, the y-axis is not automatically scaling at all. If I scroll backwards, it automatically adjust the y-axis scales. However, if I go far to the right which is the end, it does not auto-scale the y-axis anymore. What am I doing wrong?
The x-axis is the days of the week. However, I have no data for the weekend. It shows as empty space. How do I remove that?
How do you change the cursor so it shows the date/time for the X,Y you choose?
When I run the code it shows me the last date data on the right hand
side. However, the y-axis is not automatically scaling at all. If I
scroll backwards, it automatically adjust the y-axis scales. However,
if I go far to the right which is the end, it does not auto-scale the
y-axis anymore. What am I doing wrong?
What about setting the Y axis (left axis) to be automatic? For example:
Chart1.Axes.Left.Automatic:=True;
A more drastic solution would be also forcing the chart to repaint after adding each point.
Series1.Add(value);
Chart1.Draw;
If any of that helps please send us a simple example project we can run "as-is" to reproduce the problem here. You can attach your files here.
The x-axis is the days of the week. However, I have no data for the
weekend. It shows as empty space. How do I remove that?
You should do as in the All Features\Welcome!\Chart Styles\Financial\Candle (OHLC)\Axis Labels no Weekends example in the new features demo. This demo is included with registered and evaluation versions. Otherwise you can download it here.
How do you change the cursor so it shows the date/time for the X,Y you
choose?
There are two examples in the demo that can help you on this:
All Features\Welcome!\Tools\Annotation\Annotation Callout
All Features\Welcome!\Tools\Cursor\Synchronizing Two

Highstock graph shows points instead of line at certain zoom levels

I am using a Highcharts Stock graph to show a percentage with respect to time.
http://jsfiddle.net/michaelchart/yYmPR/1/
At certain zoom levels (in this case, when zooming to a timespan of between about 6 and 12 years) the plot strangely turns from a line to sporadic points.
Any ideas as to why this might be? Or is it a bug with Highstock?
You can see an example of a working Highstock graph here http://www.highcharts.com/stock/demo/basic-line.
After posting on the Highstock forum and consequently having an issue posted on github, I found that it was because of the default value of the gapSize option. According to the docs;
gapSize : Number
Defines when to display a gap in the graph. A gap size of 5 means that if the distance between two points is greater than five times that of the two closest points, the graph will be broken.
In practice, this option is most often used to visualize gaps in time series. In a stock chart, intraday data is available for daytime hours, while gaps will appear in nights and weekends.
Defaults to 5.
Setting gapSize to null fixes the problem.
In my particular case, the reason of this problem was bad data output.
Within "series" property, within the "data" array there was a "false" value.
Example:
series : {
"type":"column",
"name":"Test",
"data":[541,784,false,251,353]
}
Corrected the problem in the backend so "false" was interpreted as 0, and everything works now.

Resources