자바스크립트 chart.js Stacked Bar Chart 만들기 (스택 Bar 차트)

 

 

안녕하세요.

오늘은 지난 포스팅에 이어서 bar chart를 응용한 stacked bar chart를 만들어보려고 합니다. stack은 의미 그대로 쌓아 올리는 개념으로 bar chart를 데이터 유형별로 쌓이는 형태로 만드는 방식입니다. stack 형태의 bar chart도 활용하기가 아주 좋습니다. 하나의 시스템에서도 다양한 데이터를 시각화하기 위해서 다양한 방식의 차트를 필요로 합니다. 그럼 stacked 형태의 bar chart 만들기를 시작해 보겠습니다.

 

---

1. Stacked Bar Chart 예시

chart.js 라이브러리 import

<!-- Chart.js 라이브러리 import -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

가장 먼저 chart.js 라이브러리를 cdn 형식으로 import 시켜줬습니다. 

 

DOM canvas 요소 추가  

<!-- Chart 영역 -->
<canvas id="barChart"></canvas>

chart.js는 기본적으로 canvas 요소에 차트를 그리기 때문에 canvas로 생성해 줬습니다. 자바스크립트에서 canvas 요소를 가져오기 위해 id값도 같이 입력해 줬습니다.

 

new Chart() 함수 

/**
 * Chart 설정 및 생성
 */
new Chart(document.getElementById('barChart'), {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [
            {
                label: 'Dataset #1',
                data: [10, 19, 31, 55, 23, 37],
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderWidth: 1,
            },
            {
                label: 'Dataset #1',
                data: [5, 19, 13, 15, 20, 7],
                backgroundColor: 'rgba(255, 205, 86, 0.2)',
                borderWidth: 1,
            },
            {
                label: 'Dataset #1',
                data: [21, 12, 9, 12, 23, 5],
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderWidth: 1,
            },
        ],
    },
    options: {
        scales: {
            x: {
                stacked: true,
            },
            y: {
                stacked: true
            }
        }
    }
});

chart를 생성하기 위해서 new Chart() 함수를 호출하면 됩니다. 함수를 호출할 때에는 파라미터로 canvas 요소와 생성할 차트의 설정 정보를 넘겨주면 됩니다. stack 구조로 보여주기 위해 datasets에 3 종류의 데이터로 나눠서 추가해 줬습니다.

 

datasets

datasets: [
    {
        label: 'Dataset #1',
        data: [10, 19, 31, 55, 23, 37],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderWidth: 1,
    },
    {
        label: 'Dataset #1',
        data: [5, 19, 13, 15, 20, 7],
        backgroundColor: 'rgba(255, 205, 86, 0.2)',
        borderWidth: 1,
    },
    {
        label: 'Dataset #1',
        data: [21, 12, 9, 12, 23, 5],
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderWidth: 1,
    },
]

datasets 부분만 따로 보면 데이터 유형을 3종류로 추가하였고, stack을 쌓을 수 있도록 데이터 배열별로 index 위치를 맞춰서 데이터를 추가해 줬습니다.

- 1번 stack 데이터 : data: [10, 19, 31, 55, 23, 37]
- 2번 stack 데이터 : data: [5, 19, 13, 15, 20, 7]
- 3번 stack 데이터 : data: [21, 12, 9, 12, 23, 5]

위와 같이 인덱스를 맞춰서 데이터를 추가해주면 됩니다. (인덱스를 꼭 맞춰서 데이터를 추가하지 않아도 됩니다)

마지막으로 options 설정에 stack 속성을 추가해 주면 됩니다.

 

options

options: {
    scales: {
        x: {
            stacked: true,
        },
        y: {
            stacked: true
        }
    }
}

위처럼 options > scales 하위에 X축, Y축 별로 stacked: true 값을 추가해 주면 됩니다. 

 

---

실행 결과

위처럼 데이터 유형별로 bar가 쌓여진 결과 차트입니다. stack구조의 bar chart를 활용하려면 위의 예시처럼 색상을 다르게 주는 것이 좋습니다! 그렇지 않으면 색이 겹쳐서 구분이 안되기 때문에 색을 구분 지어줘야 합니다.

 

 

반응형

---

2. Stacked Bar Chart 그룹화 예시

datasets: [
    {
        label: 'Dataset #1',
        data: [10, 19, 31, 55, 23, 37],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderWidth: 1,
        stack: 'a',
    },
    {
        label: 'Dataset #1',
        data: [5, 19, 13, 15, 20, 7],
        backgroundColor: 'rgba(255, 205, 86, 0.2)',
        borderWidth: 1,
        stack: 'a',
    },
    {
        label: 'Dataset #1',
        data: [21, 12, 9, 12, 23, 5],
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderWidth: 1,
        stack: 'b',
    },
]

처음에 보여드린 예시 코드에서 설정값만 하나 추가해 줬습니다. 데이터별로 stack 속성을 추가해 줬는데, 보게 되면 첫번째와 두 번째 데이터의 stack 값은 'a'로 동일하게 줬고, 세 번째 데이터만 'b'로 다르게 줬습니다. 이렇게 값을 주면 stack값이 동일한 데이터끼리 한 stack에 쌓이게 되는 구조입니다. 

---

실행 결과

위의 실행 결과처럼 첫번째와 두 번째 데이터는 하나의 그룹으로 묶여서 stack이 쌓였고, 세 번째 데이터만 따로 stack이 쌓였습니다. 생각보다 간단한 설정으로 활용도가 한층 높아진 것 같습니다!

 

---

마무리

오늘은 자바스크립트와 chart.js를 활용한 Stack 형태의 bar chart를 만들어 봤습니다. 데이터를 시각화하여 chart로 그려내는 방식은 bar chart만 해도 정말 다양하게 표현할 수 있는데요. 실제 업무에선 사용자가 이보다 조금 더 까다롭고 난해한 시각화를 요청할 때가 많습니다. 하지만 오늘 만들어본 예시처럼 대부분은 속성값 하나하나씩 추가해 나가는 방식이기 때문에 이렇게 예제를 통해서 한두 번씩만 연습을 해봐도 난해한 chart도 어렵지 않게 구현하실 수 있을 거예요!

 

그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다.

 

 

---

* chart.js 공식 사이트

https://www.chartjs.org/docs/latest/

Chart.js | Chart.js