# Chart

**Path:** Components/Data Display

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Chart

 RbChart is a powerful charting component built on top of Chart.js, providing an easy way to display
 analytical data graphically. It supports multiple chart types including bar, line, pie, doughnut, and more,
 with extensive customization options for colors, legends, animations, and interactivity.

 Bar Charts

 Create vertical and horizontal bar charts with single or multiple datasets.

 Show code

 Simple Bar Chart

 Refresh Data 

 Multi-Dataset Bar Chart

 Horizontal Bar Chart

 Stacked Bar Chart

 Line Charts

 Display trends and time-series data with line charts, including smooth curves and filled areas.

 Show code

 Simple Line Chart

 Multi-Line Chart

 Smooth Line Chart

 Filled Area Chart

 Pie & Doughnut

 Visualize proportions and percentages with pie and doughnut charts.

 Show code

 Pie Chart

 Refresh Data 

 Doughnut Chart

 Polar Area Chart

 Market Share Breakdown

 Budget Allocation

 Mixed Charts

 Combine different chart types in a single visualization.

 Show code

 Bar & Line Combination

 Sales Performance Overview

 Financial Dashboard

 Understanding Mixed Charts

 Mixed Charts allow you to combine different chart types in a single visualization:

 Bar + Line: Great for comparing absolute values (bars) with trends (lines)

 Multiple Lines + Bars: Compare different metrics with different visualization styles

 Filled Areas + Lines: Emphasize ranges while showing precise trends

 Use Cases: 

 Comparing revenue (bars) with growth rate (line)

 Showing actual sales (bars) vs targets (line)

 Displaying volume (bars) with price trends (line)

 Advanced Features

 Stacked charts, custom legends, tooltips, and dynamic updates.

 Show code

 Dynamic Data Updates

 Update Data

 Add Data Point

 Remove Data Point

 Custom Legend Positions

 Top 
 Bottom 
 Left 
 Right 

 Interactive Options

 Show Tooltip 

 Show CrossHair 

 Enable Animation 

 Stacked Bar Chart with Multiple Datasets

 Real-time Data Simulation

 Start Real-time Updates

 Updates every 2 seconds 

 SystemInfo Refresh Repro

 Covers periodic refresh with crosshair enabled (the production pattern from Sy_SystemInfo).

 Show code

 SystemInfo-like Refresh + CrossHair

 Repro pattern: periodic ClearDataSets() + SetCrossHairVisibility(true) + UpdateAsync() .

 Refresh Once

 Start Auto Refresh 

 RTL Support

 Use Arabic chart titles and labels inside a local RTL container, including mixed Latin dataset labels when needed.

 Show code

 ملخص الطلبات الشهرية

 مثال RTL بعناوين عربية وتسميات مختلطة داخل الرسم نفسه.

 ✕

 Contents