score:53

Accepted answer

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>


Related Query

More Query from same tag