Chart.js #6182 test02

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nagix/nagix.github.io@chartjs/Chart.6182.js"></script>
<div class="myChartDiv">
  <canvas id="myChart1" width="600" height="400"></canvas>
</div>
<div class="myChartDiv">
  <canvas id="myChart2" width="800" height="400"></canvas>
</div>

CSS

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

JavaScript

Chart.defaults.global.defaultFontSize = 16;
var ctx1 = document.getElementById("myChart1");
var myChart1 = new Chart(ctx1, {
  type: 'line',
  data: {
    labels: [
      '2008-12-31', '2009-12-31', '2010-12-31', '2011-12-31', '2012-12-31',
      '2013-12-31', '2014-12-31', '2015-12-31', '2016-12-31', '2017-05-23'
    ],
    datasets: [{
      label: 'data',
      data: [
        200, 400, 800, 1600, 3200,
        6400, 12800, 25600, 51200, 102400
      ]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'year',
          round: 'year'
        }
      }]
    }
  }
});

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 ctx2 = document.getElementById("myChart2");
var myChart2 = new Chart(ctx2, {
  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: {
     ...