How to prevent first/last bars from being cut off in a chart with time scale : <p>How do I prevent the first and last bars from being cut off (showing half)?</p>

<p>I need to show the short month names on the x-axis. I've tried playing around with various min/max settings, but I can't seem to get it right.</p>

<p><a href="https://i.stack.imgur.com/qWwkI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qWwkI.png" alt="Example"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var graphData = {
  dates: [
    '2016-06-01',
    '2016-07-01',
    '2016-08-01',
    '2016-09-01',
    '2016-10-01',
    '2016-11-01',
    '2016-12-01',
    '2017-01-01',
    '2017-02-01',
    '2017-03-01',
    '2017-04-01',
    '2017-05-01'
  ],
  wins: [23, 5, 13, 24, 8, 11, 23, 5, 13, 24, 8, 11],
  draws: [2, 1, 2, 0, 2, 2, 3, 1, 2, 4, 0, 1],
  losses: [3, 1, 2, 10, 8, 8, 3, 1, 2, 10, 8, 8],
  winRates: [50, 40, 72, 30, 46, 80, 50, 40, 72, 30, 46, 80]
};

var winsMax = Math.max.apply(Math, graphData.wins);
var lossesMax = Math.max.apply(Math, graphData.losses);

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: graphData.dates.map((date) =&gt; moment(date)),
    datasets: [
      {
        type: "bar",
        backgroundColor: "green",
        hoverBackgroundColor: "green",
        data: graphData.wins,
        yAxisID: "winsAndLosses"
      },
      {
        type: "bar",
        backgroundColor: "red",
        hoverBackgroundColor: "red",
        data: graphData.losses.map((i) =&gt; -i),
        yAxisID: "winsAndLosses"
      },
      {
        type: "line",
        data: graphData.winRates,
        fill: true,
        backgroundColor: "gray",
        pointRadius: 0,
        pointHoverRadius: 0,
        yAxisID: "winRate"
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        type: "time",
        time: {
          unit: "month",
          displayFormats: {
            month: "MMM"
          }
        },
        stacked: true,
        gridLines: {
          display: false
        },
        ticks: {
          callback: (label) =&gt; label.toUpperCase(),
          fontSize: 10     
        }
      }],
      yAxes: [
        {
          id: "winsAndLosses",
          stacked: true,
          ticks: {
            min: (lossesMax + 10) * -1,
            max: winsMax + 10,
            callback: (label) =&gt; Math.abs(label) // TODO: Localization (number formatting).
          },
          display: false
        },
        {
          id: "winRate",
          ticks: {
            min: 0,
            max: 100,
            stepSize: 10,
            callback: (label) =&gt; label + "%", // TODO: Localization (number formatting).
            fontSize: 10
          }
        }
      ]
    }
}
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.myChartDiv {
  max-width: 800px;
  max-height: 400px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://npmcdn.com/chart.js@latest/dist/Chart.bundle.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"&gt;&lt;/script&gt;
&lt;html&gt;
  &lt;body&gt;
    &lt;div class="myChartDiv"&gt;
      &lt;canvas id="myChart" width="800" height="400"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>
