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

Line Chart

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 box that pops up when you hover over a data point, showing more details about it.
 A small dot marking a specific data point on the chart, making it easier to see exact values.
 Faint lines across the chart that help you match data points to the values on the axes.
 A line connecting points on a chart. that represent data value
 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 Line 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 Line Chart?
  • Shows changes over time.​
  • Shows a continuous dataset.​
  • Identifying trends, patterns and fluctuations.​
arrow_back
Previous Spider Chart
Next Chart Area
arrow_forward