[Chart.JS] 차트 JS 옵션 설명서.

차트.JS 옵션에 대한 설명서가 필요했는데, 그것을 깔끔하게 설명한 내용이 이어서 가져와봤다.

 

Chart.js ver 3.0 이상 적용코드이다.

원래는 내용을 그대로 안가져오는 편이긴하나 가끔 원본 글을 삭제하거나 비공개 처리해서

해당 코드를 못 보는 경우가 있어 가져왔다.

 

1️⃣anchor - 데이터레이블의 위치

👉🏻영어로는 '닻을 내리다, 정박하다'이다. 즉 데이터레이블이 차트 축에서 얼마나 떨어져있는지 정한다.

• start: 차트에서 가장 가까이 있다.
• center: default값이고 차트에서 중간 거리만큼 떨어져있다.
• end: 차트에서 가장 멀리 떨어져있다.

start - center - end

👉🏻차례대로 속성을 start, center, end로 줬을 때이다.(미세한 차이!)

 

2️⃣clamp - 가시적인 부분에서의 데이터레이블의 위치

👉🏻가끔 데이터레이블이 차트 바깥부분으로 나가면 보이지 않는 경우가 생긴다. 이때 보이도록 할 것인지 원래의 위치에 그대로 위치시킬 것인지 정한다.

• true: 차트 안쪽 위치로 이동시킨다.
• false: 차트 바깥쪽(원래) 위치에 둔다.

👉🏻얘는 직접 상황을 만들어 캡쳐하기 어려워서 공식문서 사진으로 대체ㅎ

 

3️⃣clip - 데이터레이블이 일부 가려질 때

👉🏻가끔 데이터레이블이 완전히 차트 바깥으로 나가지 않고 일부만 가릴 때가 있다. 이때 완전히 보이지 않게 할지 반정도만 가려진 상태로 둘지 정한다. 

• true: 데이터레이블을 아예 가린다.
• false: 데이터레이블이 일부만 가려진 상태로 둔다.

false - true

👉🏻위 사진은 각각 clip 속성이 false, true일 때 모습니다. false일 때는 일부 가려진채로 두고 true일 때는 완전히 가려버린 모습을 볼 수 있다.

 

3️⃣align & offset - 데이터레이블의 방향

👉🏻align은 데이터레이블의 세세한 방향을 각도로 정한다.

👉🏻offset은 차트와 떨어진 거리를 나타내고 default가 4이다. align이 center일 때는 적용되지 않는다.

align: 45 - 135 - -135

👉🏻각각 align이 45도, 135도, -135도인 모습이다. 45도일 때는 데이터 레이블이 오른쪽으로 밀려 아예 안 보이고 왼쪽의 데이터레이블이 빼꼼한 모습을 볼 수 있다.

 

 

offset: 5 - 20 - 50

👉🏻각각 offset이 5, 20, 50일 때이다. 점점 멀어지는 것을 볼 수 있다.

 

🐰이후 formatter와 display 속성은 함수를 사용했기 때문에 이후 포스팅할 함수편에서 만나보자!ㅎㅎ

x축과 y축

🐰x축과 y축은 options의 scales 속성 안에서 설정해준다.

options: {
    scales: {
            y: {
                type: 'linear',
                position: 'right',
                grace: '5%',
                grid: {
                    display: false,
                },
            },
            x: {
                grid: {
                    display: false,
                },
                ticks: {
                    color: function (ctx) {
                        if ( ctx.index === lastDataIndex ) { return '#426AE6' }
                        else { return 'black' }
                    }
                }
            },
        }
    },
}

👉🏻x축과 y축 모두 동일하게 같은 설정을 줄 수 있다. 처음부터 살펴보자!

 

1️⃣type

👉🏻축의 형태로 linear, time, radar 등등이 있다.

 

2️⃣position

👉🏻축의 위치이다. 아래 사진은 y축의 position을 각각 right, left로 설정했을 때이다.

right - left

 

3️⃣grace

👉🏻축의 범위이다. 값이 커질수록 범위가 커진다. 아래 사진은 y축의 grace가 각각 5%, 50%, 100%일 때이다. 퍼센트로 설정한다.

5% - 50% - 100%

 

4️⃣grid

👉🏻보조선이다. 아래는 y축이 각각 true, false일 때다.

true - false

🐰ticks의 color에도 함수가 사용되었으니 다음에 만나도록 하자ㅎㅎ

 

출처.

https://itwithruilan.tistory.com/86

[010/JS Library] chart.js | 그래프 커스텀하기 (일반편)

원본 출처

https://chartjs-plugin-datalabels.netlify.app/guide/positioning.html