🔴 Real-Time Data Updates
Live Data Stream
Watch data update in real-time with smooth animations. Control the stream with start, stop, and reset buttons.
Live Data Monitor
Stream Controls: {{ liveStatus === 'status-running' ? 'Streaming 🟢' : 'Stopped 🔴' }}
Data Points: {{ liveData.length }} | Latest: {{ liveData[liveData.length - 1]?.toFixed(1) }}
<Sparkline :data="liveData" type="line" :options="liveOptions" />
<!-- Vue methods -->
startLiveData() {
this.interval = setInterval(() => {
this.liveData.push(Math.random() * 80 + 10);
if (this.liveData.length > 20) this.liveData.shift();
}, 500);
}
👆 Interactive Click Events
Clickable Data Points
Click on any data point to see detailed information and trigger custom events.
Click on any point below
{{ clickInfo }}
<Sparkline :data="data" @click="handleClick" />
📋 Event Logging & Monitoring
Complete Event Log
Monitor all chart events in real-time. Hover over data points and click to see detailed event information logged below.
Interactive Chart - Hover and Click to Generate Events
Event Log
{{ event.time }}
{{ event.type.replace('sparkline', '') }}
{{ event.details }}
No events logged yet. Hover or click on the chart above to see events.
<Sparkline
:data="data"
@sparkline-click="handleClick"
@sparkline-region-change="handleRegionChange"
/>
<!-- Event handlers -->
handleClick(event) {
console.log('Click:', event.detail);
}
handleRegionChange(event) {
console.log('Region change:', event.detail);
}
📊 Multi-Series Data Comparison
Revenue vs Costs Analysis
Compare multiple data series side by side with different chart types and colors.
Revenue
Costs
Profit
Revenue: [{{ revenueData.join(', ') }}]
Costs: [{{ costsData.join(', ') }}]
Profit: [{{ profitData.join(', ') }}]
Costs: [{{ costsData.join(', ') }}]
Profit: [{{ profitData.join(', ') }}]
<!-- Revenue Line Chart -->
<Sparkline :data="revenueData" type="line" :options="revenueOptions" />
<!-- Costs Line Chart -->
<Sparkline :data="costsData" type="line" :options="costsOptions" />
<!-- Profit Bar Chart -->
<Sparkline :data="profitData" type="bar" :options="profitOptions" />
Multi-Series on Single Chart
Display multiple data series on a single line chart with automatic color differentiation and synchronized tooltips.
Quarterly Performance by Region
North: [{{ multiSeriesData[0].join(', ') }}]
South: [{{ multiSeriesData[1].join(', ') }}]
West: [{{ multiSeriesData[2].join(', ') }}]
Hovered Index: {{ multiSeriesHoveredIndex }}
South: [{{ multiSeriesData[1].join(', ') }}]
West: [{{ multiSeriesData[2].join(', ') }}]
Hovered Index: {{ multiSeriesHoveredIndex }}
<Sparkline
:data="[[30,35,40,38,45,50,48], [25,28,32,30,36,38,40], [20,22,25,28,30,33,35]]"
type="line"
:options="{
seriesNames: ['North', 'South', 'West'],
lineColor: ['#e74c3c', '#3498db', '#2ecc71'],
lineWidth: [2, 2, 2]
}"
/>
🎨 Dynamic Theming
Theme Switcher
Switch between different color themes to see how charts adapt to different visual styles.
{{ currentThemeName.toUpperCase() }} Theme
<Sparkline :data="data" :options="currentThemeOptions" />
<!-- Theme object -->
themes: {
light: { line: '#333', fill: 'rgba(51,51,51,0.1)', bg: '#fff' },
dark: { line: '#fff', fill: 'rgba(255,255,255,0.2)', bg: '#2c3e50' },
blue: { line: '#1976d2', fill: 'rgba(25,118,210,0.1)', bg: '#e3f2fd' }
}
💬 Custom Tooltip Formatting
Financial Data Tooltips
Hover over data points to see custom formatted tooltips with percentage changes and trend indicators.
Stock Price ($) - Hover for details
options: {
tooltipFormatter: function(value, region, chart, context) {
const prev = region > 0 ? chart.values[region - 1] : value;
const change = value - prev;
const arrow = change > 0 ? '↗️' : change < 0 ? '↘️' : '➡️';
const percent = prev ? (change/prev*100).toFixed(1) : '0.0';
const sign = change >= 0 ? '+' : '';
return '$' + value.toFixed(2) + ' ' + arrow + ' ' + sign + percent + '%';
}
}
Rating System Tooltips
Custom tooltips can display star ratings, contextual information, and formatted data.
Product Ratings - Hover for star display
tooltipFormatter: function(value, region, chart, context) {
const stars = '★'.repeat(Math.floor(value)) + '☆'.repeat(5 - Math.floor(value));
const total = chart.values.length;
return stars + ' ' + value.toFixed(1) + '/5.0 (Review ' + (region + 1) + '/' + total + ')';
}