Buma UI - DocumentationBuma UI - Documentation
Get Started
Foundations
Components
Resources
Patterns
Data Visualization
Back to BSpace
Get Started
Foundations
Components
Resources
Patterns
Data Visualization
  • stacksFoundations
    • 💡 Overview
    • Color
    • Principle
    • Typography
  • brickComponents
    • 💡 Overview
    • Accordion
    • Alert
    • Avatar
    • Badge
    • Bottom Sheet
    • Bread Crumb
    • Button
    • Button Link
    • Button Navigation
    • Calendar
    • Card
    • Chat
    • Checkbox
    • Chips
    • Choice Tile
    • Comment
    • Date Picker
    • Divider
    • Download
    • Drawer
    • Dropdown
    • Empty State
    • Floating Button
    • Form Input
    • Header
    • Hint
    • Icon
    • List Choice
    • Loading
    • Modal
    • Navigation Bar
    • Notification
    • Pagination
    • Progress Bar
    • Radio Button
    • Search
    • Scrolling Bar
    • Segmented Switch
    • Side Menu
    • Side Tab
    • Slider
    • Switch
    • Tab
    • Table
    • Text Area
    • Text Input
    • Time Picker
    • Title
    • Toast
    • Tooltip
    • Wizzard
  • splitscreenPattern
    • 💡 Overview
    • Filter
      upcoming
    • Form
      upcoming
    • Notification
    • PWA
      upcoming
    • table
      upcoming
    • Upload Download
      upcoming
  • insert_chartData Visualization
    • 💡 Overview
    • Tiering
    • Pattern
    • Chart and Graph
      • Chart Selection Guide
      • Map Selector
      • Donut Chart
      • Donut Progress Bar Chart
      • Spider Chart
      • Line Chart
      • Chart Area
      • Speedometer
      • Heat Map
      • Scatter Plot
      • Pie Chart
      • Bar Chart
      • Waterfall Chart
      • Sunburst Chart
      • Tree Decomposition Chart
      • Scorecards
      • Table
      • Micro Visualization
    • Typography
    • Color Palette
  • data_objectTokens
    upcoming
  • inventory_2Resources
    • 💡 Overview
    • Mobile
      new
      • 💡 Introduction
      • Installation
      • General
        • Important Rules
        • Naming Convention
        • Clean Architecture
    • Web
      upcoming

Chart Area

Anatomy

Text on a chart refers to any written information or labels included in a chart to provide context, describe data, or improve the readability and understanding of the visualization.
 The label on the vertical (up-down) side of the chart, showing what the numbers represent.
 A small dot marking a specific data point on the chart, making it easier to see exact values.
 Area Chart is a type of data visualization that combines elements of a line chart and a filled area beneath the line. It is used to show trends over time or across categories, emphasizing the magnitude of values.
 Faint lines across the chart that help you match data points to the values on the axes.
 A small box that pops up when you hover over a data point, showing more details about it.
 The label on the horizontal (left-right) side of the chart, showing time, categories, or other data types.
 A bar that lets you move around the chart when there’s too much data to fit on the screen.
Guidelines for Area Charts
  • The maximum number of line series is 5 series.​
  • The Maximum number of Characters is 30 Characters per tooltip
  • The minimum number of data points on X-Axis is 10 data points, and the maximum number of data points on Y-Axis is 10 data points.​
Example of Source Data

When to Use a Area Chart?
  • Shows changes over time.​
  • Shows a continuous dataset.​
  • Identifying trends, patterns and fluctuations.​
arrow_back
Previous Line Chart
Next Speedometer
arrow_forward