Skip to Content
PatternsData VisualizationComparisonBar Chart

Bar Chart

When to Use

Bar chart에서는 위계가 같은 여러 동등 값을 비교할 수 있습니다. 데이터는 막대로 표현되며, 측정 값에 따라 길이가 유동적으로 적용됩니다.

Live Demo

Bar Chart
View in Storybook →

Anatomy

Bar chart anatomy
  1. Title
  2. Legend (optional)
  3. Axis title (optional)
  4. Bar area
  5. Grid line (optional)
  6. Bar
  7. X-axis

Content

Structure

Bar chart의 각 막대(bar)는 하나의 데이터를 의미합니다.

또한, 데이터 특성에 맞게 세로형 또는 가로형으로 유연하게 표현될 수 있습니다. 세로형일 경우 x축에는 변수명을 기입하고, y축에는 측정 값을 표시해야 합니다. 가로형으로 사용 시 x, y축 값을 반대로 적용합니다.

Data Display

Bar chart의 개별 막대 데이터는 최소 너비 52px을 유지해야 합니다.

차트 구성시 최소 2개의 막대 데이터를 배치해야하며, 데이터 간 간격은 유연하게 적용될 수 있습니다. 데이터 양이 많아 다수의 막대 축이 배치된 경우에는 스크롤을 적용할 수 있습니다.

각 데이터의 변수명은 세로, 가로 유형에 관계 없이 막대 축을 기준으로 가운데 정렬로 적용해야 합니다.

Bar chart label alignment

막대 데이터의 변수명이 길어질 경우 세로형 사용을 지양합니다.

DoRecommended

긴 변수명 적용 시 가로 타입을 사용하여 텍스트 축약을 최소화 합니다.

Don'tRecommended

변수명 축약에 의해 텍스트 식별이 어려울 수 있으므로 세로 타입 사용을 지양합니다.

Interaction

Data Tooltip

사용자가 표현된 막대 데이터 위에 커서를 올렸을 때, 차트의 시각적 요약을 보완하여 정확한 수치 정보를 제공하는 데이터 툴팁을 노출할 수 있습니다. 데이터 툴팁은 차트의 세부 데이터를 확인할 수 있게 하는 보조 정보 계층입니다.

커서가 데이터 위에 올라가면 커서 주위에 legend와 x 값(세로형인 경우 y 값)을 나타내는 툴팁을 표시합니다.

Bar chart data tooltip