리액트 차트 라이브러리 react-chartjs-2 Line Chart 라인차트 구현하기, options prop 작성, 표 디자인 바꾸기

안녕하세요! 

 

https://h2s0.tistory.com/103

리액트 차트 라이브러리 react-chartjs-2 Line Chart 설치, 여러 줄 (데이터 여러개) 라인차트 구현하기,

 

1편에서는 아래 중 data prop 에 대해서 알아보았는데요

<Line options={options} data={graphData} />

 

이번 포스팅에서는 options 를 설정하여 아래 왼쪽의 이미지를 오른쪽의 이미지처럼 좀 더 디자인이 예쁘고 가독성이 좋게 바꿔보겠습니다!!!

 

레츠고!

---

저희가 알아볼 옵션은 plugins 와 scales 입니다! 그 외에도 animation, layout, responsive, interaction 이 있다고 하는데... 앞의 두 옵션으로 충분히 제가 원하는 차트를 구현할 수 있어서 다음에 알아보도록 하겠습니다

 

 

위처럼 구현하려면 어떤 코드를 작성해야하는지 아래에 하나씩 적어보겠습니다

설명이나 가능한 다른 옵션들은 주석으로 넣을게요!

 

 

plugins

- legend

plugins: {
    legend: {
        display: true, // 기본 값이 true 지만 혹시몰라 작성함
        position: 'bottom', // top, left, right, bottom
        labels: {
          usePointStyle: true,
          pointStyle: 'rectRounded', // circle, line, rect, rectRounded
          padding: 30, // 여백
        }
    },
}

usePointStyle 설정 안 했을 때

왼쪽부터 pointStyle - line, rect, circle

 

+

사각형이.. 이렇게 안채워져 있어서 어떻게 하나 알아보니 data 설정할 때 backgroundColor 를 설정해줘야하더라구요!

안설정해주면 이렇게 텅 빈 사각형과 위에 점도 텅 빕니다 하핳

  const graphData = {
    labels: exampleData.months,
    datasets: exampleData.teams.map(team => ({
      label: team.teamName,
      data: team.score,
      borderColor: team.borderColor,
      backgroundColor: team.borderColor, 👈🏻👈🏻👈🏻이거!
      tension: 0.1,
    }))
  };

 

 

 

- title, subtitle

plugins: {
    title: {
        display: true,
        text: 'Chart Title',
        color: '#333',
        font: {
          size: 18
        },
        position: 'top', // left, right, bottom
    },
    subtitle: {
        display: true,
        text: 'Subtitle',
        color: '#666',
        font: {
          size: 14
        },
        position: 'top', // left, right, bottom
    },
}

text 에 넣고싶은 텍스트 작성, color 색깔, font 안에서 크기랑 글씨체 등 설정할 수 있어요

 

 

 

- tooltip

plugins: {
    tooltip: {
        enable: true,
        mode: 'point', // dataset, index, x, y, nearest
        titleFontColor: '#______', // 글자 색깔 설정 가능
        bodyFontColor: '#______',
        footerFontColor: '#______'
    },
}

 

dataset

index

 

scales

scales: {
  x: {
    ticks: {
      color: '#555',
      font: {
        family: 'GMarketSansMedium',
        size: 12,
      }
    },
    offset: true, // x축 여백
  },
  y: {
    ticks: {
      color: '#555',
      font: {
        family: 'GMarketSansMedium',
        size: 14,
      }
    },
    offset: true, // y축 여백
  }
}
};

여기는 그냥 글씨체, 글씨크기, 색깔 등을 설정할 수 있어요

한가지 offset 은 위 사진에 연보라색 구간인데 한 칸씩 때어줘서 가독성을 높여줘요!!