막대 차트
카드 8장높이 2단위
막대는 0에서 시작하고, 굵기 24px을 넘지 않으며 끝만 둥글게 그립니다. 흐름과 비교에는 세로 막대를, 순위와 목록에는 가로 막대를 씁니다.
세로 막대
흐름과 비교 · 5장
0에서 시작하는 세로 막대 카드입니다. 기간이나 항목별 크기를 길이로 비교할 때 씁니다.
들어 있는 판단 3
- 막대는 길이로 읽으므로 세로축을 0에서 시작합니다. 작은 변화의 흐름을 봐야 하면 라인 카드를 씁니다.
- 막대 굵기는 24px을 넘기지 않고 남는 폭은 여백으로 둡니다. 끝만 둥글게, 바닥은 반듯하게 해 0선에서 자라는 모양을 지킵니다.
- 값은 마지막 막대에만, 막대 끝 오른쪽에 적습니다. 좁은 막대 위에 값을 얹으면 옆 막대와 겹칩니다. 나머지 값은 마우스를 올리거나 화살표 키로 봅니다.
막대 하나를 항목별 조각으로 나눠 쌓은 카드입니다. 합계의 흐름과 구성을 함께 볼 때 씁니다.
들어 있는 판단 3
- 가장 큰 항목을 바닥에 둡니다. 0선에서 시작하는 조각만 길이를 그대로 비교할 수 있어, 가장 중요한 항목의 흐름이 읽힙니다.
- 색은 큰 세 항목에만 주고 나머지는 회색 기타로 묶습니다. KPI - Stacked Bar와 같은 규칙이라 같은 항목은 같은 색이 됩니다.
- 조각 사이를 2px 띄워 색이 섞여 보이지 않게 하고, 합계는 마지막 막대 오른쪽과 툴팁에 적습니다.
Bar - Stacked 100%
bar-stacked-100기간마다 100%로 맞춘 누적 막대 카드입니다. 금액이 아니라 구성비가 어떻게 바뀌는지 볼 때 씁니다.
들어 있는 판단 3
- 막대 높이를 모두 100%로 맞춰, 합계가 오르내려도 비중의 변화만 보이게 합니다. 합계의 변화까지 봐야 하면 Bar - Stacked를 씁니다.
- 가장 큰 항목을 바닥에 둡니다. 0선에서 시작하는 바닥 조각은 비중의 오르내림을 그대로 읽을 수 있습니다.
- 툴팁에 비중과 금액을 함께 적어, 비중이 늘어난 것이 그 항목이 늘어서인지 다른 항목이 줄어서인지 구분하게 합니다.
막대마다 목표를 짧은 가로선으로 표시한 카드입니다. 기간마다 목표가 다를 때 달성 여부를 볼 때 씁니다.
들어 있는 판단 3
- 목표는 막대 위에 짧은 가로선으로 긋습니다. 기간마다 목표가 달라도 막대와 목표를 같은 자리에서 견줄 수 있습니다.
- 목표에 못 미친 기간은 막대를 옅게 칠해 달성 여부가 먼저 보이게 합니다. 낮을수록 좋은 지표는
"better": "down"으로 뒤집습니다. - 툴팁에 목표와 달성률을 함께 적습니다.
Bar - Diverging
bar-diverging0선 위아래로 막대가 갈리는 카드입니다. 목표 대비 차이나 증감처럼 부호가 있는 값에 씁니다.
들어 있는 판단 3
- 0선만 실선으로 긋고 막대는 0선에서 위아래로 자랍니다. 부호가 바뀌는 시점이 먼저 보입니다.
- 좋은 쪽은 초록, 나쁜 쪽은 빨강으로 KPI 배지와 같은 색을 씁니다. 낮을수록 좋은 지표는
"better": "down"으로 색을 뒤집습니다. - 값에는 부호를 붙여 적고, 마지막 막대의 값은 막대 끝 오른쪽에 적습니다.
가로 막대
순위와 목록 · 3장
막대 안에 이름을 얹고 오른쪽에 값을 둔 가로 막대입니다. 항목별 크기를 순위와 함께 볼 때 씁니다.
들어 있는 판단 3
- 항목은 큰 순서로 정렬합니다. 연령대나 구간처럼 순서가 정해진 항목은
"sort": false로 적은 순서를 지킵니다. - 다섯 줄까지 보여주고 나머지는 '기타 n개' 한 줄로 묶습니다. 기타는 막대 없이 합계만 적어, 묶인 합이 순위를 흐리지 않게 합니다. 줄 수는
max로 바꿉니다. - 이름을 막대 안에 얹어 이름 열 없이도 막대 폭을 넓게 씁니다. 툴팁에는 전체 중 비중을 적습니다.
가로 막대 위에 비교 값을 세로 눈금으로 긋고 오른쪽에 증감 배지를 둔 카드입니다. 항목별 값을 작년이나 지난달과 견줄 때 씁니다.
들어 있는 판단 3
- 비교 값은 막대를 하나 더 그리지 않고 세로 눈금으로 긋습니다. 막대 끝이 눈금을 넘었는지로 늘고 줄었는지가 먼저 읽힙니다.
- 증감 배지는 KPI 카드와 같습니다. 화살표는 오르내림을, 색은 좋고 나쁨(
better)을 나타냅니다. - 정렬은 이번 기간 값 기준입니다. 묶인 기타 줄도 합계끼리 비교한 증감을 적습니다.
Bar - Butterfly
bar-butterfly가운데에 항목 이름을 두고 두 집단의 막대를 좌우로 펼친 카드입니다. 남녀나 두 지역처럼 같은 항목을 두 집단으로 나눠 견줄 때 씁니다.
차트 가이드 · 버터플라이 차트 ↗
들어 있는 판단 3
- 두 집단은 같은 눈금을 씁니다. 가장 큰 값 하나에 양쪽 막대 길이를 맞춰, 좌우 길이를 그대로 견줄 수 있게 합니다.
- 항목 이름은 가운데에 한 번만 적고 값은 양쪽 끝 칸에 적습니다. 연령대처럼 순서가 있는 항목은 적은 순서를 지키고,
"sort": true면 두 값의 합이 큰 순서로 둡니다. - 두 집단은 주황과 분홍빨강으로 칠하고 집단 이름을 각 막대 위쪽 끝에 적습니다. 툴팁에는 두 값과 합계, 오른쪽 집단의 비중을 적습니다.
