Chart.js

Small, friendly canvas charts.

Chart.js is taught here in 12 lessons, running from Setup and configuration through to Testing charts and migrating to v4. Each lesson takes one topic, shows the working code, and links onward to the next, so the course can be read straight through in order.

Lessons

1. Setup and configurationCreate a chart from a canvas, understand the three-part config object, and register only the pieces you actually use.
2. Chart types and datasetsThe eight built-in types, how datasets carry their own styling, mixed charts with two scales, and how data gets parsed.
3. Updating, styling and interactionMutate the data then call update, control every visual with dataset and option properties, and keep the chart usable on small screens.
4. Installing Chart.js and tree-shaking the bundleChoose between chart.js/auto and explicit registration, handle the ESM-only packaging, and measure what the explicit path actually saves.
5. Scales, axes and time-series dataConfigure category, linear, logarithmic, time and timeseries scales, install a date adapter, and format ticks without fighting the defaults.
6. Options, built-in plugins and tooltipsConfigure title, legend and tooltips, use the colors and decimation plugins, colour points by threshold, and write tooltip callbacks that read well.
7. Responsive canvas layout and image exportSize the canvas through its wrapper, keep text crisp on high-DPI screens, export a PNG at a usable resolution, and print a report that is not a blurry screenshot.
8. Dynamic data, streaming and performancePush and shift points without re-creating the chart, use update modes that skip the work you do not need, and keep a live chart smooth.
9. Chart.js in React, Vue and AngularUse the official wrappers and the plain canvas, handle StrictMode double-mounting, reach the chart instance, and update datasets without re-creating the chart.
10. Custom controllers, elements and pluginsSubclass a controller, write a custom element draw method, hook into the render pipeline with inline plugins, and know when the annotation plugin is the right answer.
11. Accessibility and colour choicesMake a canvas chart readable by assistive technology, choose palettes that survive colour blindness, and respect reduced-motion preferences.
12. Testing charts and migrating to v4Test with a mocked canvas, assert on data rather than pixels, cover the interesting behaviour with integration tests, and work through the v3 to v4 changes.

More in Front-end Development

HTML CSS JavaScript TypeScript HTML DOM AJAX JSON Tailwind CSS Bootstrap 5 Foundation Vue.js React Next.js Angular jQuery ECharts SVG Font Awesome

FAQ