[javascript] Chart.js에서의 범례 스타일 및 위치 설정

27 Nov 2023

javascript

Chart.js는 웹 애플리케이션에 대한 대화형 차트를 생성하는 데 사용되는 JavaScript 라이브러리입니다. 차트를 구성할 때 중요한 요소 중 하나는 범례입니다. 범례는 차트 요소를 식별하는 데 도움을 주는 요소로, 일부 데이터 항목과 그에 해당하는 색상을 표시합니다.

이번 블로그 포스트에서는 Chart.js에서 범례의 스타일 및 위치를 설정하는 방법을 알아보겠습니다.

1. 범례 스타일

범례의 스타일을 변경하기 위해서는 legend 객체의 labels 속성을 사용해야 합니다. 이 속성은 다양한 스타일 옵션을 제공합니다.

1.1. 폰트 스타일 설정

범례의 폰트 스타일을 변경하려면 labels 객체의 font 속성을 사용합니다. 아래는 폰트 스타일을 변경하는 예제입니다.

var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            labels: {
                font: {
                    family: 'Arial',
                    size: 14,
                    weight: 'bold'
                }
            }
        }
    }
});

1.2. 색상 설정

범례의 아이콘 색상을 변경하려면 labels 객체의 color 속성을 사용합니다. 아래는 아이콘 색상을 변경하는 예제입니다.

var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            labels: {
                color: 'red'
            }
        }
    }
});

2. 범례 위치 설정

범례의 위치를 설정하기 위해서는 legend 객체의 position 속성을 사용합니다. 이 속성은 다양한 값들을 가질 수 있습니다.

2.1. 오른쪽 상단

범례를 차트의 오른쪽 상단에 표시하려면 position 속성에 top-right 값을 설정합니다.

var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            position: 'top-right'
        }
    }
});

2.2. 왼쪽 하단

범례를 차트의 왼쪽 하단에 표시하려면 position 속성에 bottom-left 값을 설정합니다.

var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            position: 'bottom-left'
        }
    }
});

2.3. 없음

범례를 숨기려면 position 속성에 none 값을 설정합니다.

var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            position: 'none'
        }
    }
});

위의 예제 코드를 참고하여 Chart.js에서 범례의 스타일 및 위치를 설정하는 방법에 대해 알아보았습니다. 이를 통해 웹 애플리케이션 내에서 적합한 스타일과 위치의 범례를 사용할 수 있습니다.

더 자세한 정보를 원하시면 Chart.js 공식 문서를 참고하십시오.