Highcharts upgrade from version 5 to version 7 is causing negative ticks on x and y axes even when no negative data exists. Various chart plots are wrongly displaying negative axes. Instead the expectation is that the axes must start at 0 (min: 0 is given) and must plot only the positive ticks (tickAmount: 5 is given).
This worked perfectly with version 5 but is behaving weird with version 7.
The left picture is version 7 chart. Look at the starting tick, -2.5, whereas there are no negative values, so it must start at 0. Also observe the last tick is not appropriate width as the other tick intervals and ends abruptly in between.
Here is the link for demonstration of the issue: https://jsfiddle.net/3awvyn0b/3/, see config for x-axis which is not being reflected in the plot:
xAxis: {
tickAmount: 5,
min: 0
},
If I remove tickAmount for the x-axis, the negative ticks are resolved but then the ticks are not correctly marked.
What has changed in version 7 that I need to handle?
Since this is a regression issue (bug report here: github.com/highcharts/highcharts/issues/13749#issue-641882231), the suggested workaround for now is to either
use even number of ticks on the chart. So instead of using tickAmount: 5 I'm now using tickAmount: 6 and that has resolved the negative ticks issue.
or along with the tickAmount (either odd or even tick number, as the need maybe) set endOnTick: true for the xAxis
Related
My xAxis is displaying the years with decimals depending on the width of the screen, so if its small it will display(2012,2013,2014...) but when I increase the width of the screen it will display (2012, 2012.1, 2012.2, 2012.3 ...) and the decimal places change depending of the width(2012, 2012.5, 2013 ...)
I know that tickPixelInterval has some effect on that but I don't know what value to use, I`ve tried:
xAxis: {
tickPixelInterval: 100, //also tried 10 and 1 and 1000 even null
crosshair: true
}
What can I do so the chart only displays the whole number of the years (2012, 2013, 2014) not depending on the screen size and NOT giving an specific width to the div that renders the chart?
http://jsfiddle.net/antonioj1015/ff2m2bsx/7/
tickPixelInterval will give a setting of how far apart ticks should be - that won't help in your situation, and will in fact make sure the problem persists.
What you want is just tickInterval, and set it to 1, since your year numbers are in increments of 1:
http://jsfiddle.net/ff2m2bsx/8/
if you won't always have increments of 1, another option is the allowDecimals property:
http://jsfiddle.net/ff2m2bsx/9/
References:
http://api.highcharts.com/highcharts#xAxis.tickInterval
http://api.highcharts.com/highcharts#xAxis.allowDecimals
A 3rd option is using a datetime x axis type, and setting the dates as your x axis values, and setting your tickInterval to one year.
http://api.highcharts.com/highcharts#xAxis.type
I am playing with a chart with a one data point.
Here is the jsfiddle demo: http://jsfiddle.net/mddc/mfwyoj7j/7/
I notice that if I add
minRange: 1
-1 or 1 will show up on both sides of the data point on the X axis.
I am new to Highcharts. What does minRange=1 mean here? If it is useless, then it should not create any problems, right?
Is this a bug in Highcharts?
Thanks and regards.
See highcharts API doc here: http://api.highcharts.com/highstock#xAxis.minRange
minRange: the minimum range to display. The entire axis will not be allowed to
span over a smaller interval than this. For example, for a datetime
axis the main unit is milliseconds. If minRange is set to 3600000, you
can't zoom in more than to one hour.
So it is used to limit the zoom-in: you will not be able to zoom if the xAxis display less than 1
I have a series of data collected every 15 minutes for a few weeks. Unfortunately, there's a week of missing data in the middle. This is just a fact of my business. When I use Highcharts to chart this data, it compresses the x-axis (time), skewing the chart. For example, the x-axis has major ticks every 2 hours until the missing week. Then it jumps to major ticks of days.
Regardless of the data, I need the x-axis to remain consistent. If this causes a large gap in the diagram, so be it.
I have skimmed the documentation but found nothing. If anyone could direct me to the relevant page that would be great. Thanks!
Refer: https://stackoverflow.com/a/13439281/1566575
You will need to set the xAxis.ordinal property to false, this is true by default. True value indicates the points should be placed at fixed intervals w.r.t space (pixels), and False changes points to be placed at fixed intervals w.r.t. time
xAxis: {
ordinal: false
}
Linear x-axis | Highstock # jsFiddle
Docs:
http://api.highcharts.com/highstock#xAxis.ordinal
I am trying to set my X and Y axes to have set minimums, maximums and intervals. Easy enough according to the docs - and indeed I have had no problem working with Highcharts to date - in fact the complete opposite, it's an awesome, awesome tool. However, when I add errors bars to my line series', it seems to knock out the x-axis - http://jsfiddle.net/Su44W/
Simply changing to series' type to arearange (http://jsfiddle.net/46dsn/1), providing the same data points [x, low, high], the chart now respects my min, max and tickInterval on the x-axis. So this begs the question, is this a bug or and I doing something wrong?
From my understanding the errorbar causes the axis to consider itself part of a "column-like chart". That is, the points on the axis have a span. The result of this is that this piece of code is ran to prevent more ticks than there are points (found on line 7194 of the source):
// In column-like charts, don't cramp in more ticks than there are points (#1943)
if (axis.pointRange) {
axis.tickInterval = mathMax(axis.pointRange, axis.tickInterval);
}
I'm not exactly sure how this solves the problem, but in some way setting the pointRange of the errorbar series causes the axis to use that pointRange for the axis as well. I'm guessing it just uses the maximum point range of all series, or something similar. This means your specified tickInterval will be the "max" in the above mathMax-function. Like this:
{
name: 'Series 1 error bars',
data: [
[4,7.26,7.34],
[12,6.85,7.06],
[26,6.92,7.12]
],
linkedTo: ':previous',
color: "#013879",
zIndex: 0,
whiskerLength: 7,
type: 'errorbar',
pointRange: 0
}
Check this JSFiddle link for pointRange in action.
The negative effect that this will have is that the top and bottom line for your errorbars will have very short width. You can counter this by specifying a pointWidth for the series as well, as in this JSFiddle demonstration.
On highcharts 3.0.0 (and all prior versions that I used), I was able to position datalabels outside of the plot area.
Specifically I display a label whenever the y-axis value is 0. And I display it under the chart line, so they end up under the x-axis.
To do this, I specified a "y" of 18 in plotOptions > series > dataLabels > y. This did the job of positioning it where I wanted.
Since upgrading to 3.0.6, this no longer happens. Instead the "y" value gets "bounced" off of the x-axis. So a y of 0 sits the label just above the axis. A y of -18 raises it 18 pixels up, but so does a y of 18.
Is this a bug, or intentional behaviour? Is there anything I can do to fix this problem, other than going back to 3.0.0?
Thanks
As per my comment on the question, the solution is to add
crop: false,
overflow: 'none'
I'll leave this question up in case it helps someone else though.