I'm using Chart.js version 2.7.1 and I am dynamically updating my Line chart when temperature data comes in.
The problem is that the lines never pass the halfway mark of the x axis in time. Every time I update, the chart auto scales the right side ( max time ) of the x axis to be further out, so my data never approaches the right side of the chart. What I want is for the line to approach the right side, and only a small margin of time is extended into the future for the x-axis each time I update. How can I accomplish this?
Here is how I configure the chart:
var ctx = document.getElementById('tempChart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
legend: {
display: true
},
datasets: [{
fill: false,
data: [],
label: 'Hot Temperature',
backgroundColor: "#FF2D00",
borderColor: "#FF2D00",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
},
{
fill: false,
data: [],
label: 'Cold Temperature',
backgroundColor: "#0027FF",
borderColor: "#0027FF",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
}]
},
options: {
animation: false,
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time ( UTC )'
},
type: 'time',
time: {
tooltipFormat: "hh:mm:ss",
displayFormats: {
hour: 'MMM D, hh:mm:ss'
}
},
ticks: {
maxRotation: 90,
minRotation: 90
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature ( Celcius )'
},
}]
}
}
});
Here is the chart:
as you can see in the following snippet and thanks also to Daniel W Strimpel for creating the initial snippet, you problem is in the hot and cold temperature data.
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
both of those arrays have n number of entries in the end missing the y coordinate including the temperature value. I recreated your scenario by deleting the y for the 5 last entries of the cold and hot temperatures data.
The chart will add the date to the x axis, but it will not add a temperature value and the line will not show up.
{x: new Data(2019, 0, 14, 1, 26, 0) }
The code snippet recreates your scenario, you can run it to understand the problem and fix it by adding the y value to the last 5 entries in the getHotTempData and getColdTempData
var ctx = document.getElementById('tempChart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
legend: {
display: true
},
datasets: [{
fill: false,
data: getHotTempData(),
label: 'Hot Temperature',
backgroundColor: "#FF2D00",
borderColor: "#FF2D00",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
},
{
fill: false,
data: getColdTempData(),
label: 'Cold Temperature',
backgroundColor: "#0027FF",
borderColor: "#0027FF",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
}]
},
options: {
animation: false,
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time ( UTC )'
},
type: 'time',
time: {
tooltipFormat: "hh:mm:ss",
displayFormats: {
hour: 'MMM D, hh:mm:ss'
}
},
ticks: {
maxRotation: 90,
minRotation: 90
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature ( Celcius )'
},
}]
}
}
});
function getHotTempData() {
return [
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
];
}
function getColdTempData() {
return [
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
];
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="tempChart"></canvas>
Related
This is my chart option code:
const options = {
chart: {
type: "rangeBar",
},
series: [
{
data: [
{
x: "Code",
y: [Date.UTC(2019, 3, 2, 12, 30), Date.UTC(2019, 3, 2, 13, 0)],
},
{
x: "Code",
y: [Date.UTC(2019, 3, 2, 15, 30), Date.UTC(2019, 3, 2, 16, 0)],
},
{
x: "Code",
y: [Date.UTC(2019, 3, 2, 18, 0), Date.UTC(2019, 3, 2, 19, 0)],
},
{
x: "Code",
y: [Date.UTC(2019, 3, 2, 22, 0), Date.UTC(2019, 3, 2, 24, 0)],
},
],
},
],
plotOptions: {
bar: {
horizontal: true,
},
},
xaxis: {
type: "datetime",
},
};
And this is the result:
I don't know how to add fixed labels from 00:00 to 24:00 hour format. That's my problem.
I also did this but doesn't work:
xaxis: {
type: "category",
categories: ["00:00", ..., "24:00"]
},
Thanks
Finally i fixed this in this repo:
https://github.com/mortezasabihi/apexchart-timeline
I have the following data set and I am using chart.js
<script>
let chart = new Chart(mychart, {
type:'line',
data: {
datasets: [{
label: 'Issues',
fill: false,
backgroundColor: 'rgba(255,0,255,0.4)',
borderColor: 'rgba(255,0,255,0.4)',
data: [{
x: new Date(2018, 4, 1),
y: 20
}, {
x: new Date(2018, 10, 3),
y: 17
},{
x: new Date(2019, 0, 1),
y: 20
}, {
x: new Date(2019, 0, 3),
y: 17
},{
x: new Date(2019, 2, 7),
y: 17
}, {
x: new Date(2020, 1, 1),
y: 20
}, {
x: new Date(2020, 3, 3),
y: 17
}, {
x: new Date(2020, 4, 1),
y: 20
}, {
x: new Date(2020, 5, 3),
y: 17
}, {
x: new Date(2020, 7, 1),
y: 20
}, {
x: new Date(2020, 9, 3),
y: 17
}, {
x: new Date(2020, 10, 5),
y: 28
}, {
x: new Date(2020, 11, 4),
y: 11
}]
}],
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month',
unitStepSize: 1,
distributions: 'series',
displayFormats: {
'day': 'DD/MM/YYYY'
}
}
}]
}
}
})
The chart currently look like this:
What I want is whenever user selects the filter either month or week from the drop down the above data should be grouped accordingly to the count for week or month in the chart.
For example we have total 20 + 17 entries for January 2019 but they are coming as separate points what I want is it should be shown like 37 for January 2019.
I created a chartjs bar graph to represent a set of measurements over a 60 minute interval. I have managed to get the graph up and running but the end bars of it keep getting clipped. The code is here https://jsfiddle.net/bagelboy/yxs9tr5c/
//
var hourBarctx = document.getElementById("hourBarChart");
var hourBarChart = new Chart(hourBarctx, {
// type: 'line',
type: 'bar',
data: {
labels: [
// min: moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
// max: moment.unix(new Date(2018, 1, 0, 0, 30, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 1, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 2, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 3, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 4, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 5, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 59, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 60, 0).getTime() / 1000),
],
datasets: [{
label: 'All Units',
data: [42, 43, 70, 89, 47, 42, 43, 70],
// backgroundColor: 'rgba(0, 0, 200, 0.1)',
backgroundColor: 'rgba(0, 99, 132, 0.6)',
borderColor: 'rgba(0, 99, 132, 1)',
// borderWidth: 0
borderWidth: 1,
},
{
label: 'TV',
data: [],
backgroundColor: 'rgba(76, 175, 80, 0.1)',
borderWidth: 1,
},
{
label: 'Light',
data: [],
backgroundColor: 'rgba(0, 175, 80, 0.1)',
borderWidth: 1,
},
{
label: 'AC',
data: [],
backgroundColor: 'rgba(76, 0, 80, 0.1)',
borderWidth: 1,
}
]
},
options: {
tooltips: {
enabled: true,
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
var val = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return label;
}
}
},
title: {
display: true,
text: 'Hour'
},
elements: {
},
scales: {
xAxes: [{
gridLines: {
offsetGridLines: true
},
categoryPercentage: 1.0,
barPercentage: 1.0,
type: "time",
stacked: true,
time: {
unit: 'minute',
unitStepSize: 1,
displayFormats: {
// day: 'MM/DD/YYYY hh:mm a X Z ',
minute: 'mm',
},
//new Date(year, month, day, hours, minutes, seconds, milliseconds)
min: moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
max: moment.unix(new Date(2018, 1, 0, 0, 60, 0).getTime() / 1000),
}
}, ],
yAxes: [{
// barPercentage: 1,
// categoryPercentage: 1,
ticks: {
beginAtZero: true
}
}]
}
}
});
Anyone know how to keep the ends from being clipped like this?
I think it's the way you are trying to do the axis, its looking to show the values between 00-01, 01-02 etc, in the last data point your axis doesn't go to 1am, and the first data point is similar, i was able to fix it by changing:
min: moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
max: moment.unix(new Date(2018, 1, 0, 0, 60, 0).getTime() / 1000),
to:
min: moment.unix(new Date(2018, 1, 0, 0, -1, 0).getTime() / 1000),
max: moment.unix(new Date(2018, 1, 0, 0, 61, 0).getTime() / 1000),
Might not be exactly what you want but in the fiddle (after adding moment.js as a dependency) it doesn't cut off your bars.
I haven't worked with time like this, but maybe the data supplied needs to be different to get it to work.
So the idea is that for all days of a week I have fuel consumed and refilled fuel. I thought of it as a basic range column chart (canvas js) but color and width have to change when the bar goes below the horizontal axis.
I mean I want a graph like this
I tried this using the canvasjs library
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2", // "light1", "light2", "dark1", "dark2"
animationEnabled: true,
title: {
text: "Brent Crude Oil Price - 2016"
},
axisY: {
title: "Price(USD/bbl)",
includeZero: false
},
data: [{
color: "#98fb98",
type: "rangeColumn",
yValueFormatString: "$#,##0.00",
xValueFormatString: "MMM YYYY",
toolTipContent: "{x}<br>High: {y[0]}<br>Low: {y[1]}",
dataPoints: [
{ x: new Date(2016, 0), y: [0, 38.99] },
{ x: new Date(2016, 1), y: [0, 37.00] },
{ x: new Date(2016, 2), y: [0, 42.54] },
{ x: new Date(2016, 3), y: [0, 48.50] },
{ x: new Date(2016, 4), y: [0, 50.51] },
{ x: new Date(2016, 5), y: [0, 52.86] },
{ x: new Date(2016, 6), y: [0, 50.75] },
{ x: new Date(2016, 7), y: [0, 51.22] },
{ x: new Date(2016, 8), y: [0, 50.14] },
{ x: new Date(2016, 9), y: [0, 53.73] },
{ x: new Date(2016, 10), y: [0, 50.49] },
{ x: new Date(2016, 11), y: [0, 57.89] }
]
},
{
color: "#ffb6c1",
type: "rangeColumn",
yValueFormatString: "$#,##0.00",
xValueFormatString: "MMM YYYY",
toolTipContent: "{x}<br>High: {y[0]}<br>Low: {y[1]}",
dataPoints: [
{ x: new Date(2016, 0), y: [-27.10, 0] },
{ x: new Date(2016, 1), y: [-29.92, 0] },
{ x: new Date(2016, 2), y: [-35.95, 0] },
{ x: new Date(2016, 3), y: [-37.27, 0] },
{ x: new Date(2016, 4), y: [-43.33, 0] },
{ x: new Date(2016, 5), y: [-46.69, 0] },
{ x: new Date(2016, 6), y: [-41.80, 0] },
{ x: new Date(2016, 7), y: [-41.51, 0] },
{ x: new Date(2016, 8), y: [-45.09, 0] },
{ x: new Date(2016, 9), y: [-47.98, 0] },
{ x: new Date(2016, 10), y: [-43.57, 0] },
{ x: new Date(2016, 11), y: [-51.51, 0] }
]
}
]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
The graph I got is this:
How to get the graph as in the 1st picture?
You can use combination of Column and Range-Column Charts.
var chart = new CanvasJS.Chart("chartContainer", {
data: [
{
color: "#98fb98",
type: "column",
yValueFormatString: "$#,##0.00",
xValueFormatString: "MMM YYYY",
toolTipContent: "{x}: {y}",
dataPoints: [
{ x: new Date(2016, 0), y: 38.99 },
{ x: new Date(2016, 1), y: 37.00 },
{ x: new Date(2016, 2), y: 42.54 },
{ x: new Date(2016, 3), y: 48.50 },
{ x: new Date(2016, 4), y: 50.51 },
{ x: new Date(2016, 5), y: 52.86 },
{ x: new Date(2016, 6), y: 50.75 },
{ x: new Date(2016, 7), y: 51.22 },
{ x: new Date(2016, 8), y: 50.14 },
{ x: new Date(2016, 9), y: 53.73 },
{ x: new Date(2016, 10), y: 50.49 },
{ x: new Date(2016, 11), y: 57.89 }
]
},
{
color: "#ffb6c1",
type: "rangeColumn",
yValueFormatString: "$#,##0.00",
xValueFormatString: "MMM YYYY",
toolTipContent: "{x}: {y[0]}",
dataPoints: [
{ x: new Date(2016, 0), y: [-27.10, 0] },
{ x: new Date(2016, 1), y: [-29.92, 0] },
{ x: new Date(2016, 2), y: [-35.95, 0] },
{ x: new Date(2016, 3), y: [-37.27, 0] },
{ x: new Date(2016, 4), y: [-43.33, 0] },
{ x: new Date(2016, 5), y: [-46.69, 0] },
{ x: new Date(2016, 6), y: [-41.80, 0] },
{ x: new Date(2016, 7), y: [-41.51, 0] },
{ x: new Date(2016, 8), y: [-45.09, 0] },
{ x: new Date(2016, 9), y: [-47.98, 0] },
{ x: new Date(2016, 10), y: [-43.57, 0] },
{ x: new Date(2016, 11), y: [-51.51, 0] }
]
}
]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>
You can use single data-series Range-Column chart along with setting color for every datapoints.
var chart = new CanvasJS.Chart("chartContainer", {
data: [{
type: "rangeColumn",
yValueFormatString: "$#,##0.00",
xValueFormatString: "MMM YYYY",
toolTipContent: "{x}<br>High: {y[0]}<br>Low: {y[1]}",
dataPoints: [
{ x: new Date(2016, 0), y: [0, 38.99] },
{ x: new Date(2016, 1), y: [0, 37.00] },
{ x: new Date(2016, 2), y: [0, 42.54] },
{ x: new Date(2016, 3), y: [0, 48.50] },
{ x: new Date(2016, 4), y: [0, 50.51] },
{ x: new Date(2016, 5), y: [0, 52.86] },
{ x: new Date(2016, 6), y: [0, 50.75] },
{ x: new Date(2016, 7), y: [0, 51.22] },
{ x: new Date(2016, 8), y: [0, 50.14] },
{ x: new Date(2016, 9), y: [0, 53.73] },
{ x: new Date(2016, 10), y: [0, 50.49] },
{ x: new Date(2016, 11), y: [0, 57.89] },
//Second Set
{ x: new Date(2016, 0), y: [-27.10, 0] },
{ x: new Date(2016, 1), y: [-29.92, 0] },
{ x: new Date(2016, 2), y: [-35.95, 0] },
{ x: new Date(2016, 3), y: [-37.27, 0] },
{ x: new Date(2016, 4), y: [-43.33, 0] },
{ x: new Date(2016, 5), y: [-46.69, 0] },
{ x: new Date(2016, 6), y: [-41.80, 0] },
{ x: new Date(2016, 7), y: [-41.51, 0] },
{ x: new Date(2016, 8), y: [-45.09, 0] },
{ x: new Date(2016, 9), y: [-47.98, 0] },
{ x: new Date(2016, 10), y: [-43.57, 0] },
{ x: new Date(2016, 11), y: [-51.51, 0] }
]
}]
});
addColor(chart);
chart.render();
function addColor(chart){
for(var i = 0; i < chart.options.data.length; i++){
for(var j = 0; j < chart.options.data[i].dataPoints.length; j++){
chart.options.data[i].dataPoints[j].color = chart.options.data[i].dataPoints[j].y[0] == 0 ? "#ffb6c1" : "#98fb98";
}
}
}
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>
I would like to show 24 hour days going across the Highcharts chart with 1 hour intervals on the x axis and 7 days on the y axis.
How do I get the chart to start at midnight and run for 24 hours across?
As you can see below the chart is currently starting at 8:00am and going until 3:00pm. Instead we would like it to start at 12:00am and end at 11:59pm.
$('#graph').highcharts({
exporting: { enabled: false },
chart: {
type: 'columnrange',
inverted: true
},
title: {
text:''
},
yAxis: {
type: 'datetime',
tickAmount: 24,
tickInterval: 3600 * 1000,
minTickInterval: 3600 * 1000,
lineWidth: 1,
dateTimeLabelFormats: {
day: '%H:%M'
},
title: {
enabled: false
}
},
xAxis: {
categories: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
},
legend: {
enabled: false
},
plotOptions: {
series: {
pointWidth: 10,
}
},
series: [{
data: [
{
x: 0,
low: Date.UTC(2010, 1, 1, 9, 0, 0),
high: Date.UTC(2010, 1, 1, 12, 0, 0),
color: 'blue'
}, {
x: 0,
low: Date.UTC(2010, 1, 1, 12, 30, 0),
high: Date.UTC(2010, 1, 1, 14, 0, 0),
color: 'blue'
},
{
x: 1,
low: Date.UTC(2010, 1, 2, 9, 0, 0),
high: Date.UTC(2010, 1, 2, 12, 0, 0),
color: 'blue'
},
{
x: 2,
low: Date.UTC(2010, 1, 3, 9, 0, 0),
high: Date.UTC(2010, 1, 3, 12, 0, 0),
color: 'blue'
},
{
x: 3,
low: Date.UTC(2010, 1, 4, 9, 0, 0),
high: Date.UTC(2010, 1, 4, 12, 0, 0),
color: 'blue'
},
{
x: 4,
low: Date.UTC(2010, 1, 5, 9, 0, 0),
high: Date.UTC(2010, 1, 5, 12, 0, 0),
color: 'blue'
},
{
x: 5,
low: Date.UTC(2010, 1, 6, 9, 0, 0),
high: Date.UTC(2010, 1, 6, 12, 0, 0),
color: 'blue'
},
{
x: 6,
low: Date.UTC(2010, 1, 7, 9, 0, 0),
high: Date.UTC(2010, 1, 7, 12, 0, 0),
color: 'blue'
},
]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="graph"></div>
----------------EDIT----------------
I updated the data to replicate what we actually want. The output is working but "broken". We would like the graph to look like the picture.
You can use yAxis.min and yAxis.max for setting the min and max values of your axis. You can use tickPositioner for setting the positions of your labels on axis:
http://api.highcharts.com/highcharts/yAxis.tickPositioner
yAxis: {
min: Date.UTC(2010, 0, 1, 0, 0, 0),
max: Date.UTC(2010, 0, 2, 0, 0, 0),
type: 'datetime',
tickPositioner: function() {
var info = this.tickPositions.info;
var positions = [];
for (i = Date.UTC(2010, 0, 1, 0, 0, 0); i <= Date.UTC(2010, 0, 2, 0, 0, 0); i += 3600 * 1000) {
positions.push(i);
}
positions.info = info;
return positions;
},
lineWidth: 1,
dateTimeLabelFormats: {
day: '%H:%M'
},
title: {
enabled: false
}
},
Here you can see an example how it can work:
http://jsfiddle.net/1yccghgy/1/