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.
Related
I am working on real time data stream with spline chart https://www.highcharts.com/demo/dynamic-update/dark-green. Here i want to set fixed y-axis scale (I know my data range from 0 to 4 max) but here chart update dynamically.
Is it possible to set fixed y-axis so that chart update as per fixed y-axis scale.
For any axis you can set a minimum and a maximum value with axis.min (doc) and axis.max (doc). If you want to be very precise (or your ticks are causing problems) you might have to disable startOnTick and endOnTick to set your specific values, as described in the documentation of min and max.
For example (JSFiddle demonstration):
yAxis: {
min: 0.25,
max: 0.75,
startOnTick: false, // optional
endOnTick: false, // optional
// ...
}
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/
I want to change the axis of the values while leaving the drawing maximum,minimum of the point and dot of values in graph.
I did the erasing of the axis of the value.
I want to add the value what I want at each end of the axis.
If you have any knowledge of it, please let me know.
I want to solve this problem. thank you! :)
For displaying labels on the begging and the end of the axis use axis.showFirstLabel/showLastLabel option (set them to true). You might need to set axis.startOnTick/endOnTick to true.
If you want to change when the labels are displayed inside the axis - you can set axis.tickPositions.
xAxis: {
endOnTick: true,
showFirstLabel: true,
startOnTick: true,
endOnTick: true,
// tickPositions: [1, 3, 5]
},
example: http://jsfiddle.net/uqf61ppv/
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.
I have a time series chart in Highcharts where I would like users to be able to zoom in on specific date ranges. This is possible by setting zoomType: 'x'. However, once the chart is zoomed, the Y-axis does not rescale to best fit the visible data. For instance, if the original Y-axis runs from 0 to 100, and I zoom on an area with data that only runs 91 to 99, then I probably want the Y-axis to change to be 90 to 100 or something similar. Basically, I want figure out how to get Highcharts to re-run its axis-scaling logic considering only the visible data.
A halfway measure is to set zoomType: 'xy' which allows the user to draw a rectangle and zoom on that rectangle. However, this is inconvenient for the user in this context, as all they really want to be able to do is isolate a date range and then study the variation in the data in that range.
If you want to stick to highchart.js and not using highstock.js (as contrary to what they were suggesting here: http://highslide.com/forum/viewtopic.php?f=9&t=13983), you can do the following with your y axis:
yAxis: {
title: {
text: 'Number of appartements'
},
min: null, // Will for min and max to adjust when you zoom
max: null, //
startOnTick: false,
minTickInterval: 1,
showFirstLabel: false
},
It works just fine for me,
Quentin