Highcharts xAxis datetime from start - highcharts

As screenshots below, how can I set the first datetime from start?
Code Demo Here:
http://jsbin.com/wegunetayu/edit?js,output
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
title: null,
series: chartData,
tooltip: {
dateTimeLabelFormats: {
hour: '%A, %b %e, %l %p'
},
},
xAxis: {
tickLength: 0,
labels: {
align: 'left'
},
dateTimeLabelFormats: {
hour: '%l %p'
},
type: 'datetime'
},
yAxis: {
title: null
}
});
Screenshots:


Add these parameters to your xAxis:
xAxis: {
startOnTick: true,
minPadding: 0.01,
...
I updated your JsBin
This solution work only there is enough space to show all months on the axis

Related

Highchart flags goes out when range selector is set to entire size

As you can see here: live example
The main problem is when range selector is set to full size, we can see only two lines, without flags at the left side. If range selector is set to smaller range and you drag it to left side, it seems like everything is ok with flags. But if a little part of line will be at chart, everything is going wrong.
I tried to sort series in ascending order, but it didn't make any results.
Still have no clue what's wrong.
Highchart setup:
{
title: {
text: 'Problem with flags'
},
chart: {
zoomType: 'x',
},
yAxis: {
min: 0,
startOnTick: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%H:%M',
second: '%H:%M',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
},
showEmpty: true
},
credits: {
enabled: false
},
lang: {
rangeSelectorZoom: ''
},
rangeSelector: {
allButtonsEnabled: false,
inputEnabled: false,
buttonTheme: {
visibility: 'hidden'
},
labelStyle: {
display: 'none'
}
},
plotOptions: {
series: {
turboThreshold: 0
}
},
legend: {
enabled: true
},
series: SERIES ARE AT FIDDLE
}

I found solution, you should set xAxis.ordinal field to false, here is link

Highchart ,display time in regular interval

Im trying to display a simple graph with x axis as time and y axis as points.
But, the time values seems to be off a little bit. The distance between 2017-10-06 &&= 2017-10-07 is smaller than 2017-10-10 & 2017-10-11 even though they are at same 1 day gap. How do I fix this?
Here is my code
function generatepointgraph(data) {
// Create the chart
Highcharts.setOptions({
global: {
useUTC: true
}
});
Highcharts.chart('points-container', {
chart: {
type: 'spline'
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y-%m-%d',
week: '%Y-%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
yAxis: {
title: {
text: 'Weighted pts'
}
},
scrollbar: {
showFull: true
},
rangeSelector: {
enabled: false
},
title: {
text: 'Pts vs time',
},
series: [{
name: 'Points',
data: data,
step: true,
tooltip: {
valueDecimals: 2
}
}]
});
}

Highchart data series on wrong y-axis

I am struggling to solve this issue where I have a Highcharts graph with temperature and humidity.
It has two y-axis, one for temperature and one for humidity.
I have specified that humidity should go to the y-axis id 1, but it does not.
It puts the line in, but it is 'plotted' to the temperature axis values.
See this jsfiddle
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x',
type: 'spline'
},
title: {
text: 'Temperatures - Vdrivhus'
},
subtitle: {
text: 'last hour'
},
xAxis: {
type: 'datetime',
// dateTimeLabelFormats.setOption("minute", "%H:%M");
dateTimeLabelFormats: { // don't display the dummy year
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Humidity',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} %',
style: {
color: '#4572A7'
}
},
min: 50,
max: 100,
opposite: true
}],
tooltip: {
shared: true
},
series: [{
name: 'Temperature',
// Define the data points.
marker: {
enabled: false
},
yaxis: 0,
tooltip: {
valueSuffix: '°C'
},
data: [
[1387521917000, 5],
[1387522299000, 5.2],
[1387522531000, 5.1],
[1387522809000, 5.1],
[1387523536000, 4.8],
[1387523745000, 4.7],
[1387524008000, 4.7],
[1387524303000, 4.8],
[1387524667000, 4.9],
[1387524904000, 4.9],
[1387525245000, 5]
]
}, {
name: 'Humidity',
marker: {
enabled: false
},
yaxis: 1,
tooltip: {
valueSuffix: '%'
},
data: [
[1387521917000, 74.4],
[1387522299000, 73.6],
[1387522531000, 74],
[1387522809000, 74],
[1387523536000, 82.5],
[1387523745000, 82.4],
[1387524008000, 78.7],
[1387524303000, 75.9],
[1387524667000, 74.6],
[1387524904000, 74.5],
[1387525245000, 74.2]
]
}, ]
});
});
//]]>
Can anyone help me solve this?

It is very simple, yaxis option should be yAxis since JS is case-sensitive.
I think that's it: jsFiddle

DateTime xAxis Label Not Displaying Correct

I have a data set which is loading correctly but the xAxis label is not displaying the same as JSFiddle using the format specified. The JSFiddle share below is the exact code I am using and it displays perfect with the day of the week Sun - Sat. However, when I run it in my application it displays 00:00 and 12:00 repeated for each the 7 days. The only code change in JSFiddle was the data loading from eval(data.d.Histogram) to the actual array.
http://jsfiddle.net/ddelella/bZmtT/
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {},
credits: { enabled: false },
title: { text: null },
legend: { enabled: false },
plotOptions: {
series: { borderWidth: 0, pointPadding: -.3 }
},
xAxis: {
tickLength: 2,
minPadding: 0,
maxPadding: 0,
type: 'datetime',
dateTimeLabelFormats: {
day: '%a'
}
},
yAxis: {
title: { text: null },
allowDecimals: false,
min: 0,
gridLineWidth: 0
},
series: [{
data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
type: 'column',
name: 'Tractor Quantity',
pointStart: Date.parse("12/31/1899 00:00"),
pointInterval: (24/288) * 3600 * 1000
}]
});
});

It is caused by other date formats, which are default ones, for example, set hour: '%a' and probably will work.
See fixed example for one graph, and one with reproduced issue: http://jsfiddle.net/bZmtT/1/

Highcharts: Remove space between plot border and actual chart

We are migrating from a flash based charting library (FusionCharts) to a JavaScript based one (HighCharts).
This is what our current flash charts look like
And this is what I've got so far with HighCharts.
How can I remove the space (marked with big dumb red arrows) between the plot border and the actual chart data?
Here's my code: http://jsfiddle.net/ChrisMBarr/7JAcN/1/
var chart = new Highcharts.Chart({
chart:{
renderTo: 'container',
type: 'areaspline',
plotBorderWidth: 1,
spacingTop:2,
spacingRight:5,
spacingBottom:5,
spacingLeft:2,
borderWidth:1,
borderRadius:0,
borderColor:'#999'
},
credits: {
enabled: false
},
title: {
text: 'Total spam in the last 7 days'
},
legend: {
verticalAlign: 'bottom',
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
xAxis: {
allowDecimals:false,
categories: [
'Thu 2/14',
'Fri 2/15',
'Sat 2/16',
'Sun 2/17',
'Mon 2/18',
'Tue 2/19',
'Wed 2/20'
],
labels: {
staggerLines: 2
},
tickmarkPlacement: 'on',
},
yAxis: {
allowDecimals:false,
alternateGridColor: '#F7F7F7',
title: {
text: 'Number of Emails',
margin:5
}
},
tooltip: {
formatter: function() {
var isSpam = this.series.name === _chartOptions.series[1].name
return ''+this.x +': <strong>'+ this.y +(isSpam ? " Spam" : "") +' Emails</strong>';
}
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
"name": "Total Mail",
"color":"#339999",
"data": [2,3,4,7,8,8,8]
},{
"name": "Spam",
"color":"#003399",
"data": [2,2,4,4,4,6,8]
}]
});

This might help:
xAxis: {
min: 0.5, max: 5.5
...
where max = number of data point minus 1.5

You should use minPadding/maxPadding parameters but it doens't work with categories. So I suggest to remove categoreis, use min value and tickInterval
http://jsfiddle.net/7JAcN/3/
http://api.highcharts.com/highcharts#xAxis.minPadding
xAxis: {
allowDecimals:false,
minPadding:0,
maxPadding:0,
/*categories: [
'Thu 2/14',
'Fri 2/15',
'Sat 2/16',
'Sun 2/17',
'Mon 2/18',
'Tue 2/19',
'Wed 2/20'
],*/
labels: {
staggerLines: 2
},
tickmarkPlacement: 'on',
},

The best way to remove paddings is to add pointPlacement: 'on'
plotOptions: {
areaspline: {
pointPlacement: 'on'
}
}

With option "tickmarkplacement" set to "on", the xAxis "startontick" option might help you:
xAxis: {
startOnTick: false,
tickmarkplacement:"on",
...
see
this jsfiddle, forked from the Highcharts API documentation

Resources