Chart.js: Chart JS Time Scale

Created on 28 Apr 2016  ·  6Comments  ·  Source: chartjs/Chart.js

Hey,
i have a line chart (y-axis: Int[0,3] ; x-axis:Time_hh:mm[24hours past, now]) and i am using the time scale options. the dataset consists of 24 hours * 60 minutes values and i changed the x-axis label unit to 'hour' and unitSteps to '2'. So far so good. But when i display the chart, it cuts sometimes the last 10-20 data values.
Is there a posibility to extend the x-axis?

My Line Chart:
//labelList --> List of date objects
//dataList1-3 --> integer values between 0 and 3
var chart = new Chart(context, {
type: type,
data: {
labels: labelList,
datasets: [
{
label: "Aktiv",
data: dataList1,
tension: 0,
borderColor: "rgb(248,169,113)",
backgroundColor: "rgba(248,169,113,0.4)",
radius: 0,
pointHitRadius: 5,
},
{
label: "Idle",
data: dataList2,
tension: 0,
borderColor: "rgb(210,225,236)",
backgroundColor: "rgba(210,225,236,0.4)",
radius: 0,
pointHitRadius: 5,
},
{
label: "Wartend",
data: dataList3,
tension: 0,
borderColor: "rgb(248,113,113)",
backgroundColor: "rgba(248,113,113,0.4)",
radius: 0,
pointHitRadius: 5,
borderWidth: 2
}]
},
options: {
stacked: true,
title:{
display:true,
text:mainLabel
},
scales: {
xAxes: [{
type: "time",
time: {
format: "HH:mm",
unit: 'hour',
unitStepSize: 2,
displayFormats: {
'minute': 'HH:mm',
'hour': 'HH:mm',
},
tooltipFormat: 'HH:mm'
}
}],
yAxes: [{
position: "left"
}]
}
}
});

Greetings
Uwe

duplicate bug

Most helpful comment

Sorry about that, haven't had enough coffee yet.

All 6 comments

@Ofenlord this is coming up blank to me. Did Github not post the body?

Yeah i pressed ENTER after typing the title and he post it instantly, sry

Ah, ok.

I think the issue you are seeing is likely the same as #2277 which has been fixed and will be in the next release.

As a workaround, you could add an explicit max and min to your scale config

xAxes: [{
  type: 'time',
  time: {
    format: "HH:mm",
    unit: 'hour',
    unitStepSize: 2,
    displayFormats: {
      'minute': 'HH:mm', 
      'hour': 'HH:mm', 
      min: <starting time here>
      max: <ending time here>
    },
}]

ok thanks it works, but min and max must set outside of 'displayFormats'

Greetings

Sorry about that, haven't had enough coffee yet.

Closing since 2.1 has been released with a fix for this

Was this page helpful?
0 / 5 - 0 ratings