I am trying to adjust the scales on my yAxes and cannot find any
information that isn't outdated.
Basically, I want my yAxes to go from 0 - 100 with steps of 25.
https://codepen.io/brycesnyder/pen/wmJKyv
yAxes: [
{
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 10,
max: 100
}
}
]
To do this, change stepValue: 10 to stepSize: 25, and remove steps: 10,.
See chart.js docs
I am working with a sample here:
var startDate = new Date(Date.UTC(2016, 6, 28, 0, 0, 0, 0));
var endDate = new Date(Date.UTC(2016, 6, 28, 0, 0, 0, 0));
endDate.setHours(startDate.getHours() + 9);
var dataSet = [{"data":[[1469664000000,0]],"color":"#FF0700"},
{"data":[[1469667600000,0]],"color":"#FF0700"},
{"data":[[1469671200000,0]],"color":"#FF0700"},
{"data":[[1469674800000,0]],"color":"#FF0700"},
{"data":[[1469678400000,0]],"color":"#FF0700"},
{"data":[[1469682000000,0]],"color":"#FF0700"},
{"data":[[1469685600000,0]],"color":"#FF0700"},
{"data":[[1469689200000,0]],"color":"#FF7400"},
{"data":[[1469692800000,0]],"color":"#006900"}];
var options = {
series: {
stack: true,
bars: {
show: true
}
},
bars: {
lineWidth: 0,
align: "center",
barWidth: 1,
horizontal: true,
fill: 1,
},
yaxis: {
axisLabel: "MachineName",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
ticks: []
},
xaxis: {
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
//ticks: [[0, "1:00"], [1, "2:00"], [2, "3:00"], [3, "4:00"], [4, "5:00"], [5, "6:00"], [6, "7:00"], [7, "8:00"], [8, "9:00"]],
//labelWidth: 10,
//tickLength: 10,
//tickFormatter: formatXAxis,
//tickSize: 360000,
//minTickSize: 1,
//min: 0,
//max: 10
//mode: "time",
//timeformat: "%H:%M",
//minTickSize: [1, "hour"],
////color: "black",
//min: startDate.getTime(),
//max: endDate.getTime()
}
};
$.plot($("#machineStatus"), dataset, options);
I end up with a graph where the xaxis labels are not anything like they should be. See below
The design is an hourly status of a machine (red = not running, green = running, etc.) So the intent was to have the last 9 hours of runtime showing and put x axis labels for the top of the hour (1:00, 2:00, etc.).
Since this is a horizontal stack of multiple data sets, this appears to really confuse the xaxis tick calculation. I tried setting the min/max to equal the start and end times of the dataset, but I would get no graph.
I stopped using the "time" mode, hoping I could use the ticks array and force a set of ticks and labels, but that doesn't work. I tried the tickFormatter to force calculating the ticks, but that didn't work either.
You can see all the things I've tried on the xaxis and have commented out. I actually don't want the ticks to have any relationship to the actual data. I am testing this graph at the hour and minute level, so theoretically my data sets are either 9 or 540 bits of granular information. I still want the xaxis ticks to stay at a fixed set of 9 values spread evenly. Any ideas how I can do that?
FYI, I apologize for no jsfiddle. I've never been able to get one to work.
Update. Selected answer works! Here's a screenshot of a 540 datapoint to the minute level. The dataset is too big to post. Thanks again Raidri
I got it to work with time mode and a vertical bar chart:
Relevant options:
series: {
stack: true,
bars: {
lineWidth: 0,
align: "left",
barWidth: 3600000,
//horizontal: true,
fill: 1,
show: true,
}
},
...
xaxis: {
min: startDate.valueOf(),
max: endDate.valueOf(),
mode: "time",
timeformat: "%H:%M",
...
Also the values for your datapoints are changed to 1 so the bars here have a height of one.
If you change it to minute values, you have to change the barWidth option accordingly.
See this fiddle for the full example.
I'm trying to make a Highcharts polar chart, see this fiddle: http://jsfiddle.net/mgwf23me/
yAxis: {
min: 0,
max: 11,
labels: {
enabled: false
}
},
The problem is that the yAxis max seems to go by steps of 5. With max on 11, the rendered max step is 15.
How do I change this behaviour to be steps of 1?
This is due to endOnTick being true. From the max API description:
If the endOnTick option is true, the max value might be rounded up.
Set this to false, and the axis should have the correct height.
You may also want to adjust the ticks to make the lines show up appropriately. This can be done in a number of ways, using tickPositions, tickPositioner, tickInterval...
My simple suggestion is to do it like this (JSFiddle):
yAxis: {
min: 0,
max: 11,
endOnTick: false, // For axis height
tickPositions: [0,11], // For grid lines
labels: {
enabled: false
}
}
I have a problem with Highcharts where the Ceiling of one of my two y-axes is not being respected.
Y-axis "1" represents percentage values, so has a Floor of 0 and a Ceiling of 100.
Y-axis "2" represents monetary values, so has a Floor of 0 and a Ceiling of null.
For some reason, the labels for y-axis "1" go up to 150.
If I change the corresponding series data so that the value 0 is changed to 20, the problem seems to go away and the labels stop at 100 as they should.
var dataX = [0, 67, 43, 100, 100, 80];
var dataY = [950, 900, 807, 650, 600, 450];
$(function () {
$('#container').highcharts({
series: [{
name: 'Series 1',
data: dataX,
yAxis: 0},
{
name: 'Series 2',
data: dataY,
yAxis: 1}],
yAxis: [{
floor: 0,
ceiling: 100,
title: {
text: '1'
},
},
{
floor: 0,
ceiling: null,
title: {
text: '2'
},
opposite: true}]});});
http://jsfiddle.net/2bzew/2/
Can anyone explain why this is happening?
I had a similar problem, but I found that using the following solves the issue:
maxPadding: 0,
minPadding: 0,
The default for these values are both 0.05 so that will be added to your data and cause highstock to make the y axis bigger than intended. Zeroing them out seems to fix the problem for me.
I also recommend to set the following so that maximum value still has a label:
showLastLabel: true,
http://jsfiddle.net/M4bVz/
From Highcharts API:
When using multiple axis, the ticks of two or more opposite axes will automatically be aligned by adding ticks to the axis or axes with the least ticks. This can be prevented by setting alignTicks to false. If the grid lines look messy, it's a good idea to hide them for the secondary axis by setting gridLineWidth to 0. Defaults to true.
I have updated your fiddle with these corrections.
chart: {
alignTicks: false
},
...
yAxis: [{
...
gridLineWidth: 0,
...
http://jsfiddle.net/2bzew/3/
You can always create your own tickPositioner, or set directly tickPositions: http://jsfiddle.net/2bzew/4/
See docs and more examples:
tickPositioner
tickPositions
For my highchart, I want to set maximum value of 100 and minimum value of 1.
When I try to code like this, it outputs is 0-100 not 1-100.
If I change or remove max range, it works fine for small values of y.
yAxis: {
min:1,
max:100,
reversed: true,
title: {
text: 'Rank'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
You can try
chart.yAxis[0].setExtremes(1,100);
http://api.highcharts.com/highcharts#Axis.setExtremes
If it is dynamic data/tick data you can set
startOnTick : false
This problem is discussed here also http://forum.highcharts.com/viewtopic.php?f=9&t=6862
You can force the y-axis to have specific tick intervals using the tickPositioner function in the y-axis e.g.
tickPositioner: function () {
var positions = [1, 25, 50, 75, 100];
return positions;
}
http://jsfiddle.net/cU2md/