I want my Y-Axis on my grid to increment by 1 (for example: 1,2,3,4,5 and so on).
Currently I have it set like this:
axes: [{
type: 'numeric',
position: 'left',
minimum: 0,
increment: 1,
title: {
text: '',
fontSize: 15
},
fields: 'total',
grid: true
},
In my test data, the field 'total' current largest value is 3. If I set the 'maximum' on the axes to 3, it goes into decimal places and its increment changes to 0.2, but if I set it to 10, it increments correctly.
Set both minimum and maximum property. Add property majorTickSteps and set that to the difference between minimum and maximum. So: minimum: 0, maximum: 3, majorTickSteps: 3.
Related
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 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/
$(function () {
$('#container').highcharts({
chart: {
showAxes : true,
type: 'line',
marginRight: 130,
marginBottom: 25
},
tooltip: {
crosshairs: [true],
shared : true
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
type :'datetime',
tickInterval : 12*30*24*3600* 1000,
min : Date.UTC(2011, 0, 1),
max : Date.UTC(2020, 0, 1),
label : {
align : 'left'
}
},
yAxis: {
title: {
text: 'PRICE Rs. / SQ.FT.'
},
lineWidth: 2,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: [{
data:[2165,1831,2798,2200,2237,2799,2400,2500,2865,2850]
}]
});
});
My x-axis having Years and data series having information which i want to show on Y axis.
When i remove the interval from 2010 to 2022 i . e comment min and max option highcharts draws a graph starting from 1970 , but no points afterwards.
http://jsfiddle.net/R8kx7/3/ here is the link
Based on your comments to #SteveP answer, if you don't want to explicitly pair x values to each y for each series, use the plotOptions.series pointStart and pointInterval properties.
plotOptions: {
series: {
pointStart: Date.UTC(2011, 0, 1),
pointInterval : 12*30*24*3600* 1000
}
},
series: [{
data:[2165,1831,2798,2200,2237,2799,2400,2500,2865,2850]
}]
Updated fiddle here.
Although you are specifying min and max, your data has no x values specified, so it is assuming that the date time values are starting at 0. There are several ways to render the chart you want.
Firstly, you could specify x values in your data points e.g.
{x:Date.UTC(2011, 0, 1),y:2165}
Another way is to not use a datetime axis type, and just specify the categories you want in the x-axis:
categories:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
The second option is probably a bit simpler http://jsfiddle.net/K6xxz/
I have the following gauge chart, the store is loaded from xml file.
var gaugechart = Ext.create('Ext.chart.Chart', {
xtype: 'chart',
width: 600,
height: 200,
insetPadding: 20,
flex: 1,
renderTo: 'gaugeDiv',
store: store,
axes: [{
type: 'gauge',
position: 'gauge',
minimum: 0,
maximum: 100,
steps: 10,
margin: 7
}],
the maximum value is 100, but I want to use a maximum value from the value in the store.
Note: in the store there is actual and max value such as
[{actually:5},{max:10}]
I want a gauge using these value. How can I change this max value?
Use the gaugechart.axes to enumerate and set minimum and maximum values for any axis.