Chart.js #4668 test01

by Akihiko Kusanagi

HTML

<script src="https://raw.githubusercontent.com/chartjs/chartjs.github.io/master/dist/master/Chart.js"></script>
<canvas id="myChart"></canvas>

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [,'8/1','8/2','8/3','8/4','8/5','8/6','8/7'],
    datasets: [{
      data: [,2100,1150,2100,1000,2350,2100,2100],
      backgroundColor: [,'#A146A2','#EEC340','#A146A2','#EEC340','#EEC340','#A146A2','#A146A2']
    }, {
      data: [1800,,,,,,,,1800],
      type: 'line',
      borderColor: '#A146A2',
      backgroundColor: 'rgba(161,70,162,0.2)',
      borderWidth: 2,
      borderDash: [4,4],
      fill: '+1',
      pointRadius: 0,
      spanGaps: true
    }, {
      data: [2200,,,,,,,,2200],
      type: 'line',
      borderColor: '#A146A2',
      borderWidth: 2,
      borderDash: [4,4],
      fill: false,
      pointRadius: 0,
      spanGaps: true
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        ticks: {
          min: '8/1',
          max: '8/7'
        },
        barPercentage: 0.5
      }],
      yAxes: [{
        ticks: {
          min: 1000,
          max: 3000,
          stepSize: 400
        }
      }]
    }
  }
});