Example Chartjs

Chart.js + Helios

Integrate Helios with Chart.js by disabling internal animations and manually driving data updates from the timeline.

Quick Start

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');
});

Key Patterns

Disable Animations