Chartie

Ultra-lightweight canvas charting library

The modern Chart.js alternative • Under 10kb • Zero dependencies • Pure Canvas API

< 10kbTypeScriptZero Deps6 Chart Types

Installation

bash

npm install chartie

Usage

Vanilla JavaScript

javascript

import { Chartie } from 'chartie';

const config = {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [{
      label: 'Sales',
      data: [12, 19, 3],
      backgroundColor: '#6366f1'
    }]
  }
};

const chart = new Chartie('myCanvas', config);

React

javascript

import { Chartie } from 'chartie';
import { useEffect, useRef } from 'react';

function MyChart({ config }) {
  const canvasRef = useRef(null);
  
  useEffect(() => {
    const chart = new Chartie(canvasRef.current, config);
    return () => chart.destroy();
  }, [config]);
  
  return <canvas ref={canvasRef} width={400} height={300} />;
}

Features

6 Chart Types

Bar, Line, Pie, Doughnut, Area, and Scatter charts

Ultra Light

Under 10kb bundle size with zero dependencies

High Performance

Pure Canvas API for optimal rendering speed

Smooth Animations

Beautiful animations with multiple easing functions

Responsive Design

Built-in responsive and retina display support

TypeScript First

Full TypeScript support with complete type definitions

Chart Types

Bar Chart

Configuration

javascript

{
  "type": "bar",
  "data": {
    "labels": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun"
    ],
    "datasets": [
      {
        "label": "Revenue",
        "data": [
          120,
          190,
          300,
          500,
          200,
          300
        ],
        "backgroundColor": "#6366f1",
        "borderColor": "#4f46e5",
        "borderWidth": 1
      },
      {
        "label": "Profit",
        "data": [
          80,
          120,
          200,
          350,
          150,
          220
        ],
        "backgroundColor": "#06b6d4",
        "borderColor": "#0891b2",
        "borderWidth": 1
      }
    ]
  },
  "options": {
    "responsive": true,
    "animation": {
      "duration": 1200,
      "easing": "easeInOut"
    }
  }
}