[React] react + typescript + Chart.js Multi-Axis 설정하는 방법

Intro

안녕하세요.  앞선 포스팅에서 Multi type chart를 구현하는 방법에 대해 알아봤는데요, 이번 시간에는 Chart.js에서 Multi-Axis 를 설정하는 방법에 대해 알아보겠습니다. Multi-Axis 은 데이터의 단위 차이가 커서 한꺼번에 표현할 때 유용합니다. 

 

How to do

 제 경우 series1, series2 두 데이터에 상응되는 y축을 오른쪽과 왼쪽에 표시하고 싶었습니다.

 

각각 사용하고자 하는 축이 다르기 때문에 yAxisID 속성을 활용하여 a, b 두개를 지정했습니다. 이후 options에서 해당 yAxisID를 사용해 position을 right, left로 설정해줬습니다.

  const series1: number[] = []
  const series2: number[] = []

  data.forEach(temp => {
      // Insert data
  })

  const datasets: ChartDataset<'line' | 'bar', number[]>[] = [
    {
      type: 'line',
      label: 'A',
      yAxisID: 'y-axis-a',
      borderColor: 'white',
      borderWidth: 2,
      fill: false,
      pointRadius: 0,
      data: series3
    },
    {
      type: 'bar',
      label: 'B',
      yAxisID: 'y-axis-b',
      backgroundColor: 'red',
      data: series1
    }
  ]


  const options: ChartOptions<'line' | 'bar'> = {
    plugins: {
     ...
    },
    scales: {
      'y-axis-a': {
        type: 'linear',
        position: 'right',
        grid: {
          display: false
        }
      },
      'y-axis-b': {
        type: 'linear',
        position: 'left',
        grid: {
          display: false
        }
      }
    }
  }

  const chartData: ChartData<'line' | 'bar', number[], string> = {
    labels,
    datasets
  }

 

변수명이나 위치는 케이스에 맞게 사용하시면 됩니다 :)