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
Overview Data visualization color palette is designed to enhance readability and clarity in presenting information. Colors are important for showing differences between data points, highlighting important information, and guiding the audience's attention. Consistent application of colors makes it easy to understand the data, which reduces the effort needed to understand it while keeping everything visually balanced. To keep things clear and easy to understand, all colors should be used according to the rules for design, making sure everything align.
Semantic ColorSemantic colors show why each color is used in data visualization. They help show the difference between elements based on their function. For example, they can highlight primary data points, secondary details, warnings, or critical insights to make data easier to understand.
PropertiesDesc
Success
Represents positive data, completed tasks, or successful outcomes, often shown in green for clarity.
Warning
Used to draw attention to potential issues or risks that require caution, typically represented in yellow.
Information
Communicates neutral information, instructions, or updates to assist understanding, commonly shown in blue.
Danger
Highlights negative data, urgent issues, or actions requiring immediate attention, often represented in red for urgency.
Success
Success100
Hex content_copy
Success200
Hex content_copy
Success300
Hex content_copy
Success400
Hex content_copy
Success500
Hex content_copy
Success600
Hex content_copy
Success700
Hex content_copy
Success800
Hex content_copy
Success900
Hex content_copy
Warning
Warning100
Hex content_copy
Warning200
Hex content_copy
Warning300
Hex content_copy
Warning400
Hex content_copy
Warning500
Hex content_copy
Warning600
Hex content_copy
Warning700
Hex content_copy
Warning800
Hex content_copy
Warning900
Hex content_copy
Information
Info100
Hex content_copy
Info200
Hex content_copy
Info300
Hex content_copy
Info400
Hex content_copy
Info500
Hex content_copy
Info600
Hex content_copy
Info700
Hex content_copy
Info800
Hex content_copy
Info900
Hex content_copy
Danger
Danger100
Hex content_copy
Danger200
Hex content_copy
Danger300
Hex content_copy
Danger400
Hex content_copy
Danger500
Hex content_copy
Danger600
Hex content_copy
Danger700
Hex content_copy
Danger800
Hex content_copy
Danger900
Hex content_copy

Main Data Color The main color for categorical data in charts helps make the different data groups stand out, ensuring each category is visually unique and easy to compare while maintaining clarity and balance.
Royal Blue
RoyalBlue100
Hex content_copy
RoyalBlue500
Hex content_copy
RoyalBlue700
Hex content_copy
Teal
Teal100
Hex content_copy
Teal500
Hex content_copy
Teal700
Hex content_copy
Magenta
Magenta100
Hex content_copy
Magenta500
Hex content_copy
Magenta700
Hex content_copy
Orange
Orange100
Hex content_copy
Orange500
Hex content_copy
Orange700
Hex content_copy
Indigo
Indigo100
Hex content_copy
Indigo500
Hex content_copy
Indigo700
Hex content_copy
Violet
Violet100
Hex content_copy
Violet500
Hex content_copy
Violet700
Hex content_copy

Color Order Guidelines The use of color in the chart starts with the color Royal Blue for the main data, followed by the secondary color Orange. If additional colors are needed, use the sequence after. This is done to maintain contrast, readability and consistency.

Specialty Data Color Specialty colors are used for specific data types like cost, quantity, manpower, equipment, safety, production, achievement, and non-achievement, ensuring clear distinction and emphasizing critical insights in charts.
Cost
Cost500
Hex content_copy
Quantity
Quantity500
Hex content_copy
Manpower
Manpower500
Hex content_copy
Equipment
Equipment500
Hex content_copy
Safety
Safety500
Hex content_copy
Production
Production500
Hex content_copy

Sequential Color Sequential colors are used for representing data with a natural progression, such as ranges or gradients, where color intensity reflects the magnitude or value in the chart.
Achieve
Achieve100
Hex content_copy
Achieve500
Hex content_copy
Achieve700
Hex content_copy
notAchieve
notAchieve100
Hex content_copy
notAchieve500
Hex content_copy
notAchieve700
Hex content_copy

Diverging Color Diverging colors are used in heatmaps to show variations from a central point, using contrasting hues on either side to represent positive and negative values or differences in magnitude clearly.
Diverging
-100
Hex content_copy
-80
Hex content_copy
-60
Hex content_copy
-40
Hex content_copy
-20
Hex content_copy
0
Hex content_copy
+20
Hex content_copy
+40
Hex content_copy
+60
Hex content_copy
+80
Hex content_copy
+100
Hex content_copy

arrow_back
Previous Typography