Chart.js

npm install chart.js

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

import Chart from "chart.js/auto";

Imports all chart types and components.

import {
  Chart,
  LineController,
  LineElement,
  PointElement,
  LinearScale,
  CategoryScale,
  Title,
} from "chart.js";

Chart.register(
  LineController,
  LineElement,
  PointElement,
  LinearScale,
  CategoryScale,
  Title,
);

Import only what you need.

<canvas id="myChart"></canvas>

new Chart(document.getElementById("myChart"), {
  type: "bar",
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [
      {
        label: "# of Votes",
        data: [12, 19, 3],
        borderWidth: 1,
      },
    ],
  },
  options: {
    scales: {
      y: { beginAtZero: true },
    },
  },
});

{
  type: 'bar',
  options: {
    indexAxis: 'y'
  }
}

{
  labels: ['Jan', 'Feb', 'Mar'],
  datasets: [{
    label: 'Sales',
    data: [65, 59, 80],
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgb(255, 99, 132)',
    borderWidth: 1
  }]
}

datasets: [
  {
    data: [
      { x: 10, y: 20 },
      { x: 15, y: 25 },
    ],
  },
];

For scatter and bubble charts.

options: {
  responsive: true,
  maintainAspectRatio: false,
  aspectRatio: 2
}

options: {
  plugins: {
    legend: {
      position: 'top',
      display: true
    },
    tooltip: {
      enabled: true,
      mode: 'index',
      intersect: false
    },
    title: {
      display: true,
      text: 'My Chart'
    }
  }
}

options: {
  animation: {
    duration: 1000,
    easing: 'easeOutQuart'
  }
}

options: {
  scales: {
    y: {
      beginAtZero: true,
      min: 0,
      max: 100,
      ticks: {
        callback: value => `$${value}`
      }
    }
  }
}

options: {
  scales: {
    x: { stacked: true },
    y: { stacked: true }
  }
}

plugins: {
  tooltip: {
    callbacks: {
      label: (ctx) => {
        const val = ctx.parsed.y;
        return `${ctx.dataset.label}: $${val}`;
      };
    }
  }
}

{
  enabled: false,
  external: function(context) {
    // Custom implementation
  }
}

plugins: {
  legend: {
    position: 'top',  // 'left', 'bottom', 'right'
    align: 'center'   // 'start', 'end'
  }
}

plugins: {
  legend: {
    onClick: (e, item, legend) => {
      const i = item.datasetIndex;
      legend.chart.isDatasetVisible(i)
        ? legend.chart.hide(i)
        : legend.chart.show(i);
    };
  }
}

options: {
  animation: {
    duration: 1000,
    easing: 'easeOutQuart',
    onComplete: (anim) => {
      console.log('Done');
    },
    onProgress: (anim) => {
      console.log(anim.currentStep);
    }
  }
}

options: {
  animations: {
    colors: false,
    x: false
  }
}

Disable all: animation: false

const bgPlugin = {
  id: "customBg",
  beforeDraw: (chart, args, options) => {
    const { ctx } = chart;
    ctx.save();
    ctx.fillStyle = options.color || "#fff";
    ctx.fillRect(0, 0, chart.width, chart.height);
    ctx.restore();
  },
};

new Chart(ctx, {
  plugins: [bgPlugin],
  options: {
    plugins: {
      customBg: { color: "#f5f5f5" },
    },
  },
});

Chart.register(bgPlugin);

chart.data.labels.push("New");
chart.data.datasets.forEach((ds) => {
  ds.data.push(newVal);
});
chart.update();

chart.data.labels.pop();
chart.data.datasets.forEach((ds) => {
  ds.data.pop();
});
chart.update();

chart.update("none");

chart.destroy();

{
  borderColor: 'rgb(75, 192, 192)',
  borderWidth: 3,
  borderDash: [5, 5],
  tension: 0.1,          // Bezier curve
  pointStyle: 'circle',  // 'cross', 'rect', 'star'
  pointRadius: 3,
  fill: true             // Area fill
}

"#ff6384";
"rgb(255, 99, 132)";
"rgba(255, 99, 132, 0.2)";

<div style="position: relative; width: 80vw; height: 40vh;">
  <canvas id="chart"></canvas>
</div>

Canvas needs relative container.

options: {
  responsive: true,
  maintainAspectRatio: false,
  onResize: (chart, size) => {
    console.log('Resized');
  }
}

import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
} from "chart.js";

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement);

function MyChart() {
  return <Line data={data} options={options} />;
}

⚠️ chart.js/auto disables tree-shaking — import and register components individually for production.

⚠️ Canvas needs a relatively-positioned container — direct canvas sizing doesn't work for responsive charts.

⚠️ Pie cutout: 0 vs Doughnut cutout: '50%' — same chart type with different defaults.

⚠️ onProgress/onComplete callbacks only work at options.animation root level.

⚠️ Plugin IDs must be unique and follow npm naming conventions.

⚠️ Scale references become invalid after updating chart.options.scales.

⚠️ Must call chart.destroy() before creating a new chart on the same canvas.