[React] react-chartjs-2로 만든 Bar chart에 데이터레이블 추가하기(플러그인)

react-chartjs-2로 Bar 차트 만들기

chartjs-plugin-datalabels 플러그인 적용은 6.부터

 

완성 화면

1. 라이브러리 설치

# 리액트차트js2, 차트.js, datalabels 플러그인 
npm install react-chartjs-2 chart.js chartjs-plugin-datalabels

2. 기본 틀 만들기

// Bar.js 파일
import {
  Chart as ChartJS,
  CategoryScale,
  BarElement,
  LinearScale,  
} from 'chart.js';

ChartJS.register(CategoryScale, BarElement, LinearScale);

3. 옵션 설정

// Bar.js
const options = {
  maintainAspectRatio: false, // 비율 유지
  responsive: true, // 반응형
  scales: {
    x: {
      border: {
        display: false, // x축 지우기
      },
      grid: {
        display: false, // 세로 눈금선 지우기
      },
      ticks: { // x축 항목 스타일
        font: {
          size: 16, // px 단위
          weight: 'bold',
          family: 'Pretendard-medium',
        },
      },
    },
    y: {
      max: 70, // 최댓값 지정
      ticks: {
        display: false, // y축 항목 가리기
      },
    },
  },
};

* Bar 옵션 설정

4. 데이터 설정

// Bar.js
const data = {
  labels: ['감자', '고구마', '바나나', '토마토'], // x축 항목
  datasets: [
    {
      data: [10, 45, 35, 30], // 항목값      
    },
  ],
};

* Bar 데이터 설정

5. (데이터레이블 적용 전) 4.까지 화면에 그리기

// Bar.js
import { Bar } from 'react-chartjs-2';

const BarChart = () => {
  return (
    <div>
      <Bar options={options} data={data} />
    </div>
  )  
}

export default BarChart;

6. 데이터레이블 플러그인 옵션 추가

// Bar.js
import ChartDataLabels from 'chartjs-plugin-datalabels';

// options 객체에 추가
const options = {
  // ... 3.에서 작성한 내용
  plugins: {
    datalabels: {
      align: 'end',
      anchor: 'end',
      font: {
        size: 24,
        weight: 'bold',
      },
      formatter: function (value, context) {
        // 데이터레이블 값 변경 함수
        return value;
      },
    },
  },
};

* 데이터레이블 위치 지정

7. Bar Element에 플러그인 추가

// Bar.js
import ChartDataLabels from 'chartjs-plugin-datalabels';

const BarChart = () => {
  return (
    <Bar options={options} data={data} plugins={[ChartDataLabels]} />
  )  
}

export default BarChart;

 

전체 코드

// Bar.js
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';
import ChartDataLabels from 'chartjs-plugin-datalabels';

ChartJS.register(CategoryScale, BarElement, LinearScale);

const options = {
  maintainAspectRatio: false, // 비율 유지
  responsive: true, // 반응형
  scales: {
    x: {
      border: {
        display: false, // x축 지우기
      },
      grid: {
        display: false, // 세로 눈금선 지우기
      },
      ticks: { // x축 항목 스타일
        font: {
          size: 16, // px 단위
          weight: 'bold',
          family: 'Pretendard-medium',
        },
      },
    },
    y: {
      max: 70, // 최댓값 지정
      ticks: {
        display: false, // y축 항목 가리기
      },
    },
  },
  plugins: {
    datalabels: {
      align: 'end',
      anchor: 'end',
      font: {
        size: 24,
        weight: 'bold',
      },
      formatter: function (value, context) {
        // 데이터레이블 값 변경 함수
        return value;
      },
    },
  }
};

const data = {
  labels: ['감자', '고구마', '바나나', '토마토'], // x축 항목
  datasets: [
    {
      data: [10, 45, 35, 30], // 항목값      
    },
  ],
};

const BarChart = () => {
  return (
    <div>
      <Bar options={options} data={data} plugins={[ChartDataLabels]} />
    </div>
  )  
}

export default BarChart;

 

 

 

 

2023.06.13