Charts Examples

Bar Charts

Compare values across categories with vertical bar charts

Monthly Sales

Product Performance

<div data-rsl-chart
     data-type="bar"
     data-values="[12500, 18200, 15800, 22400, 19600, 24100]"
     data-labels='["Jan", "Feb", "Mar", "Apr", "May", "Jun"]'
     data-color-scheme="primary"
     data-animate
     data-show-values
     style="height: 250px;"></div>

Line Charts

Visualize trends over time with smooth line charts

<div data-rsl-chart
     data-type="line"
     data-values="[30, 45, 35, 60, 55, 70, 65, 80, 75, 90, 85, 95]"
     data-labels='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]'
     data-title="Website Traffic (Thousands)"
     data-color-scheme="cool"
     data-animate
     data-curved
     style="height: 300px;"></div>

Area Charts

Show magnitude over time with filled area visualization

<div data-rsl-chart
     data-type="area"
     data-values="[20, 35, 45, 30, 55, 60, 50, 70, 65, 80]"
     data-labels='["Week 1", "Week 2", ...]'
     data-title="User Engagement Score"
     data-color-scheme="success"
     data-animate
     style="height: 300px;"></div>

Pie & Doughnut Charts

Show part-to-whole relationships with circular charts

Market Share

Budget Allocation

<!-- Pie Chart -->
<div data-rsl-chart
     data-type="pie"
     data-values="[35, 25, 20, 15, 5]"
     data-labels='["Chrome", "Safari", "Firefox", "Edge", "Other"]'
     data-color-scheme="rainbow"
     data-animate
     data-show-values
     data-show-legend></div>

<!-- Doughnut Chart -->
<div data-rsl-chart
     data-type="doughnut"
     data-values="[40, 25, 20, 15]"
     data-labels='["Development", "Marketing", "Operations", "R&D"]'
     data-title="$1.2M"
     data-color-scheme="cool"
     data-animate
     data-show-legend></div>

Sparklines

Compact inline charts for tables and dashboards

Revenue

+23%

Users

+45%

Bounce Rate

-17%

<!-- Line Sparkline -->
<div data-rsl-chart
     data-type="sparkline"
     data-values="[12, 15, 13, 17, 19, 18, 22, 24, 21, 26]"
     data-color-scheme="success"
     data-size="md"></div>

<!-- Bar Sparkline -->
<div data-rsl-chart
     data-type="sparkline-bar"
     data-values="[45, 42, 48, 40, 38, 35, 33, 30, 32, 28]"
     data-color-scheme="warm"
     data-size="md"></div>

Dashboard Example

Combine multiple chart types for a complete analytics dashboard

$124K

Revenue

8,432

Orders

2.4%

Conversion

45s

Avg. Session

Revenue by Region

Revenue Sources

Color Schemes

Built-in color palettes for every use case

Primary (Default)

Success

Warm

Cool

Mono

Accessible

Dynamic Updates

Update chart data programmatically with the JavaScript API

// Get chart element
var chart = document.getElementById('dynamic-chart');

// Update with new data
RSL.Charts.setData(chart,
    [20, 40, 60, 80, 100],  // new values
    ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']  // labels
);

// Or use update for more options
RSL.Charts.update(chart, {
    values: [20, 40, 60, 80, 100],
    colorScheme: 'success'
});

See FilterBus in Action

Watch how Charts can show/hide based on filter selections. This live demo shows Filter + Smart Table + KPI Cards + Charts all working together.

View Live Dashboard Demo

API Reference Interactive Playground

Chart Examples