[Chartjs]-Chart.js: Combined Line and Bar Data

by

1👍

✅

For the first problem :

How can I disable the overlap?

xAxes: [{
  position: "bottom",
  //type: "time",    // erase this line
  time: {
    unit: "hour",
    format: "HH:mm",
    tooltipFormat: "HH:mm",
    displayFormats: {
      hour: "HH:mm",
      day: "HH:mm",
      week: "HH:mm",
      month: "HH:mm",
      quarter: "HH:mm",
      year: "HH:mm"
    }
  }
}],

In the XAxes erase the line type: “time”, this option imply that the graph has to start in zero without margin.

The second problem:

I think the best way to represent your data:

var data = [
  { x: "08:00", y_line: "110", y_bar: "30"}, 
  { x: "09:00", y_line: "120", y_bar: "35"}, 
  { x: "10:00", y_line: "130", y_bar: null},
  { x: "11:00", y_line: "140", y_bar: 45}
];

With this representation you force that each “time” has two measurements, one for the bar and one for the line that can have a numerical value or a null value.

Then with some functions you can get the sets:

function getLine(){
    var arr = [];
    data.forEach(function(entry) { 
       var data = { x: entry.x, y: entry.y_line}
       arr.push(data);
    });
    return arr;
}

function getBar(){
    var arr = [];
    data.forEach(function(entry) { 
       arr.push(entry.y_bar);
    });
    return arr;
}

function getLabels(){
    var arr = [];
    data.forEach(function(entry) { 
       arr.push(entry.x);
    });
    return arr;
}

Then you introduce the values in your configuration like this:

{
 type: "bar",
 label: labelInsulin,
 backgroundColor: "#239471",
 borderCapStyle: "butt",
 borderJoinStyle: "miter",
 borderColor: "#239471",
 data: getBar(),           // like this
 yAxisID : "y-axis-1"
}

If a “bar” has value null it doesn’t appear. And because the “bar” has the same number of elements than the “line” they always match.

Leave a comment