Chart.js: bar chart first bar and last bar not displaying in full

Question

Problem: As you can see...the first and last bar are cut in half...
Expectation: Display the first bar and last bar in full.

Evenly distribution is a must which is achieved via unitStepSize...

var data = {
  labels: ["2015-05-01", "2015-05-02", "2015-05-03", "2015-05-04", "2015-05-05", "2015-05-06", "2015-05-07", "2015-05-08","2015-05-09","2015-05-10", "2015-05-11", "2015-05-12", "2015-05-13", "2015-05-14", "2015-05-15", "2015-05-16", "2015-05-17", "2015-05-18","2015-05-19","2015-05-20", "2015-05-21", "2015-05-22", "2015-05-23", "2015-05-24", "2015-05-25", "2015-05-26", "2015-05-27", "2015-05-28","2015-05-29","2015-05-30"],
  datasets: [{
    label: "My First dataset",
    //new option, type will default to bar as that what is used to create the scale
    type: "line",
    fill: false,
    pointColor: "rgba(220,220,220,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    data: [65, 59, 4, 81, 56, 55, 40, 12, 33, 22, 25, 4, 19, 56, 55, 40, 12, 33, 65, 59, 4, 16, 56, 55, 40, 12, 33, 66, 78, 55]
  }, {
    label: "My Second dataset",
    //new option, type will default to bar as that what is used to create the scale
    type: "bar",
    fill: false,
    pointColor: "rgba(220,20,220,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    data: [32, 25, 33, 88, 12, 92, 33, 28, 22, 32, 25, 33, 88, 12, 92, 33, 28, 22, 32, 25, 33, 88, 12, 92, 33, 28, 22, 90,91, 21]
  }]
};
var options = {
  scales: {
    xAxes: [{
    type:'time',
    categoryPercentage: 0.1,
    time:{
    unit:'day',
    unitStepSize:10
    },
      ticks: {
        maxRotation: 0,
        minRotation: 0
      }
    }],
  }
};
var ctx = document.getElementById("myChart");
var myLineChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});

Please include the code in your question as well using the code button in the editor. Also, please provide a clear description of what you are trying to accomplish and what you have already tried — Tim Hutchison
It´s your combination between line and bar Chart. The first an last point of an line-chart begin at the vertical axes. So the first and last bar is always centered to this point´s... — Frank Wisniewski
Seems to be a long standing issue. Workaround - add a null value as your first and last x value: github.com/novus/nvd3/issues/290#issuecomment-74865899 — Matthew Hegarty

Nick Kaufmann Nick Kaufmann · Accepted Answer · 2019-05-01T13:45:58

25

votes

This worked for me:

xAxes: [{
  offset: true,
}]

Chart.js: bar chart first bar and last bar not displaying in full

1 Answers