Graph Component

Live Demo

Line Chart

Data provided inline with data-props (JSON). Supports smooth curves, filled areas and per-series colors.

<div data-component="graph"
            data-props='{
            "type": "line",
            "curve": true,
            "fillArea": true,
            "data": [
            {"name": "2025", "color": "#3b82f6", "data": [
            {"label": "Jan", "value": 65}, {"label": "Feb", "value": 59},
            {"label": "Mar", "value": 80}, {"label": "Apr", "value": 81},
            {"label": "May", "value": 76}, {"label": "Jun", "value": 90}
            ]},
            {"name": "2024", "color": "#a855f7", "data": [
            {"label": "Jan", "value": 45}, {"label": "Feb", "value": 52},
            {"label": "Mar", "value": 58}, {"label": "Apr", "value": 61},
            {"label": "May", "value": 70}, {"label": "Jun", "value": 72}
            ]}
            ]
            }' style="height: 320px;">
            </div>

Bar Chart from HTML Table

Point data-table to any table ID - the data is read directly from the table below (no JavaScript needed).

<table id="quarterly-table">
            <thead>
            <tr><th></th><th>Q1</th><th>Q2</th><th>Q3</th><th>Q4</th></tr>
            </thead>
            <tbody>
            <tr><th>Sales</th><td>120</td><td>150</td><td>135</td><td>180</td></tr>
            <tr><th>Expenses</th><td>80</td><td>90</td><td>85</td><td>95</td></tr>
            </tbody>
            </table>

            <!-- Renders a bar chart from the table above -->
            <div data-component="graph"
            data-type="bar"
            data-table="quarterly-table"
            style="height: 320px;">
            </div>

Pie Chart

Shows proportions with data labels. Use data-show-value-instead-of-percent to toggle between values and percentages.

<div data-component="graph"
            data-type="pie"
            data-show-value-instead-of-percent="false"
            data-props='{
            "data": [
            {"name": "Traffic", "data": [
            {"label": "Desktop", "value": 45},
            {"label": "Mobile", "value": 38},
            {"label": "Tablet", "value": 10},
            {"label": "Others", "value": 7}
            ]}
            ]
            }' style="height: 320px;">
            </div>

Donut Chart

A ring chart with customizable thickness and center text - perfect for budgets and allocation.

<div data-component="graph"
            data-type="donut"
            data-donut-thickness="40"
            data-center-text="Budget"
            data-props='{
            "data": [
            {"name": "Budget", "data": [
            {"label": "Housing", "value": 30},
            {"label": "Food", "value": 25},
            {"label": "Savings", "value": 20},
            {"label": "Transport", "value": 15},
            {"label": "Others", "value": 10}
            ]}
            ]
            }' style="height: 320px;">
            </div>

Gauge Chart

A single value in a range - great for KPIs and scores. Takes one series with one data point.

<div data-component="graph"
            data-type="gauge"
            data-max-gauge-value="100"
            data-gauge-curve-width="24"
            data-props='{
            "data": [
            {"name": "Performance", "data": [
            {"label": "Score", "value": 78}
            ]}
            ]
            }' style="height: 260px;">
            </div>

Loading Data

From API URL

Set data-url to load data from a server endpoint. This chart fetches from api/sales.php which returns random values on every request.

<div data-component="graph"
            data-type="line"
            data-url="api/sales.php"
            style="height: 320px;">
            </div>

            <!-- Refresh manually from JavaScript -->
            <script>
            const element = document.querySelector('#url-graph');
            const instance = GraphComponent.getInstance(element);
            instance.refresh();
            </script>

Auto Refresh (Polling)

Set data-polling-interval (ms) together with data-url to reload automatically. This chart polls every 5 seconds - watch the values change.

<div data-component="graph"
            data-type="bar"
            data-url="api/sales.php"
            data-polling-interval="5000"
            style="height: 320px;">
            </div>

Event-based Refresh

Charts sharing the same data-refresh-event all refresh together when that event is emitted through the EventManager.

<!-- Both charts listen for the same event -->
            <div data-component="graph"
            data-type="line"
            data-url="api/sales.php"
            data-refresh-event="graph:refresh-demo">
            </div>
            <div data-component="graph"
            data-type="bar"
            data-url="api/sales.php"
            data-refresh-event="graph:refresh-demo">
            </div>

            <script>
            // Emitting the event refreshes every listener at once
            EventManager.emit('graph:refresh-demo');
            </script>

JavaScript API

This chart is created entirely from JavaScript. Use the controls to call the API methods - every action is logged in the event log below.

// Create a graph entirely from JavaScript
                    const playground = await GraphComponent.create('#api-playground', {
                    type: 'line',
                    curve: true,
                    showLegend: true,
                    animation: true,
                    animationDuration: 800,
                    data: [
                    {name: 'Visitors', data: [
                    {label: 'Mon', value: 120},
                    {label: 'Tue', value: 150},
                    {label: 'Wed', value: 135}
                    ]}
                    ],

                    // Callbacks work too
                    onClick(dataPoint, seriesIndex) {
                    console.log('Clicked:', dataPoint.label, dataPoint.value);
                    },

                    onDataChange(data) {
                    console.log('Data updated:', data);
                    }
                    });

                    // Or grab an existing instance from an element / ID
                    const instance = GraphComponent.getInstance(element);
                    const same = GraphComponent.getInstance(instance.id);

// Replace the whole dataset
                    instance.setData([
                    {name: 'Visitors', data: [
                    {label: 'Mon', value: 200},
                    {label: 'Tue', value: 180},
                    {label: 'Wed', value: 220}
                    ]}
                    ]);

                    // Append a single point to a series (index 0 = first series)
                    instance.addDataPoint({label: 'Thu', value: 195}, 0);

                    // Switch chart type without recreating the chart
                    instance.setType('bar'); // line | bar | pie | donut | gauge

                    // Reload from the configured data-url (bypasses cache)
                    await instance.loadData();

                    // Refresh (same as loadData with force)
                    instance.refresh();

                    // Export as image (png, jpeg or svg)
                    instance.exportToImage('my-chart', 'png');

                    // Clean up when done
                    instance.destroy();

// DOM events are dispatched on the container element
                    const element = document.querySelector('#api-playground');

                    element.addEventListener('graph:created', e => {
                    console.log('Created:', e.detail.instance.id);
                    });

                    element.addEventListener('graph:loaded', e => {
                    console.log('Loaded from cache?', e.detail.fromCache);
                    });

                    element.addEventListener('graph:data-changed', e => {
                    console.log('New data:', e.detail.data);
                    });

                    element.addEventListener('graph:type-changed', e => {
                    console.log('Type changed to:', e.detail.type);
                    });

                    element.addEventListener('graph:error', e => {
                    console.error('Loading failed:', e.detail.error);
                    });

                    // The same events are also available through the EventManager
                    EventManager.on('graph:loaded', payload => {
                    console.log('Loaded:', payload.data);
                    });

Styling

Custom Colors & Legend Position

Pass a JSON array to data-colors for a custom palette and use data-legend-position (top, bottom, left, right) to place the legend.

<!-- Custom color palette -->
            <div data-component="graph"
            data-type="donut"
            data-colors='["#3b82f6", "#22c55e", "#f59e0b", "#ef4444"]'
            data-props='{...}'>
            </div>

            <!-- Legend on the right -->
            <div data-component="graph"
            data-type="line"
            data-legend-position="right"
            data-curve="true"
            data-props='{...}'>
            </div>

Grid & Axis Options

Toggle the grid and axis with data-show-grid and data-show-axis, or restyle everything through container CSS.

<div data-component="graph"
            data-type="line"
            data-curve="true"
            data-show-grid="false"
            data-show-axis="false"
            data-fill-area="true"
            data-props='{...}'>
            </div>

Key Features

Configuration Options

How It Works

Next Steps