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 = ...

Get Learn TypeScript 3 by Building Web Applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.