Chart.js/3.8.0にてオプション指定時の軸名称の明示記載について | GROUP DEV BLOG

2022.08.31

プログラミング

Chart.js/3.8.0にてオプション指定時の軸名称の明示記載について

概要

Chart.jsにてグラフを作成する際、
オプションを指定して軸の設定を行おうした所、
反映されなかったので原因と対策内容を記載致します。

使用version：https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js

修正前コード

var test= document.getElementById('test');
var chart = new Chart(test, {
        type: 'line',
        data: {
            labels: test,
            datasets: [{
                label: 'test',
                data: [20, 10],
                ～～　省略　～～
            }]
        },
        options: {
             scales: {
                yAxes: {
                    ticks: {
                        display: false,
                    }
                }
            }
        },
    });

var test= document.getElementById('test');

var chart = new Chart(test, {

type: 'line',

data: {

labels: test,

datasets: [{

label: 'test',

data: [20, 10],

～～　省略　～～

}]

options: {

scales: {

yAxes: {

ticks: {

display: false,

}

});

修正後コード

var test= document.getElementById('test');
var chart = new Chart(test, {
        type: 'line',
        data: {
            labels: test,
            datasets: [{
                label: 'test',
                xAxisID: 'x',
                yAxisID: 'y', 
                data: [20, 10],
                ～～　省略　～～
            }]
        },
        options: {
             scales: {
                y: {
                    ticks: {
                        display: false,
                    }
                }
            }
        },
    });