Learn TypeScript 3 by Building Web Applications

Implementing the displayChart method

Last but not least, we can now implement the method that will render the chart. The displayChart function accepts a ChartDetails object, containing everything we need to know in order to render.

Before we implement this method, we first need to import Chart.js and retrieve the canvas element from the DOM:

1. Add the following import at the top of the world-explorer-view.ts file: import Chart = require("chart.js");. That is all we need to do in order to load Chart.js!
2. Add a private and read-only class field for the canvas: private readonly _canvas: HTMLCanvasElement;. It can be marked as readonly because we won't need to reassign it later.

Now, add the following code to the constructor:

this._canvas = ...