Chart Plugin System

Chart.ts has a first-class plugin system for creating entirely new chart types. Use defineChartType() to define custom rendering, hit testing, scales, and interactions. Your custom charts get the same Tailwind CSS support, accessibility features, and framework bindings as built-in types.

$npm install @chartts/core
example.tsx
import { defineChartType, registerChart } from "@chartts/core"

// Define a custom radial progress chart
const radialProgress = defineChartType({
  name: "radial-progress",

  defaultOptions: {
    min: 0,
    max: 100,
    thickness: 12,
    rounded: true,
  },

  render(ctx, data, options) {
    const { width, height } = ctx.dimensions
    const cx = width / 2
    const cy = height / 2
    const radius = Math.min(cx, cy) - options.thickness

    // Background track
    ctx.arc(cx, cy, radius, 0, Math.PI * 2)
    ctx.stroke(options.trackClassName || "stroke-zinc-200 dark:stroke-zinc-800")

    // Progress arc
    const progress = (data.value - options.min) / (options.max - options.min)
    const endAngle = Math.PI * 2 * progress
    ctx.arc(cx, cy, radius, -Math.PI / 2, endAngle - Math.PI / 2)
    ctx.stroke(options.className || "stroke-cyan-400")

    // Center label
    ctx.text(cx, cy, `${Math.round(progress * 100)}%`)
  },

  hitTest(point, data) {
    return { value: data.value, label: data.label }
  },
})

// Use it like any built-in chart
registerChart(radialProgress)

Features

defineChartType() API for full custom chart creation
Render context with SVG and Canvas primitives
Custom hit testing for hover and click interactions
Custom scales and axis types
Automatic framework bindings (React, Vue, Svelte, Solid, Angular)
Inherits Tailwind CSS support, accessibility, and SSR
Publish as npm packages with @chartts/cli scaffolding
Read the DocsSee DemosExamples