Skip to Content
PatternsData VisualizationComparisonBar Chart

Bar Chart

When to Use

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

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