Chart.js Online Editor - Create Charts in Your Browser Instantly

Sometimes you just need a chart. Not a full dashboard, not a data pipeline -- just a bar chart showing last quarter's numbers for a meeting tomorrow. Chart.js exists for exactly this kind of thing, and an online editor makes it even faster.

What Chart.js gives you

Chart.js is a Canvas-based charting library. You give it a configuration object describing your chart type, labels, datasets, and options. It draws the chart. That's the core API.

Out of the box you get bar charts, line charts, pie charts, doughnut charts, radar charts, scatter plots, and a few more. They look good by default -- responsive, animated, with tooltips that just work. You don't need to think about SVG paths or pixel math. If D3 is a box of parts, Chart.js is the assembled product.

This simplicity makes it one of the most popular charting libraries on npm. It's the go-to when you need data visualization and don't want to become a data visualization expert.

Example: a bar chart with two datasets

Paste this into the Chart.js editor on OneCompiler:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>

<style>
  body { font-family: system-ui, sans-serif; padding: 2rem; }
  .chart-wrapper { max-width: 600px; margin: 0 auto; }
</style>

<div class="chart-wrapper">
  <canvas id="salesChart"></canvas>
</div>

<script>
  const ctx = document.getElementById('salesChart').getContext('2d');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Q1', 'Q2', 'Q3', 'Q4'],
      datasets: [
        {
          label: '2025 Revenue',
          data: [32, 45, 38, 52],
          backgroundColor: 'rgba(59, 130, 246, 0.7)',
          borderColor: 'rgb(59, 130, 246)',
          borderWidth: 1,
          borderRadius: 4
        },
        {
          label: '2024 Revenue',
          data: [28, 36, 42, 44],
          backgroundColor: 'rgba(148, 163, 184, 0.5)',
          borderColor: 'rgb(148, 163, 184)',
          borderWidth: 1,
          borderRadius: 4
        }
      ]
    },
    options: {
      responsive: true,
      plugins: {
        title: {
          display: true,
          text: 'Quarterly Revenue Comparison',
          font: { size: 16 }
        },
        legend: { position: 'bottom' }
      },
      scales: {
        y: {
          beginAtZero: true,
          ticks: { callback: value => '$' + value + 'k' }
        }
      }
    }
  });
</script>

That's the entire thing. One new Chart() call with a config object. You get a responsive bar chart with two datasets, formatted y-axis labels, a title, a legend, hover tooltips, and a nice entrance animation. Change type: 'bar' to type: 'line' and you've got a line chart. The data config stays the same.

When to use an online Chart.js editor

Chart.js is already quick to set up locally -- include the script, add a canvas, write the config. But a playground is still faster for certain tasks:

• Prototyping chart configs. You're not sure whether a stacked bar or grouped bar tells the story better. Swap stacked: true in the options, see the difference instantly.
• Getting the styling right. Colors, border radius, legend position, font sizes -- these are fiddly. An online editor with instant preview lets you iterate without waiting.
• Quick data viz for a presentation. You need a chart screenshot for slides. Paste your numbers into a playground, tweak until it looks right, take a screenshot. Done in five minutes.
• Sharing chart configurations. "Can you make the bars thinner and the title bigger?" is easier to resolve when both people are looking at the same live editor.

Chart.js on OneCompiler

OneCompiler's Chart.js playground gives you a ready-to-go environment with Chart.js loaded. Paste a config, see the chart render, share the URL. It supports multi-file editing if you want to separate your HTML and JS.

For quick data visualization prototyping, it's hard to beat the speed of: open tab, paste config, see chart.

Try it: onecompiler.com/chartjs