I have these 2 fiddles:
https://jsfiddle.net/ny6wk3cm/ ceiling not working
and https://jsfiddle.net/ap7rswyc/ ceiling working.
I can see the ceiling not working properly for the first one, while it's working fine for the second fiddle, which seems weird as all the other config remains the same for both.
Ceiling works similar to max, so if endOnTick option is true, the ceiling value might be rounded up. To have precise values set:
yAxis: {
...,
tickAmount: undefined,
ceiling: 36,
endOnTick: false
}
Live demo: https://jsfiddle.net/BlackLabel/a81kx32h/
API Reference: https://api.highcharts.com/highcharts/yAxis.endOnTick
Related
If you look at the JSFiddle below, you'll see that when it renders the chart, the upper-most values are not displayed on the chart (10,000/10,000/80,0000/20,0000).
I can't seem to figure out why it doesn't display those top values.
I also noticed that it doesn't display the -20,000 value for the Weight channel.
https://jsfiddle.net/BBousman/h4gs7erk/
-
You need to enable showLastLabel option:
yAxis: [{
...,
showLastLabel: true
}, ...]
Live demo: https://jsfiddle.net/BlackLabel/142uc9Ls/
API Reference: https://api.highcharts.com/highstock/yAxis.showLastLabel
HIGH CHARTS
In addition to this question, I would like to ask another question here in this thread.
How to add extra tears(ticks), in such a way, the green bar dataLabel, does stay inside plotting area, rather, going out of plotting area or made hidden. JSFIDDLE
There are lots of ways to do this. But quickest one is adding a max value to yAxis with using yAxis.max.
yAxis: {
allowDecimals: false,
max: 6000
},
Here is the working example: jsFiddle.
OR
You can use the combination of yAxis.tickAmount and yAxis.tickInterval like this;
yAxis: {
allowDecimals: false,
tickAmount: 10,
tickInterval: 1000
},
Here is the working example: jsFiddle.
Besides setting a new max property or trying a different combination of ticks, you can simply set overflow property with 'none' value and crop with false. This way you can display data labels outside the plot area.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.overflow
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.crop
Example:
http://jsfiddle.net/2qtpx0rL/
In this Highcharts chart I have a line with data points that end in point 5, but the xAxis ends in point 6 even though there is no data in that point. This is because I set endOnTick:true, question is what is the logic behind endOnTick? why is it adding a new point and doesn't end with the data?
Javascript
var settings =
{
"chart": {
"type":"line"
},
"xAxis": {
"endOnTick":true
},
"series":[
{"name":"series1","data":[[1,1200],[2,2200],[3,3200],[4,1800],[5,1500]]},
{"name":"series2","data":[[1,1050],[2,2050],[3,1650],[4,1450],[5,1350]]},
{"name":"series3","data":[[1,1250],[2,2250],[3,1850],[4,1650],[5,1550]]}]
}
$('#container').highcharts(settings);
The logic is pretty much what you would expect. If endOnTick is true, it will extend the axis to make sure it stops on a tick. However, it is not very visible in your example.
If you look closely at the x-axis you can see that if you have endOnTick: false the axis goes very slightly beyond 5. This is because of maxPadding defaulting to 0.01 for the x-axis. This very slight extension beyond 5 means that setting endOnTick: true has to extend the axis to the next tick.
You can test this by setting maxPadding: 0 and endOnTick: true. Then you see that as the axis does not go beyond 5, it does not generate the extra point.
Note that these settings have differing defaults for the x-axis and the y-axis.
If I change the y-axis type to logarithmic on the meteogram example of the highcharts demo, the temperature line stops being visible. Is this a bug or is there something in the code preventing it from displaying when in logarithmic mode?
The only change I made to the demo was to add type: 'logarithmic' on line 492:
yAxis: [{ // temperature axis
type: 'logarithmic',
See this jsFiddle.
Any ideas? Thanks!
It seems like this is a (solvable and unknown?) bug indeed.
Somehow a logarithmic y-axis is not compatible with a negativeColor attribute.
Go to line 594 of your meteogram example and remove the negativeColor: '#48AFE8' attribute:
592| zIndex: 1,
593| color: '#FF3333',
594| negativeColor: '#48AFE8' << remove this line
Now the logarithmic plot will work as expected. See DEMO.
I have also set the y-axis min, max properties and both startOnTick and endOnTick to false to make the graph look a bit better. I hope this helps you out :)
Update 1: This bug has now been reported to GitHub
Update 2: Highcharts developers have solved this bug as of June 3, 2015 in commit fde07c2
see this jsfiddle: http://jsfiddle.net/k0hrz224/2/
i want the max value of the yaxis to be 100. currently, as you can see, it is 150 and i dont know why, because i explicitly set max: 100 of this yaxis.
i know that changing (on line 101)
min: -25
to
min: 0
seems like a solution. however i need min: -25 because i want to display A and B as it is shown in the example.
Things can get a little odd when you have multiple y axes.
Add this to your chart:
chart: {
alignTicks:false
}
Which will stop the different axes from trying to resolve with each other, and stop your axis at 100.
Example:
http://jsfiddle.net/jlbriggs/k0hrz224/4/
Reference:
http://api.highcharts.com/highcharts#chart.alignTicks
finally i managed to do it. i "hardcoded" the ticks on my own:
tickPositions: [-25, 0, 25, 50, 75,100]
then i experienced the desired behavior, i.e., no wrong autoscaling of any axis.