[React] react + typescript 에서 multitype 멀티타입 Chart.js 사용하는 방법

Intro

안녕하세요. 이번 시간에는 react + typescript 에서 Chart.js 를 사용하는 방법에 대해 알아보겠습니다. 

 

How to do 

제 케이스의 경우 막대(bar) 그래프와 선(line) 그래프를 함께 그려주고 싶었습니다. 이를 위해 먼저 MutiTypeChart 컴포넌트를 만들었습니다. 

 

# MutiTypeChart Component

props로 data, height, options 을 정의합니다. 멀티타입 차트를 위해서는 Chart Component  를 사용하면 됩니다. 

import React from 'react'
import {
  BarController,
  BarElement,
  CategoryScale,
  Chart as ChartJS,
  ChartData,
  ChartOptions,
  ChartType,
  Legend,
  LinearScale,
  LineController,
  LineElement,
  PointElement,
  Tooltip
} from 'chart.js'
import { Chart } from 'react-chartjs-2'

ChartJS.register(LinearScale, CategoryScale, BarElement, PointElement, LineElement, Legend, Tooltip, LineController, BarController)

interface Props {
  data: ChartData<ChartType, number[], string>
  height: number
  options: ChartOptions<ChartType>
}

const MultiTypeChart = (props: Props) => {
  const { data, height, options } = props

  return (
      <Chart<ChartType> type='bar' data={data} options={options} height={height} />
  )
}

export default MultiTypeChart

 

# MyComponent

datasets 변수를 만들고, ChartDataset 타입을 chart.js 로부터 import 합니다. 이후 사용하고자 하는 chart type 을 명시해줍니다. 저는 line, bar 차트가 필요했기 때문에 아래와 같이 구성하였습니다. 

import { ChartData, ChartDataset, ChartOptions } from 'chart.js'
import MultiTypeChart from './MultiTypeChart'


const MyComponent = ({ data, psType }: Props) => {
  const labels = data.map(item => item.label)

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

  data.forEach(temp => {
      series1.push(temp.data1)
      series2.push(temp.data2)
      series3.push(temp.data3)
  })

  const datasets: ChartDataset<'line' | 'bar', number[]>[] = [
    {
      type: 'line',
      label: 'A',
      borderColor: 'white',
      data: series3
    },
    {
      type: 'bar',
      label: 'B',
      backgroundColor: 'red',
      data: series1
    }
    {
      type: 'bar',
      label: 'C',
      backgroundColor: 'blue'
      data: series1
    }
  ]

  const options: ChartOptions<'line' | 'bar'> = {
  	...
  }

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

  return (
      <MultiTypeChart data={chartData} options={options}/>
  )
}

export default MyComponent

 

 

react + typescript 환경에서 멀티타입 예시가 별로 없어서 살짝 해멨는데요, 혹시 저와 같은 상황이시라면, 위 소스코드도 한번 참고해보세요 :)

---

https://react-chartjs-2.js.org/examples/multitype-chart/