library/chart.js
A Chart.js Online Editor and Playground for Live Charts
Configure a Chart.js chart in JavaScript — data, scales, options — and watch it draw on a live canvas as you edit, across every chart type, with nothing to install.
import Chart from 'chart.js/auto';
new Chart(document.querySelector('canvas'), {
type: 'line',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
datasets: [{ label: 'Sales', data: [4, 8, 15, 16, 23] }],
},
options: { responsive: true },
});01 platform
What Chart.js gives you that raw canvas doesn't
Drawing a chart on a bare canvas means writing the axes, the ticks, the legend and the tooltips yourself. Chart.js is the trade where you describe the chart in one object and it handles the rest — and this is a code editor, not a no-code chart generator, so you tune that object against a live result.
-
A chart is a config object
Type, data and options — one object describes the whole chart, and Chart.js draws the axes, legend, tooltips and animation from it. You edit a description, not drawing code.
-
Live canvas on every save
Change a color, a scale or a dataset and the canvas redraws immediately, so tuning a chart is a tight loop rather than a guess-and-refresh.
-
Every chart type included
Line, bar, pie, doughnut, radar, polar area, scatter and bubble all come from the same library, so switching type is changing one string.
-
A real project, not a snippet
Keep data in a file, split config across modules, add TypeScript, and commit with Git — the shape of an actual dashboard rather than a one-off pen.
02 deep dive
A chart is one configuration object
Everything Chart.js does starts from a single object, and understanding its three parts is understanding the library.
type picks the chart. One string — 'line', 'bar', 'pie', 'radar' — decides the whole shape. Switching it re-renders the same data as a different chart, which is the quickest way to find the right one.
data holds labels and datasets. Labels run along the category axis; each dataset is an array of numbers with its own color and label. Add a second dataset and it appears alongside the first with no extra wiring.
options tunes the rest. Scales, legend position, tooltips, stacking and animation all live under options, so the difference between a rough chart and a finished one is edits to one branch of the object.
- type
- 'line' | 'bar' | …
- data
- labels + datasets
- options
- scales, legend, tooltips
- import
- chart.js/auto
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [
{ label: '2025', data: [12, 19, 14, 22] },
{ label: '2026', data: [15, 21, 18, 27] },
],
}03 features
The chart types you can render
Everything below is on the moment you open the Chart.js editor, which starts as a sales dashboard with a line chart and a doughnut.
-
Line & area
Time series and trends, with optional fill for area charts and tension for smoothing — the default the starter opens on.
-
Bar & stacked bar
Categorical comparisons, grouped or stacked, horizontal or vertical, by setting the axis and a stacking option.
-
Pie & doughnut
Parts of a whole, with a configurable cutout that turns a pie into a doughnut and legends that toggle segments on click.
-
Radar & polar area
Multi-axis comparisons on a radial grid — useful for scores across several dimensions at once.
-
Scatter & bubble
Point clouds on linear axes, with bubble radius encoding a third value, for distributions and correlations.
-
Mixed charts
Combine types in one chart — a bar dataset with a line overlay — by giving datasets their own type, all from the same config.
04 deep dive
Scales, tooltips and the options that matter
The gap between a rough chart and one you would ship is mostly in the options, and the editor is where you close it against a live preview.
Scales control the axes. Set a scale's min, max, type (linear, logarithmic, time) or stacking, and the axis and gridlines update to match — no manual tick maths.
Tooltips and legend are configurable. Position the legend, format tooltip labels with a callback, and toggle datasets by clicking the legend, all through the options object rather than event code.
Responsive by default. responsive: true makes the chart fill and reflow with its container, which the device-frame previews let you check at phone and tablet widths.
- axes
- options.scales
- legend
- options.plugins.legend
- tooltips
- label callbacks
- responsive
- reflows to container
options: {
scales: {
y: { min: 0, max: 100, stacked: true },
x: { stacked: true },
},
plugins: { legend: { position: 'bottom' } },
}05 workflow
From a data array to a rendered chart
No install, no bundler, no dev server — the whole loop from an array of numbers to a responsive chart on a canvas.
- new project → Chart.js
- created chart.js · chart.js/auto resolved
- change type: 'line' → 'bar'
- same data, redrawn as bars
- add a second dataset
- canvas redrawn · two series, one legend
- git commit -m "quarterly sales chart"
- [main 71a0d4c] quarterly sales chart · 2 files
-
Nothing to set up
No webpack, no dev server, no local install — the chart redraws the moment you save, on a real canvas.
-
The same loop on a phone
Chart.js runs client-side, so a phone renders the chart the same way a laptop does, with nothing installed.
-
Share by link
Send a live preview URL and the recipient sees the interactive chart, not a static image of it.
06 ecosystem
Chart.js beside the rest of the toolkit
Chart.js is one of many things the editor runs — the same tab compiles a framework, runs a language and renders a canvas chart, per file.
07 languages
What the editor runs beside Chart.js
A Chart.js chart sits beside everything else the editor compiles in the browser, renders natively, or executes on demand.
Compiled in your browser11
Zero build step. Transform runs on a Web Worker, so typing never blocks.
- JSX
- TSX
- TypeScript
- Vue SFC
- Svelte
- Angular (JIT)
- SolidJS
- SCSS
- Sass
- Less
- Pug
Rendered natively8
Straight to the live preview, no transform in the way.
- HTML
- CSS
- JavaScript
- JSON
- Markdown
- Jupyter (.ipynb)
- SVG
- YAML
Executed on demand22
70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.
- Python
- Java
- C
- C++
- C#
- Go
- Rust
- Ruby
- PHP
- Kotlin
- Swift
- Lua
- Scala
- Perl
- Haskell
- Elixir
- Dart
- R
- Julia
- SQLite
- Bash
- PowerShell
08 questions
Chart.js in the browser — common questions
Do I need to install or build anything for Chart.js?
No. chart.js resolves from npm through esm.sh into a native import map, so import Chart from 'chart.js/auto' works with no webpack, no dev server and no node_modules. Opening the editor is the whole setup.
Does the chart update live as I edit the config?
Yes. The canvas redraws on save, so changing the type, a color, a scale or a dataset shows up immediately — the tight loop that makes tuning a chart's options quick.
Which chart types are supported?
All of Chart.js — line, bar, pie, doughnut, radar, polar area, scatter and bubble — plus mixed charts that combine types. Switching between them is changing the type string in the same config object.
Can I combine two chart types in one chart?
Yes. Give individual datasets their own type — a line over bars, for example — within a single configuration, and Chart.js renders them together on one canvas with a shared axis and legend.
Can I load my data from a file?
Yes. Keep a JSON or CSV of your data in the project tree and read it into the config, so the chart is driven by real data rather than an inline array, the same as in a deployed dashboard.
Does it work with TypeScript?
Yes. Chart.js ships type definitions, so writing .ts gives you autocomplete on the config object and type-checking in the editor, with the types stripped on the fast pass that compiles the code.
When should I use D3 instead of Chart.js?
Chart.js is the fast path for standard chart types configured in one object. Reach for D3 when you need a custom visualization that is not a standard chart — D3 binds data to elements you draw yourself, at the cost of more code.
Do I need to install anything to use XCODX Studio?
No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.
Where is my code stored?
In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.
Is XCODX Studio free?
Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.
Can I use XCODX on a tablet or Chromebook?
Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.
Can I export a project or move it to my own machine?
Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.
Nothing to install
Open the Chart.js editor now
A responsive chart on a live canvas in under a minute — every chart type, configured in one object, with no account wall and nothing to install.