Components
Bar Chart
기간별 추이·분포를 보여주는 막대 차트입니다. hover하면 값이 툴팁으로 뜹니다. 순수 CSS 실물입니다.
위 미리보기는 이미지가 아니라 실제 코드입니다 — 눌러 보고, 올려 보세요.
코드 보기
<div class="tn-bars">
<div class="b" data-v="42건"><i style="height:42%"></i></div>
<div class="b hi" data-v="86건"><i style="height:86%"></i></div>
</div>Variants
| 이름 | 설명 | 미리보기 |
|---|---|---|
| 기본 | 검정 막대 · hover 시 파랑 + 값 툴팁 | |
| 강조(hi) | 최대·현재 구간만 파랑 | |
| x축 레이블 | tn-bars-x — 막대와 1:1 정렬 |
Guidelines
✓ Do
- 강조는 한 구간만 (hi) — 나머지는 검정
- 값 단위를 data-v에 포함 (86건, 1.2s)
- 막대 12~24개가 적정 밀도
✕ Don't
- 막대마다 다른 색 금지 — 검정 + 파랑 강조뿐
- y축 눈금선을 그리지 않는다 (hover 값으로 충분)
- 가로 막대와 혼용하지 않는다
Specification
| 속성 | 토큰/값 | 비고 |
|---|---|---|
높이 | 110px (인라인 40~48px) | |
막대 간격 | 5px | |
radius | 4px 4px 2px 2px | 위만 둥글게 |
툴팁 | data-v attr → ::after |
비교
Insight '월별 처리 추이' 실물에서 추출. Bar vs Sparkline — 개별 값 비교·hover 판독이 필요하면 Bar, 카드 안 한 줄 추세 암시면 Sparkline.