Chart.js

Episode #393 by Teacher's Avatar David Kimura

Summary

Chart.js is a simple yet flexible JavaScript charting library for the modern web. In this episode, we look at creating a Stimulus controller around Chart.js. We'll also look at making the chart interactive by adding zoom and pan functionality.
rails chart stimulusjs 21:24

Chapters

  • Introduction (0:00)
  • Setting up a fresh Rails 7 app (1:26)
  • Setting up transactions controller (2:33)
  • Creating the chart view (4:50)
  • Adding in JS libraries (6:13)
  • Creating the line-chart controller (6:41)
  • Demo of fetching data and displaying chart (16:12)
  • Adding pan and zoom events (16:30)
  • Final thoughts (20:16)
Student & Teacher
$ 9 /mo

Valid School Email Required

Same Access as Pro

Subscribe Now
Pro Monthly
$ 19 /mo

Access to Pro Episodes

Invite to Slack Channel

Priority Suggestions

Ad Free

Subscribe Now
Pro Annual
Autumn Sale
$ 144 190 /yr

Access to Pro Episodes

Invite to Slack Channel

Priority Suggestions

Ad Free

Subscribe Now
Teams
$ 57 /mo

3 Users Minimum

$19.00 / user / month

Same Access as Pro

Subscribe to Teams