Chart.js integration patterns for Helios. Use when creating animated data visualizations with Chart.js.
Integrate Helios with Chart.js by disabling internal animations and manually driving data updates from the timeline.
import { Helios } from '@helios-project/core';
import Chart from 'chart.js/auto';
const helios = new Helios({ fps: 30, duration: 5 });
helios.bindToDocumentTimeline();
const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
type: 'bar',
data: { /* ... */ },
options: {
// CRITICAL: Disable internal tweens
animation: false,
responsive: true
}
});
helios.subscribe((state) => {
const t = state.currentTime;
// 1. Calculate new data based on time
const newData = calculateData(t);
// 2. Update chart data
chart.data.datasets[0].data = newData;
// 3. Force immediate update without animation
chart.update('none');
});
Chart.js has a built-in animation engine that tweens values when data changes. This conflicts with frame-by-frame rendering. You must disable it: