Charts

Pure SVG-based charts with zero dependencies. Beautiful, accessible, and fully customizable.

Quick Start (2 minutes)

  1. Include charts.css and charts.js in your page
  2. Add data-rsl-chart to a container element
  3. Set chart type with data-type="bar"
  4. Pass data with data-values="[25, 50, 75, 100]"

Available Chart Types

Bar Chart

Vertical bar charts for comparisons

Line Chart

Trend visualization over time

Area Chart

Filled area under line

Pie Chart

Part-to-whole relationships

Doughnut

Pie with center cutout

Sparkline

Compact inline charts

Basic Usage

Basic Bar Chart HTML
<div data-rsl-chart
     data-type="bar"
     data-values="[25, 50, 75, 100, 60]"
     data-labels='["Jan", "Feb", "Mar", "Apr", "May"]'
     data-title="Monthly Revenue"
     data-animate
     data-show-values
     style="height: 300px;"></div>

Data Attributes Reference

Core Attributes

Attribute Type Default Description
data-rsl-chart boolean - Required. Identifies element as a chart container.
data-type string bar Chart type: bar, line, area, pie, doughnut, sparkline, sparkline-bar
data-values array [] JSON array of numeric values
data-labels array [] JSON array of label strings
data-datasets array [] Multi-series data: [{label: "Series 1", values: [...]}]
data-title string - Chart title displayed above chart

Display Options

Attribute Type Default Description
data-width number auto Fixed width in pixels (default: container width)
data-height number 300 Chart height in pixels
data-size string md Sparkline size: xs, sm, md, lg
data-show-tooltip boolean true Show tooltip on hover
data-show-legend boolean false Show chart legend
data-show-grid boolean true Show background grid lines
data-show-axis boolean true Show X and Y axes
data-show-values boolean false Show value labels on data points

Styling

Attribute Type Default Description
data-color-scheme string primary Color scheme: primary, success, warm, cool, mono, rainbow, accessible
data-colors array - Custom colors array: ["#ff0000", "#00ff00"]
data-stacked boolean false Stack bars for multi-series bar charts
data-horizontal boolean false Horizontal bar orientation
data-curved boolean true Curved lines for line/area charts
data-inner-radius number 0.6 Doughnut inner radius (0-1 ratio)

Animation

Attribute Type Default Description
data-animate boolean true Enable entry animations
data-animation-duration number 800 Animation duration in milliseconds
data-animate-on-view boolean false Animate when chart scrolls into view

Axis Configuration

Attribute Type Default Description
data-min number auto Minimum Y-axis value
data-max number auto Maximum Y-axis value
data-y-label string - Y-axis label text
data-x-label string - X-axis label text

JavaScript API

Method Parameters Description
RSL.Charts.init() - Initialize all charts with data-rsl-chart attribute
RSL.Charts.create(element) HTMLElement Create chart instance for specific element
RSL.Charts.update(element, data) HTMLElement, Object Update chart data: {values: [...], labels: [...]}
RSL.Charts.setData(element, values, labels) HTMLElement, Array, Array Set chart data programmatically
RSL.Charts.destroy(element) HTMLElement Destroy chart instance and clean up
RSL.Charts.resize(element) HTMLElement Manually trigger chart resize
RSL.Charts.getColorSchemes() - Returns array of available color scheme names
RSL.Charts.getColors(scheme, count) string, number Get color array from scheme
JavaScript API Example JS
// Update chart data dynamically
var chart = document.getElementById('my-chart');
RSL.Charts.setData(chart, [10, 20, 30, 40], ['Q1', 'Q2', 'Q3', 'Q4']);

// Or use update for more options
RSL.Charts.update(chart, {
    values: [10, 20, 30, 40],
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    colorScheme: 'success'
});

Color Schemes

RSL Charts includes 7 built-in color schemes. Use data-color-scheme to apply.

Scheme Description Best For
primary Default purple/blue palette General purpose, dashboards
success Green-based palette Positive metrics, growth charts
warm Red, orange, yellow tones Attention-grabbing, alerts
cool Cyan, blue, purple tones Calm, professional reports
mono Grayscale palette Print-friendly, minimal design
rainbow Full spectrum colors Categorical data with many series
accessible Colorblind-safe palette Accessibility-first applications

Accessibility

RSL Charts is built with accessibility in mind:

JSON Layout API Integration

Charts works seamlessly with the RSL JSON Layout API V2. Create charts declaratively using semantic configuration.

V2 JSON API Usage JavaScript
const config = {
    version: 2,
    layoutId: "dashboard-charts",
    breakpoints: { xs: 1, md: 2 },
    gap: "1.5rem",
    items: [
        {
            content: {
                type: "chart",
                chartType: "bar",
                values: [25, 50, 75, 100, 60],
                labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
                colorScheme: "success",
                showValues: true,
                height: "200px"
            }
        },
        {
            content: {
                type: "chart",
                chartType: "line",
                values: [20, 45, 35, 60, 50, 75],
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                curved: true,
                colorScheme: "cool",
                height: "200px"
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#container', config);

See More: View all Charts JSON API examples →

FilterBus Integration

Charts can subscribe to RSL's FilterBus for visibility filtering based on external filter controls. This is ideal for dashboard scenarios where filter buttons control which charts are displayed.

FilterBus Integration Attributes

Attribute Type Description
data-filter-subscribe String FilterBus key to subscribe to (e.g., "region", "category")
data-filter-value String Filter value(s) this chart matches. Chart shows when filter equals this value. Supports comma-separated values for multi-match (e.g., "North,South"). Charts without this attribute always show.

How It Works

  • Add data-filter-subscribe="key" to listen to a FilterBus channel
  • Add data-filter-value="value" to specify which filter value this chart matches
  • Charts without data-filter-value always show (great for "Overall" metrics)
  • "All" filter value shows all charts (case-insensitive)

Example: Region-Filtered Charts

FilterBus Charts • HTML
<!-- Filter publishes to FilterBus -->
<div data-rsl-filter data-filter-key="region">
    <button data-filter-value="All">All Regions</button>
    <button data-filter-value="North">North</button>
    <button data-filter-value="South">South</button>
</div>

<!-- Overall Chart - Always shows (no filter-value) -->
<div data-rsl-chart
     data-filter-subscribe="region"
     data-type="bar"
     data-title="Overall Performance"
     data-values="[85, 92, 78, 95]"
     data-labels='["Q1", "Q2", "Q3", "Q4"]'>
</div>

<!-- North Region Chart - Only shows when region="North" -->
<div data-rsl-chart
     data-filter-subscribe="region"
     data-filter-value="North"
     data-type="line"
     data-title="North Region Sales"
     data-values="[40, 45, 50, 55]"
     data-labels='["Q1", "Q2", "Q3", "Q4"]'>
</div>

<!-- South Region Chart - Only shows when region="South" -->
<div data-rsl-chart
     data-filter-subscribe="region"
     data-filter-value="South"
     data-type="line"
     data-title="South Region Sales"
     data-values="[30, 35, 28, 42]"
     data-labels='["Q1", "Q2", "Q3", "Q4"]'>
</div>

Events

Event Detail Description
rsl-chart:filterbus-update { state, meta, visible } Fired when chart visibility changes due to FilterBus update

Date Range Filtering

Charts with time series data can dynamically filter their displayed data based on a date range selection. When connected to a Date Picker via FilterBus, the chart automatically updates to show only data points within the selected range.

How It Works

  • Add data-filterbus-date-field="dateFilter" to the chart element
  • Use data-time-series-data with date-value pairs (JSON format)
  • Connect a Date Picker that publishes to the same FilterBus key
  • Chart re-renders with filtered data when date range changes

Example: Time Series with Date Filter

Date Range Filter Setup • HTML
<!-- Date Picker publishes to FilterBus -->
<input type="text"
       data-rsl-date-picker
       data-mode="range"
       data-filterbus-publish="dateFilter">

<!-- Chart with time series data -->
<div data-rsl-chart
     data-type="line"
     data-title="Daily Revenue"
     data-filterbus-date-field="dateFilter"
     data-time-series-data='[
         {"date": "2025-12-01", "value": 1200},
         {"date": "2025-12-02", "value": 1350},
         {"date": "2025-12-03", "value": 980},
         {"date": "2025-12-04", "value": 1500},
         {"date": "2025-12-05", "value": 1420}
     ]'
     data-curved>
</div>

Date Filter Attributes

Attribute Type Description
data-filterbus-date-field String The FilterBus key to subscribe to for date range updates (must match date picker's publish key)
data-time-series-data JSON Array Array of objects with date and value properties. Dates support ISO (YYYY-MM-DD), US (MM/DD/YYYY), and European (DD.MM.YYYY) formats.

Events

Event Detail Description
rsl-chart:date-filter { dateFilter, originalCount, filteredCount } Fired when chart data is filtered by date range
View Full Examples Interactive Playground