Cách thêm nhiều biểu đồ trên một trang trong Chart.js

In this video we will explore how to add more than one chart on a page in Chart.js. It is quite common you might want to draw multiple charts on a page. Especially dashboard like pages might need 2 or more charts.

This video will cover exactly how and if you experience an error by exactly duplicating the charts you will discover as well why. All the issues and fixes are solved quickly.

Why adding more charts in Chart.js gives error?

The most important part is to ensure you have unique canvas tag id names for each canvas and have your chart blocks and the matching const variables named correct.

Another common issue is the use of ES6 object shorthands and duplicating the Chart.js code without being aware of the shorthand code. This shorthand code is useful to shorten the code but can give an error if you do copy it without realizing it.

To understand the Chart.js blocks which are used consistently in Chart.js 3 you can watch the specific video on the getting started page. That video explains Chart.js blocks in detail.