Bar plots with Chart.js

When you are working with data it can be very helpful to plot the data you are working with. In this example we will use the Chart.js library to create a bar plot from 1D data. The following cell imports all requirements to create a BarChart and registers them in the Chart class.

As a next step we need a <canvas> element into which Chart.js will plot the data. Weblab provides the document.createElement() method to create HTML Elements. To be able to later refer to the created canvas, we set the id of the HTML Element to "myChart". Additionally we set the height to 400px. Finally, we let Weblab display the element by returning it as the last expression in the cell.

Now that we have a canvas into which Chart.js can plot the data we can create the plot. This is done by creating a new Chart object and specifying the name "myChart" of our canvas element. When you execute the following cell, it should create a plot in the existing canvas element.

You can update the chart by changing the properties of the chart object and calling the update() function afterwards.

This also applies to the display options. You can for instance set the title of the chart.