#StandWithUkraine - Stop the Russian invasion

Join us and donate. We are contributing all book royalties from 2022 to present to:
Save Life in Ukraine and Ukraine Humanitarian Appeal.

Bar or Column Chart with Chart.js

In this section, we will show you how to create bar or column charts using Chart.js. To do so, we will be using a Chart.js code template that pulls data from a CSV file, as shown in Figure 11.1. This column chart shows how many students in five school districts in Connecticut were English-language learners in 2018-2019 academic year.

Figure 11.1: Bar chart with Chart.js: explore the interactive version.

To create your own bar or column chart with CSV data using our Chart.js template:

  1. Go to our GitHub repo that contains the code for the chart in Figure 11.1, log into your GitHub account, and click Use this template to create a copy that you can edit.

Note: If you don’t remember how to use GitHub, we recommend you revisit Chapter 10: Edit and Host Code with GitHub.

The repo contains three files that are directly related to the chart:

  • index.html contains HTML (markdown) and CSS (stylesheets) that tell the browser how to style the document that contains the chart, and what libraries to load,
  • script.js contains the JavaScript code that reads data from the CSV file and constructs the interactive chart, and
  • data.csv is the comma-separated file that keeps all the data in the chart, and can be edited in a text editor, or Google Sheets/Excel etc.

The two remaining files are a README.md that describes the contents of the repo, and bar.png that is just an image that you can see in the README. All other GitHub templates in this chapter will be similarly structured.

  1. Prepare your data in CSV format and upload into a data.csv file. Place labels that will appear along the axis in the first column, and each data series in its own column. Your CSV must contain at least two columns (labels and one data series). You can add as many data series columns as you wish.
| district  | nonlearner | learner |
| Hartford  | 15656      | 4111    |
| New Haven | 17730      | 3534    |
  1. In script.js, customize the values of variables. Since you may not be familiar with JavaScript, let’s take a look at the code snippet that describes a single variable in the file:
// `false` for vertical column chart, `true` for horizontal bar chart
var HORIZONTAL = false;

The first line starts with // and is a comment to help you understand what the variable in the next line is responsible for. It does not affect the code. As you can see, if the variable HORIZONTAL is set to false, the chart would have vertical bars (also known as columns). If set to true, the chart will contain horizontal bars. The second line contains the variable declaration itself. The equal sign (=) assigns the value that you see on the right (false) to the variable (var) called HORIZONTAL to the left. This line ends with the semicolon (;).

Below are some of the variables available for you to customize in script.js:

var TITLE = 'English Learners by Select School Districts in CT, 2018-19';

// `false` for vertical column chart, `true` for horizontal bar chart
var HORIZONTAL = false;

// `false` for individual bars, `true` for stacked bars
var STACKED = false;  

// Which column defines 'bucket' names?
var LABELS = 'district';  

// For each column representing a data series, define its name and color
var SERIES = [  
  {
    column: 'nonlearner',
    name: 'Non-Learners',
    color: 'grey'
  },
  {
    column: 'learner',
    name: 'Learners',
    color: 'blue'
  }
];

// x-axis label and label in tooltip
var X_AXIS = 'School Districts';

// y-axis label, label in tooltip
var Y_AXIS = 'Number of Enrolled Students';

// `true` to show the grid, `false` to hide
var SHOW_GRID = true;

// `true` to show the legend, `false` to hide
var SHOW_LEGEND = true;

These basic variables should be enough to get you started. It is natural that you will want to move the legend, edit the appearance of the tooltip, or change the colors of the grid lines. We recommend you look at the official Chart.js documentation to get help with that.