Chart 2. Line

by rough cheap

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['赤', '青', '黃', '緑', '紫', '橙'],
      datasets: [{
        label: 'データの数',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 2,
        borderDash: [10, 3, 3, 3, 3, 3],
        borderDashOffset: 0,
        pointBorderColor: 'rgba(255, 99, 132, 1)',
        pointBackgroundColor: 'rgba(255, 99, 132, 0.4)',
        pointBorderWidth: 1,
        pointRadius: 10,
        pointStyle: 'rectRot'
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
      /*
      elements: {
        line: {
          tension: 0,
          borderWidth: 3
        }
      }
      */
    }
  });

</script>