雑多なブログ

音楽や語学、プログラム関連の話題について書いています

chartjs3で余計な表示を消す

javascript chart.js

chartjs3では、デフォルトでデータセットのラベルが表示されている。

f:id:uc_ebuc:20210702000400p:plain

このラベルの表示を消すには、options.plugins.legend.display = false を指定する。

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js"></script>
<body>
<h1>
chart.js sample
</h1>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['項目1', '項目2', '項目3', '項目4', '項目5'],
        datasets: [{
            //label: '# of Votes',
            data: [4, 10, 9, 5, 8],
        }]
    },
    options: {
      plugins: {
        legend: { display: false }
      }
    }
});
</script>
</body>
</head>
</html>