HTMLDrop.

Chart.js starter

Chart.js: responsive, animated charts from a few lines of JavaScript.

Open in editor Free. No install, no sign-up.
  • chart.js

The code

Three files, exactly what you get in the editor.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Chart.js starter</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
  </head>
  <body>
    <main class="page">
      <header>
        <a href="https://www.chartjs.org" target="_blank"
          ><svg class="logo" viewBox="0 0 24 24" role="img" aria-label="Chart.js">
            <path
              fill="#ff6384"
              d="M12 0L1.605 6v12L12 24l10.395-6V6zm0 1.41l9.172 5.295v10.59L12 22.59l-9.172-5.295V6.705zM5.902 8.334c-1.306 0-1.983.956-2.574 2.41v6.262L12 22.014l8.672-5.008v-5.971c-.447-.264-.894-.412-1.336-.412-4.275 0-3.97 4.885-6.717 5.8-2.748.917-3.511-8.089-6.717-8.089zm12.364.457c-2.9 0-2.137 4.732-5.342 4.732-1.63 0-2.52-1.317-3.477-1.981.148.326.3.655.442.98.467 1.068.922 2.09 1.379 2.734.228.322.455.541.644.644a.595.595 0 0 0 .549.05c.558-.187.968-.571 1.36-1.112.39-.541.74-1.228 1.154-1.916.413-.688.894-1.385 1.59-1.918.695-.534 1.607-.881 2.77-.881.465 0 .908.136 1.337.352v-.121c-.633-.849-1.348-1.563-2.406-1.563zm-6.68.152c-.868 0-1.491.82-2.076 2.06.094.055.192.106.277.167 1.06.761 1.798 1.853 3.137 1.853.678 0 1.067-.218 1.418-.585-.722-1.546-1.432-3.492-2.756-3.495Z"
            /></svg
        ></a>
        <h1>Chart.js</h1>
      </header>
      <div class="chart"><canvas id="myChart"></canvas></div>
    </main>
  </body>
</html>

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #fafafa;
  color: #333;
}
.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px;
}
header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.logo {
  width: 40px;
  height: 40px;
}
h1 {
  margin: 0;
  font-size: 26px;
}
.chart {
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px #0000000f;
}

const ctx = document.getElementById("myChart");

new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
      },
    ],
  },
  options: {
    scales: {
      y: { beginAtZero: true },
    },
  },
});

Questions

Can I use Chart.js without a build step?

Yes. This starter loads Chart.js straight from a CDN, so it runs in the browser with no npm install, bundler, or config.

How do I start a Chart.js project online?

Click Open in editor. HTMLDrop copies this starter into a new drop with index.html, style.css, and script.js, and the preview updates as you edit.

Is it free?

Yes. Public drops, live collaboration, versions, and embeds are free, and you do not need an account to start.

Can I share or embed my Chart.js demo?

Yes. Every drop gets a public link and an embed code, and you can invite others to edit it with you in real time.

More starter kits