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 'datetime' chart which has one point per day. So my requirement is to have each date displayed on x-axis and value plotted for each date. So I have set the tickinterval as 1 day (24*3600*1000) as follows:
http://jsfiddle.net/vuf5e/1/
However, the x-axis seems to show only Aug28th and chart has two points on either side of it instead of showing one point for Aug27th and another one for Aug28th.
I tried using tickPositions and the chart appears as follows:
http://jsfiddle.net/vuf5e/2/
What is wrong here?
One of the numbers is wrong.
the second position in the tick is 137766608975 but then in the data is 1377666808975 which has a full digit more than the other.
You are in fact missing an 8 somewhere in the middle.
so basically the number on the second tick become smaller than the first one.
[...]
xAxis: {
type:'datetime' , tickPositions:[1377601929269, **137766608975**]
},
series:[{"yAxis":0,"name":"Device_INTERFACE_in_octets--.2","data":[[1377601929269,5.8583],[**1377666808975**,6.6278]]}]
});
});
Linear Dataseries Say all y axis is 0, Autoscaling on y axis is not working as desired.
High stock version - 1.3.1
DataSeries to be plotted,
[[1149724800000,0],[1149811200000,0],[1150070400000,0],[1150156800000,0],[1150243200000,0],[1150329600000,0],[1150416000000,0],[1150675200000,0],[1150761600000,0],[1150848000000,0],[1150934400000,0],[1151020800000,0],[1151280000000,0],[1151366400000,0],[1151452800000,0],[1151539200000,0],[1151625600000,0]]
OR
[[1149724800000,20],[1149811200000,20],[1150070400000,20],[1150156800000,20],[1150243200000,20],[1150329600000,20],[1150416000000,20],[1150675200000,20],[1150761600000,20],[1150848000000,20],[1150934400000,20],[1151020800000,20],[1151280000000,20],[1151366400000,20],[1151452800000,20],[1151539200000,20],[1151625600000,20]]
Try Above series with Y min set to 0 and Y Min to Auto.
I had the same issue with 0 values displayed in the center.
The only way I found to get round it was to either use tickPositions and pass range values across to it for the data based of min/max values and ones in between or to use the tickPositioner call back function to return to go through the data and return the tick values based on these.
Still fairly new to highcharts so there is probably another way I don't know of. If anyone knows how to have 0 values displayed at the bottom of the chart while it auto-scales then please post as I would love to know how/if its possible.
Edit: turns out this isn't really possible currently, only way to get around it is to set min/max values and that won't allow auto scaling but at least it stop there from being any middle 0 values.
I am having a problem with Highcharts y axis alignment with labels and text when there are more than one yAxis and opposite is true.
example
http://jsfiddle.net/EuPwn/17/
Thanks in advance,
Sai
So you have both yAxis on the right but on the same yAxis IDs. I would not do that, honestly. Why not an axis on the left and right? Or if you want both on the right still use 2 different IDs.
Something like this:
http://www.highcharts.com/demo/combo-multi-axes