Chart.js

Widely used canvas charting library with many available adapters.

UnverifiedActive

Unverified

Compatibility has not been verified yet in the PreactHub catalog.

Packagechart.js

Facts at a glance

Preact compatibility: Unverified
Tested Preact versions: Not documented
TypeScript: Native TypeScript
SSR: SSR unsupported
Maintenance: Active
License: MIT
Last verified: Not yet verified

~%npm install chart.js

1import { Chart } from "chart.js/auto";2 3new Chart(canvas, {4  type: "line",5  data: { labels: ["Jan", "Feb"], datasets: [{ data: [3, 6] }] },6});

Introduction

Chart.js is often used in dashboards and analytics views where canvas rendering is acceptable.

Preact configuration

Rendering is browser-oriented, so pair it with a thin Preact wrapper or direct canvas management.

SSR notes

Charts usually need client-only execution because they rely on canvas and layout measurements.

Islands notes

When using this library inside an island, keep browser-specific setup inside the island component or an effect, and pass only serializable props from the server-rendered page.

Alternatives

ECharts Compare