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.
Related
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
Highcharts columns sometimes don't make proper use of the available height, in some cases leaving nearly the upper half of a chart empty. After fiddling with the official example charts I noticed that the y-axis max extreme (internally) seems to be dependent on the chart's container height.
For example, the Highcharts example for stacked column chart:
The original example (container height of 400px) has a max of 12.5 for the y-axis with the largest columns having a value of 11. ~90% of the chart height are used.
When modifying the height to 300px, y-axis max changes to 15, so that only ~75% of the height is used.
When modifying the height to 200px, y-axis max changes to 20, only ~55% of the height being used.
Is there a way to improve this behavior without programmatically setting the axis extremes whenever the displayed data changes? You might argue that applying such a small height to a column chart is a weird thing to do, but this is just an example, I have seen similar behavior with larger charts (having other data).
This is related with fact, that defaulty highcharts has enabled maxPadding. Set that parameter as 0 to fillout area more efficient.
yAxis: {
maxPadding:0
}
The example charts could be fixed with Sebastian's answer. After applying the change to my own chart, I noticed another problem that screwed up the scale even more, but was not part of this question - adding this as another answer, just for the sake of completeness.
My chart consisted of combined column/line chart with a 2nd y-axis. Depending on its values, the line chart series had strange effects on the scale of the columns (even if the line chart series was empty). Doing some more research I found this SO answer pointing me to Highcharts' alignTicks option, setting it to false resolved the issue.
The problem is that, if I try to change the lowest point to somewhere higher, the entire chart will be lowered severely.
How do I adjust each point with no above mentioned issue?
P.S. I use Highchart's Highstock.
It would be helpful if you could show a JsFiddle with the actual working code. Without knowing what exactly is going on with your chart it's difficult to figure out what the issue is and how to fix it.
Have a look at the yAxis - Highstock API Reference, you could potentially make use of min or max to counteract the scaling. Again though, without seeing your code it's tough to know.
If I understand your problem, you are trying to set the 7th point from currently at ~150 to something really high, say 5000? I did not notice any real change in the position of other points if the new value was under 1500 (or something around twice the first point)
Appears that your chart is set to comparison mode, hence, I believe, the default max and min are (100% & -100%) by default, this is w.r.t. to first point of the series. Highcharts would auto adjust these extremes if any of the points were to lie outside this range, you could force an override using yAxis.min & max.
For instance, you can set yAxis.min to -100 and yAxis.max to 100 like this
yAxis: {
min:-100,
max:100
}
Play around with the min and max to get to the values that suits your data the most, do remember these are % comparison to the first point. Any points outside these ranges would not show in the chart.
#jsFiddle
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.
Introduction
I am using the TChart component and am finding the options rather confusing and hard to find what I need.
The Left Axis of the chart has a minimum of 0 and a maximum of 5000, the Bottom Axis has a minimum of 0 and a maximum of 52 (weeks in a year).
In my chart I have 2 series that are populated based on values from a record I have created which can be edited at runtime, everything is working good so far.
Problem
Take a look at the below image of part of the chart filled with some random values:
I am not sure if such an option exists or not, but notice from week 4 onwards where no values have been added there is a solid red line.
I don't want the chart to plot values that are less than 0, so in this example from week 4 onwards there should be no more lines (I can confirm that from week 4 onwards I have the values set at -1)
Week 1 to 4 does not show this bottom red line, obviously because the values are greater than 0 and are therefore plotted above the line, but this should make my problem a bit more clearer.
So, how do I prevent the chart from plotting / drawing values that are less than 0, importantly for the Bottom Axis of the chart?
I am sure there must be a simple option somewhere, I just cannot find it if there is one as I am not too familiar with the TChart Component.
You have the possibility when adding values to a series to add them as null.
This will prevent them from showing.
Ken is correct saying that a tricky situation is to handle a single value surrounded by null values.
Picking another series type than FastLine and show dots as well as lines might work better.
For a FastLine series to show gaps, set:
Series1.IgnoreNulls := False;
And to discriminate values below zero:
if (y < 0) then
Series1.AddNullXY(x, y, '')
else
Series1.AddXY(x, y, '');
if y < 0 then
LineSeries1.AddXY(x, y, '', clNone)
else
LineSeries1.AddXY(x, y, '', clRed);