We Keep Coding

How can I label days of month?

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:

Highcharts polar steps

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
}
}

Highcharts y-axis Ceiling not being respected

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

Plotting x and y axis in a JavaScript generated chart with Flot library?

I'm using flot library and I found from the docs that I can send a json object with any option I can right at the charting call.
So let's say I call:
$.plot($("#placeholder"), [ [] ], { yaxis: { show: true, max: 100, min: -100 }, xaxis: { show: true, max: 100, min: -100} });
However this is what I get as result (with a non empty data argument):
But I don't want vertical lines marked at every axis tick, but two lines corresponding to the axis.
I don't want ending with the x=0 and y=0 plots. I would even have to obtains points arrays for it. How can I do this with flot or is there any recommended library to plot x,y points series with not much thrills.

To get lines on the axes, add this to your options object:
grid: { markings: [{ xaxis: { from: 0.0, to: 0.0 }, color: 'black', lineWidth: 1 },
{ yaxis: { from: 0.0, to: 0.0 }, color: 'black', lineWidth: 1 }] };
If the other lines are still present after adding this, please provide a more complete example (e.g. a fiddle).

How change Highchart minimum value

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/