[Chartjs]-How to prevent first/last bars from being cut off in a chart with time scale

by

55👍

✅

There’s a setting called offset which seems to work for me:

xAxes: [{
     offset: true
  }]

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) => 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) => -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) => label.toUpperCase(),
          fontSize: 10     
        },
        offset:true
      }],
      yAxes: [
        {
          id: "winsAndLosses",
          stacked: true,
          ticks: {
            min: (lossesMax + 10) * -1,
            max: winsMax + 10,
            callback: (label) => Math.abs(label) // TODO: Localization (number formatting).
          },
          display: false
        },
        {
          id: "winRate",
          ticks: {
            min: 0,
            max: 100,
            stepSize: 10,
            callback: (label) => label + "%", // TODO: Localization (number formatting).
            fontSize: 10
          }
        }
      ]
    }
}
});
.myChartDiv {
  max-width: 800px;
  max-height: 400px;
}
<script src="https://npmcdn.com/chart.js@latest/dist/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="800" height="400"></canvas>
    </div>
  </body>
</html>

Leave a comment