graph-view-3.vue

<template>
  <!-- options を追加 -->
  <MainChart class="chart" :chartData="chartData" :options="options"/>
</template>

<script>
  import MainChart from './MainComponents/MainChart.js';
  export default {
    data () {
      return {
        chartData: {
          labels: ['January', 'February', 'March', 'April', 'May'],
          datasets: [
            {
              label: 'Sample1',
              data: [28, 20, 30, 40, 50],
              backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
            }
          ]
        },
        options: {
          responsive: true, // ウィンドウのサイズによってグラフの大きさが変わるか
          maintainAspectRatio: false, // グラフの縦横比を固定するか
          scales: {
            // x軸に関して
            xAxes: [{
              // ラベルについて
              scaleLabel: {
                display: true,
                labelString: 'Month'
              }
            }],
            // y軸に関して
            yAxes: [{
              // 目盛りについて
              ticks: {
                beginAtZero: true, // 0からスタートするか
                stepSize: 10, // 目盛りの間隔
                callback: function (label, index, labels) {
                  return label + ' 点'; // ラベルに'点'を付ける
                }
              }
            }],
          },
          // hoverした時に出てくる表示
          tooltips: {
            callbacks: {
              label: function (tooltipItem, data) {
                return tooltipItem.yLabel + ' 点'; // ツールチップに'点'を付ける
              }
            }
          }
        }
      }
    },
    components: {
      MainChart,
    }
  }
</script>

<style scoped>
  .chart {
    width: 600px;
    margin: auto;
    padding: 20px;
  }
</style>