Chapter 11 Chart.js and Highcharts Templates

We recommend that you start creating interactive charts with easy drag-and-drop tools we described in Chapter 6: Chart Your Data, such as Google Sheets, Datawrapper and Tableau Public. But when you’re ready to explore more powerful tools, this chapter features Chart.js and Highcharts code templates, which offer many benefits for more advanced users. By copying and modifying our templates, you can customize the appearance and interactivity of your visualizations, upload your data in CSV format, and freely publish it with your code on GitHub Pages or any server you choose, without relying on a drag-and-drop tool platform to continue its service into the future. But in order to work with our templates, you first need to learn how to edit and host code with GitHub in Chapter 10.

Most of the templates we feature are designed with Chart.js, an open-source code library that is freely distributed under an MIT license, which anyone can use and modify. This means that the code library is extensible by other users, who have created awesome Chart.js resources, such as additional chart types and plugins that provide more features. Also, we include some templates designed with Highcharts to expand the range of chart types and features not fully covered by Chart.js. Although Highcharts code is open-source, its licensing terms differ. Highcharts is free for non-commerical use, such as a personal, school, or non-profit organization website. But if you create charts for commercial or governmental use, you’ll need to purchase a Highcharts license. In either case, we designed our Chart.js and Highcharts code templates to make them easier for beginners to understand. See the various types of charts and follow the links to the templates and tutorials in Table 11.1.

Table 11.1: Chart Code Templates and Tutorials
Chart Best use and tutorials in this book
Bar or Column Chart
Best to compare categories side-by-side. If labels are long, use horizontal bars instead of vertical columns.
Power tool: Bar or Column Chart with CSV data in Chart.js code template and tutorial
Error Bars in a Bar/Column Chart
Best to show margin of error bars when comparing categories side-by-side. If labels are long, use horizontal bars instead of vertical columns.
Power tool: Error Bars in Bar/Column Chart with CSV data in Chart.js code template and tutorial
Line Chart
Best to show continuous data, such as change over time.
Power tool: Line Chart with CSV data in Chart.js code template and tutorial
Annotated Line Chart
Best to add contextual notes inside chart of continuous data, such as change over time.
Power tool: Annotated Line Chart with CSV data in Highcharts code template and tutorial
Scatter Chart
Best to show the relationship between two datasets as XY coordinates to reveal possible correlations.
Power tool: Scatter Chart with CSV data in Chart.js code template and tutorial
Bubble Chart
Best to show the relationship between three or four sets of data, with XY coordinates, bubble size, and color.
Power tool: Bubble Chart with CSV data in Chart.js code template and tutorial

For additional chart types, see Chart.js samples and Highcharts Demos.

These code templates 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)