차트라이브러리/Chart.js

Chart.js Axis label 만들기

세리둥절 2022. 3. 17. 21:36
반응형

✔️ 필요성

Chart.js에서 y축이나 x축에 label을 기입하고 싶을 때가 있다

 

 

 

 

✔️ 문제 해결

Chart.js는 옵션이 왜이렇게 다양할까..? 심지어 documnet가 잘 안되어 있는 것이 문제다.....

title을 이용해서 만들어줄 수 있다

const options = {
    scales: {
      y: {
        type: "linear" as const,
        display: true,
        position: "left" as const,
        title: {
          display: true,
          text: "probability",
          font: {
            size: 15,
          },
        },
        grid: {
          drawOnChartArea: false,
        },
        ticks: {
          font: {
            size: 14,
          },
        },
      },
      y1: {
        type: "linear" as const,
        display: true,
        position: "right" as const,
        suggestedMin: 0,
        suggestedMax: 100,
        ticks: {
          stepSize: 25,
          font: {
            size: 14,
          },
        },
        title: {
          display: true,
          text: "probability",
          font: {
            size: 15,
          },
        },
      },
    },
  };

 

반응형