[TIL] React Chart js 옵션 정리

📃 Dataset

---

const data = {
  labels: timeLabel,
  datasets: [
    {
      type: 'line',
      label: '예측 발전량',
      data: predictionKwhAry,
      borderColor: '#F5B219',
      borderWidth: 4, // 선 굵기
      pointHitRadius: 5, // 호버 했을때 영억
      fill: false,
      pointRadius: 0, // 0일 경우 포인트 삭제
      lineTension: 0.1, // 꺾임 정도(?)
    },
  ],
};

📃 Option

---

Bar

<Bar
    data={data}
    width={100}
    height={25}
    options={{
      cornerRadius: 50, // roundedBar.js 적용했을 경우
      legend: {
        display: false,
      },
      // 플러그인 설정
      plugins: {
        // data labels 플러그인
        datalabels: {
          display: false,
        },
      },
      scales: {
        // Y축
        yAxes: [ 
          {
          ticks: { 
            // 간격 설정
            fontColor: '#ffffff',
            fontSize: 13,
          },
            gridLines: { 
              // grid line 설정
              display: false, 
              drawBorder: false,
              color: '#3c3d40',
            },
          },
        ],
        // X축
        xAxes: [ 
          {
            // bar 너비 조정
            categoryPercentage: 0.7,
            maxBarThickness: 20,
            ticks: {
              fontColor: '#ffffff',
              fontSize: 13,
            },
            gridLines: {
             display: false,
            },
          },
        ],
      },
    }
  }
/>

Line

<Bar
    data={data}
    width={100}
    height={25}
    options={{
      legend: {
        display: false,
      },
      plugins: {
        datalabels: {
          display: false,
        },
      },
      elements: {
        line: {
          borderCapStyle: 'round', // 선 끝을 둥글게
          borderJoinStyle: 'bevel', // 꺾이는 모서리를 둥글게
        }        
      },
    }
  }
/>

📍 커스텀 플러그인

---

그래프 영역에 배경색 지정

import Chart from 'chart.js';

Chart.pluginService.register({
  beforeDraw: function (chart, easing) {
    if (
      chart.config.options.chartArea &&
      chart.config.options.chartArea.backgroundColor
    ) {
      var ctx = chart.chart.ctx;
      var chartArea = chart.chartArea;

      ctx.save();
      ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
      ctx.fillRect(
        chartArea.left,
        chartArea.top,
        chartArea.right - chartArea.left,
        chartArea.bottom - chartArea.top,
      );
      ctx.restore();
    }
  },
});

chartArea: {
  backgroundColor: 'rgba(0, 0, 0, 0.1)',
},

option.cartArea.backgroundColor 로 색상 지정

참고 사이트

[GitHub] React Chart js
Chart js roundedBar.js 적용하기
Chart js data labels plugin
배경색 스크립트