React에서 Highcharts사용해보기

highcharts는 순수 JavaScript 라이브러리로, 이전 글에서 살펴봤던 d3보다 유연성은 훨씬 떨어지지만, 사용 방법이 어렵지 않고, 데모를 다양하게 제공하고 있어 데이터 시각화를 쉽게 할 수 있다는 장점이 있다.

그래서 최근에 진행한 프로젝트에서 조금 더 그래프에 커스터마이징이 필요한 network 그래프는 d3로, 여러 종류의 그래프가 필요한 사용자 대시보드 페이지는 highcharts를 사용해 구현했다.

d3.js로 구현한 network 그래프

Highcharts로 구현한 사용자 대시보드

이번 글에서는 리액트 프로젝트에서 highcharts를 사용하는 방법을 간단하게 알아보도록 하자.

Highcharts를 사용하기 위한 준비

리액트 프로젝트를 생성하고, highcharts 라이브러리와 highcharts-react-official 라이브러리를 설치해준다.

npx create-react-app highchart-graph

yarn add highcharts

yarn add highcharts-react-official

Highcharts 컴포넌트 만들기

highcharts에서 차트 컴포넌트를 생성하려면 options 객체 안에 넣고 싶은 옵션들을 객체로 추가하고, HighchartReact 컴포넌트의 속성으로 options 객체를 넘겨주기만 하면 된다.

이 때, 코드는 객체 리터럴 방식으로 표기하는 것을 권장하고 있다.

✅ 객체 리터럴(Object Literal)이란?

객체 리터럴은 객체를 생성할 때, 객체 안에 프로퍼티(속성)와 메소드를 나열하는 것을 말한다.

프로퍼티란 객체의 속성으로, key와 value로 구성된다.

메소드는 프로퍼티 중 value값이 함수인 것을 말한다.

참고로, 프로퍼티의 value로는 배열, 숫자, 문자열 등 다양한 값들이 올 수 있다.

객체 리터럴 방식은 여러 개의 아이템을 전송해야 할 때 유용하다.

하나의 객체에 여러 개의 멤버들을 포함하고 있어 하나의 객체만 전송하면 되기 때문에 훨씬 효율적이다.

또, 각 프로퍼티와 메소드는 key와 value로 구성되기 때문에 key값으로 각 멤버들을 구분할 수 있어 배열보다 사용하기 쉽다는 장점도 있다.

아래 예시에서 처음 4개는 프로퍼티이고, 마지막 2개는 메소드이다.

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  gender: "male",
  interests: ["music", "skiing"],
  bio: function () {
    alert(
      this.name[0] +
        " " +
        this.name[1] +
        " is " +
        this.age +
        " years old. He likes " +
        this.interests[0] +
        " and " +
        this.interests[1] +
        ".",
    );
  },
  greeting: function () {
    alert("Hi! I'm " + this.name[0] + ".");
  },
};

가장 기본적인 Line Chart

먼저 가장 기본적인 형태의 Line Chart 컴포넌트를 생성해보자.

chart 객체의 type 속성 값을 line으로 설정해주고, series 객체의 값에 넣고 싶은 데이터를 객체 형태로 넣어주면 아래와 같이 간단한 Line Chart가 생성된다.

Highcharts는 라이브러리 자체에서 기본적으로 제공되는 기능이 많기 때문에 이렇게 간단한 옵션만 추가해도 애니매이션과 반응형이 적용된 차트를 생성할 수 있다.

//App.js
import React from "react";
import Chart from "./Chart";

const App = () => (
  <div>
    <Chart />
  </div>
);

export default App;

//Chart.js
import React from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const options = {
  chart: {
    type: "line", //차트의 타입(형태)
  },
  title: {
    text: "Line chart", //차트의 타이틀
  },
  series: [
    {
      data: [1, 2, 1, 4, 3, 6], //차트에 들어갈 데이터
    },
  ],
};

const Chart = () => (
  <HighchartsReact highcharts={Highcharts} options={options} />
);

export default Chart;

type 속성값을 bar, pie, spline, scatter 등 원하는 모양으로 설정해주면 다음과 같이 다양한 형태의 차트도 쉽게 만들 수 있다.

차트에 데이터 개수 추가하기

데이터 시각화에서 중요한 점은 여러 데이터를 한 눈에 보기 쉽게 나타내는 것이다.

따라서 보통 데이터마다 각각의 차트를 따로 생성하는 것이 아니라 비교할 대상을 그래프에 함께 나타낸다.

이를 위해 데이터가 하나만 있던 기존의 차트에 데이터를 추가하는 방법을 알아보자.

series 객체의 속성값에 data를 담은 객체를 추가만 해주면 된다.

그리고 각 데이터의 이름은 name 속성을 이용해 각 데이터의 이름을 지정해 줄 수 있다.

이름을 따로 지정해주지 않으면 series1, series2 이런 식으로 보이기 때문에 어떤 데이터에 대한 차트인지 알 수 없다.

데이터의 이름은 꼭 지정해주도록 하자.

const options = {
  // ...
  series: [
    {
      name: "Line 1",
      data: [1, 2, 1, 4, 3, 6],
    },
    {
      name: "Line 2",
      data: [2, 4, 5, 2, 7, 1],
    },
  ],
};

x축, y축 커스터마이징하기

xAxis, yAxis 객체를 이용하면 x축과 y축의 속성들을 커스터마이징할 수 있다.

x축에 표시할 속성들을 categories의 속성값으로 넘겨주면 되는데,

이때 당연히 categories의 개수는 data의 개수와 같아야 한다.

y축이 어떤 값을 나타내는지는 yAxis 객체의 title 속성으로 지정할 수 있다.

y값의 최솟값, 최댓값은 각각 yAxis 객체의 min, max 속성으로 지정할 수 있고, 간격은 tickInterval 속성으로 조정할 수 있다.

const options = {
  // ...
  xAxis: {
    categories: ["월", "화", "수", "목", "금", "토", "일"],
  },
  yAxis: {
    min: 0,
    max: 10,
    tickInterval: 1,
    title: {
      text: "사용자 수",
    },
  },
  // ...
};

차트 크기 조정하기

위에서 말했듯이 Highcharts를 이용해서 만든 차트는 라이브러리 자체의 기능 덕에 기본적으로 반응형이 제공된다.

하지만 대시보드 같은 곳에서 차트를 사용하려면 원하는 크기로 차트를 조정해야 하는 경우가 생기기 마련이다.

그럴 때는 chart 객체에 width 속성과 height 속성을 추가해주면 차트를 원하는 크기로 고정할 수 있다.

const options = {
  chart: {
    type: "line",
    width: 600,
    height: 400,
  },
  // ...
};

차트 꾸미기

차트에 대한 기본적인 기능은 알아봤으니 이제 차트를 조금 더 예쁘게 사용하기 위한 방법들을 알아보자.

1. 워터마크 없애기

차트의 오른쪽 아래 Highcharts.com 라고 표시되어 있는 워터마크를 없애고 싶다면 credits 객체를 추가하고, enabled 속성을 false로 설정해주면 된다.

const options = {
  // ...
  credits: {
    enabled: false,
  },
  // ...
};

2. 색상 바꾸기

2–1. 차트 색상 바꾸기

colors 속성에 색상 배열을 추가하면 series 배열의 첫 번째 데이터부터 순서대로 색상이 적용된다.

const options = {
  colors: ["#FCB9AA", "#55CBCD"],
	// ...
};

2–2. 배경 색상 바꾸기

배경 색은 chart 객체 내의 backgroundColor 속성을 이용해 지정할 수 있다.

const options = {
  // ...
  chart: {
    type: "line",
    width: 600,
    height: 400,
    backgroundColor: "#F7F7F7",
  },
  // ...
};

배경색은 linearGradient 객체를 이용해 그라데이션으로 채울 수도 있다.

const options = {
  // ...
  chart: {
    type: "line",
    width: 600,
    height: 400,
    backgroundColor: {
      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
      stops: [
        [0, "#FFFFFF"], // 시작점은 흰색
        [1, "#E0E0E0"], // 끝점은 연한 회색
      ],
    },
  },
  // ...
};

✅ linearGradient 객체

linearGradient 객체는 선형 그라디언트를 효과를 주는 객체이다.

선형 그라디언트는 색상이 일정하게 변하는 방식으로, Highcharts에서 선형 그라디언트를 사용하기 위한 속성들에 대해 알아보자.

• x1, y1: 그라디언트의 시작점의 x, y 좌표를 지정합니다.
• x2, y2: 그라디언트의 끝점의 x, y 좌표를 지정합니다.

네 가지 속성들(x1, y1, x2, y2)은 그라디언트의 시작점과 끝점을 지정하기 때문에 이 속성들을 이용하면 그라디언트의 방향을 원하는대로 결정할 수 있다.

이 속성들은 모두 비율로 표현되며, 0에서 1 사이의 값을 가진다.

예시로 세 가지 그라디언트 방향을 설정하는 방법을 살펴보자.

세로 방향 그라디언트

• x1: 0, y1: 0, x2: 0, y2: 1: 위에서 아래로 색상이 변한다.

가로 방향 그라디언트

• x1: 0, y1: 0, x2: 1, y2: 0: 왼쪽에서 오른쪽으로 색상이 변한다.

대각선 방향 그라디언트

• x1: 0, y1: 0, x2: 1, y2: 1: 왼쪽 위에서 오른쪽 아래로 색상이 변한다.

stops 속성은 linearGradient 객체와 함께 사용되며, 그라디언트의 색상을 지정한다.

stops 속성의 배열은 ‘[비율, 색상]’으로 구성되며, 비율은 0에서 1사이의 값을 가진다.

3. 테두리 추가하기

chart 객체의 borderWidth 속성과 borderColor 속성을 추가해 차트에 테두리를 추가할 수 있다.

그리고 모서리의 둥글기는 borderRadius 속성으로 조절할 수 있다.

const options = {
  // ...
  chart: {
    type: "line",
    width: 600,
    height: 400,
    backgroundColor: "#F7F7F7",
    borderWidth: 2, // 테두리 두께
    borderColor: "#C6DBDA", // 테두리 색상
    borderRadius: 5, // 테두리 모서리 둥글기
  },
  // ...
};

4. 그림자 추가하기

차트의 테두리에 그림자를 추가하고 싶다면, chart 객체에 shadow 속성을 추가하면 된다.

shadow 속성에 true를 값으로 주면 기본 그림자가 적용되고, true 대신 객체를 값으로 줘서 그림자의 색이나 위치를 커스터마이징 할 수도 있다.

✅ shadow 객체

• color: 그림자의 색상. 기본값은 검정색('#000000').
• offsetX: 그림자의 수평방향 오프셋. 양의 값은 그림자를 오른쪽으로 이동시키고, 음의 값은 왼쪽으로 이동시킨다. 기본값은 1.
• offsetY: 그림자의 수직방향 오프셋. 양의 값은 그림자를 아래로 이동시키고, 음의 값은 위로 이동시킨다. 기본값은 1.
• opacity: 그림자의 투명도. 0은 완전히 투명하고 1은 완전히 불투명하다. 기본값은 0.15.
• width: 그림자의 블러 반경. 큰 값일수록 그림자가 더 흐릿하게 보이게 한다. 기본값은 3.

const options = {
  // ...
  chart: {
    type: "line",
    width: 600,
    height: 400,
    backgroundColor: "#F7F7F7",
    borderWidth: 2, // 테두리 두께
    borderColor: "#C6DBDA", // 테두리 색상
    borderRadius: 5, // 테두리 모서리 둥글기
    shadow: {
      color: "rgba(0, 0, 0, 0.5)", // 반투명한 검은색 그림자
      offsetX: 3, // 3픽셀 오른쪽으로 오프셋
      offsetY: 3, // 3픽셀 아래로 오프셋
      opacity: 0.8, // 그림자의 투명도
      width: 5, // 그림자의 너비
    },
  },
  // ...
};

아래는 실습 내용을 모두 적용한 전체 코드이다.

//App.js
import React from "react";
import Chart from "./Chart";

const App = () => (
  <div>
    <Chart />
  </div>
);

export default App;

//Chart.js
import React from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const options = {
  colors: ["#FCB9AA", "#55CBCD"], // 차트 색상 변경
  chart: {
    type: "line",
    width: 600,
    height: 400,
    backgroundColor: "#F7F7F7",
    borderWidth: 2, // 테두리 두께
    borderColor: "#C6DBDA", // 테두리 색상
    borderRadius: 5, // 테두리 모서리 둥글기
    shadow: {
      color: "rgba(0, 0, 0, 0.5)", // 반투명한 검은색 그림자
      offsetX: 3, // 3픽셀 오른쪽으로 오프셋
      offsetY: 3, // 3픽셀 아래로 오프셋
      opacity: 0.8, // 그림자의 투명도
      width: 5, // 그림자의 너비
    },
  },
  credits: {
    enabled: false,
  },
  title: {
    text: "Line Chart",
  },
  xAxis: {
    categories: ["월", "화", "수", "목", "금", "토", "일"],
  },
  yAxis: {
    min: 0,
    max: 10,
    tickInterval: 1,
    title: {
      text: "사용자 수",
    },
  },
  series: [
    {
      name: "Line 1",
      data: [1, 2, 1, 4, 3, 6, 8],
    },
    {
      name: "Line 2",
      data: [2, 4, 5, 2, 7, 1, 3],
    },
  ],
};

const Chart = () => (
  <HighchartsReact highcharts={Highcharts} options={options} />
);

export default Chart;