I am working with the synchronised chart of Highchart. Pretty cool. However, I would like to »dictate« the min and max values for the yAxis. I added these two parameters into the JSON file, but they are not being accepted unfortunately.
JSON file:
"unit": "km/h",
"type": "line",
"min": -2,
"max": 16,
yAxis definition:
yAxis: {
title: {
text: null
},
min: dataset.min,
max: dataset.max
},
but that doesn't work. Any idea why? Here is the original graphic I am working with. Here is a fiddle.
In Highcharts API we can read:
max: number, null
...
If the endOnTick option is true, the max value might be rounded up. (...)
As a solution disable startOnTick and endOnTick options or use tickPositioner function to calculate and set tick postion manually, for example:
yAxis: {
...,
tickPositioner: function(){
var ticks = [],
step = (dataset.max - dataset.min) / 4;
for (var i = dataset.min; i <= dataset.max; i += step) {
ticks.push(i);
}
return ticks;
}
}
Live demo: https://jsfiddle.net/BlackLabel/ev5hz0pk/
API Reference:
https://api.highcharts.com/highcharts/yAxis.max
https://api.highcharts.com/highcharts/yAxis.tickPositioner
Related
I want to create a small graph with just a line.
When I first created I didn't see a big different between the start point and the end point. So I tried to the set the smallest value the same as the min-val. And the biggest value as the max-val on my yAxes.
Here is my code:
var generateNormalChart = function (dataForNormalGraph, randomColors, theLongNameOfTheCoin,currency,exchange,minVal,maxVal,stepsize) {
var ctx = document.getElementById('normalChartGraph' + theLongNameOfTheCoin + currency + exchange).getContext('2d');
var normalChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
fill: false,
borderColor: randomColors,
data: dataForNormalGraph,
pointRadius: 1,
borderWidth: 2
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: false
}],
yAxes:[{
display: false,
ticks: {
max: maxVal,
min: minVal
// stepSize: stepsize
}
}]
}
}
});
};
An example of data I use:
This is the maxVal: 0.0000505
This is the minVal: 0.00005483
This is dataForNormalGraph:
0:0.00005162
1:0.00005124
2:0.0000505
3:0.00005056
4:0.00005089
5:0.0000509
6:0.00005102
7:0.00005067
8:0.00005087
9:0.00005156
10:0.00005173
11:0.00005191
12:0.00005363
13:0.00005276
14:0.00005309
15:0.00005297
16:0.00005231
17:0.00005243
18:0.00005252
19:0.00005271
20:0.00005326
21:0.00005408
22:0.00005483
23:0.00005376
24:0.00005365
Like you can see I commented the step value.
I even tried it with that by calculating the difference between ((the max and min val) / 25) and that was : 1.7320000000000004e-7
I also don't want to see the labels and the Axes value because it takes to much space.
I have 2 photo's like you can see he ignores the max and min val:
What I want but then with the right max and min values
I forgot to give the yAxes values what didn't resulted in a good chart.
The only thing I need to do was to add the
labels: nameOfTheCoins,
so the yAxes have a value
I want to overlay two datetime x-axis which are not from the same daterange but have the same number of points (point index x from series 1 should be next to point index x from series 2).
I tried to achieve this with two x-axis where one being hidden.
I basically seems to work but the bars only align at certain zoom levels.
Zoomed-In:
Zoomed-Out:
Here is a jsfiddle with the settings I tried:
"xAxis": [{
tickInterval: 36e5,
"type": "datetime",
"dateTimeLabelFormats": {
"day": "%H"
},
visible: false
}, {
tickInterval: 36e5,
"type": "datetime",
"dateTimeLabelFormats": {
"day": "%H"
},
}
I think you want to use categories - that way you will get points axis evenly spaced, take a look: http://jsfiddle.net/8wahvryx/2/
"xAxis": [{
"type": "category",
labels: {
formatter: function() {
return Highcharts.dateFormat('%H:%M', this.value);
}
}
}, {
"type": "category",
visible: false
}]
And if you don't want to change your data format, you can override keys from array (by default it is [x, y]) to support names:
plotOptions: {
column: {
keys: ['name', 'y']
}
},
Note: In categorised axis, point.name is used as category name below the point. Use xAxis.labels.formatter or xAxis.labels.format to change timestamps to hours.
The solution from #pawel fus might work in most cases, unfortunately did not for for me.
I ended up using the exact same values for the x-axis of both series and only set a different name for each value.
In HighCharts JS, how can I label the days of the month (ie label the blue bars) with the day of the month under each bar as shown in the following graph (shown in the JSFiddle below). At the moment, HighCharts skips labelling some days. My customer would prefer them to be labelled as consecutive/continuous numbers.
The JS Fiddle for HighCharts is here: http://jsfiddle.net/vecbtw7m/
JavaScript code for HighCharts:
$('#graphContainer2').highcharts({
chart: { type: 'column' },
title: { text: 'Monthly Page Views' },
xAxis: {
type: 'datetime',
title: { text: 'Date' },
min: new Date('2015/10/15').getTime(),
max: new Date('2015/10/30').getTime(),
},
yAxis: {
min: 0,
title: { text: 'Page Views' }
},
series: [{
name: 'Page Views',
data: [
[Date.UTC(2015,9,15), 27], [Date.UTC(2015,9,17), 54],
[Date.UTC(2015,9,20), 42], [Date.UTC(2015,9,24), 13]
]
}]
});
Desired result (in yellow)
You can add label formatter function in xAxis :
xAxis: {
type: 'datetime',
title: { text: 'Date' },
min: new Date('2015/10/15').getTime(),
max: new Date('2015/10/30').getTime(),
tickInterval: 24 * 3600 * 1000,
labels:{
formatter: function () {
return Highcharts.dateFormat('%d', this.value);
}
}
}
Update jsFiddle
It comes down to a combination of two things:
tickInterval
pointRange
Setting both the point range and the tick interval to one day, the axis is aligned and formatted as you describe.
Example:
http://jsfiddle.net/jlbriggs/9cL3z64n/
Adding additional formatting to the labels can clean it all up, otherwise the labels get pretty sloppy.
You can use tickInterval option for the x axis.
Ref:
The interval of the tick marks in axis units. When null, the tick
interval is computed to approximately follow the tickPixelInterval on
linear and datetime axes. On categorized axes, a null tickInterval
will default to 1, one category. Note that datetime axes are based on
milliseconds, so for example an interval of one day is expressed as 24
* 3600 * 1000.
On logarithmic axes, the tickInterval is based on powers, so a
tickInterval of 1 means one tick on each of 0.1, 1, 10, 100 etc. A
tickInterval of 2 means a tick of 0.1, 10, 1000 etc. A tickInterval of
0.2 puts a tick on 0.1, 0.2, 0.4, 0.6, 0.8, 1, 2, 4, 6, 8, 10, 20, 40 etc.
If the tickInterval is too dense for labels to be drawn, Highcharts
may remove ticks.
Code:
xAxis: {
type: 'datetime',
title: { text: 'Date' },
min: new Date('2015/10/15').getTime(),
max: new Date('2015/10/30').getTime(),
tickInterval: 1
},
Result:
Demo: http://jsfiddle.net/jpnL65js/
EDIT
Because of the note:
If the tickInterval is too dense for labels to be drawn, Highcharts
may remove ticks.
you have to use another way, so use tickPositioner function and force the ticks to display.
Ref:
A callback function returning array defining where the ticks are laid
out on the axis. This overrides the default behaviour of
tickPixelInterval and tickInterval. The automatic tick positions are
accessible through this.tickPositions and can be modified by the
callback.
Code:
tickPositioner: function () {
var result = [];
for (i = 15; i < 31; i++)
result.push(Date.UTC(2015, 9, i));
result.info = {
unitName: "day",
higherRanks: {}
};
return result;
}
Demo: http://jsfiddle.net/ezpo47ua/
Result:
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
}
}
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/