Chapter 9 Chart.js and Highcharts Templates

TODO: Rewrite chapter to include Highcharts

While beginners appreciate the drag-and-drop chart tools and tutorials described earlier in this book, such as Google Sheets and Tableau Public, more advanced users may wish to customize their visualizations, add more complex data, and control exactly how and where their work appears on the web. A more powerful and relatively easy-to-learn solution is to use code templates built with Chart.js, an open-source library, which you can modify and host on GitHub, as described in this book.

Working with Chart.js

  • Open-source code that is distributed under MIT license and is free for all and
  • Easier for beginners to understand than more complex visualization code libraries such as D3.js Cons
  • Must host your own code repositories to publish to the web (with a free service such as GitHub Pages)
Table 9.1: Chart Templates and Tutorials
Chart Templates Best use and tutorials in this book
Chart.js Bar Chart
Bar charts (vertical bar charts are often called column charts) can be used to compare categorical data.
Template with tutorial: Bar Chart.js with CSV Data
Chart.js Line Chart
Line charts are normally used to show trends (temporal data).
Template with tutorial: Line Chart with CSV Data
Chart.js Scatter Chart
Scatter charts (also scatterplots) are used to display data of 2 or more dimensions.
Template with tutorial: Scatter Chart with CSV Data
Chart.js Bubble Chart
Bubble charts are used to display data of 3 or more dimensions.
Template with tutorial: Bubble Chart with CSV Data

Inside the templates

The templates featured above vary from simple to complex, but all of them rely on four basic pillars:

  • HTML: language to structure content on the web (example: index.html)
  • CSS, or Cascading Style Sheet: to shape how content appears on the web (example: style.css)
  • JavaScript: code to create the chart and interactivity (example: script.js)
  • CSV: data that powers the visualization that is expressed in comma-separated format (example: data.csv)

Also, these templates refer to other code elements:

  • library: link to online instructions to complete routine tasks (example: Chart.js)
  • data: content to appear in chart, typically in CSV format (example: data.csv) or pulled from Google Sheets

Learn more: - Chart.js Samples,