How to Load Chart.js from CDNs

We typically import Chart.js from CDNs, because Chart.js is a fairly large and complex module.

To import Chart.js using jsdelivr.net, use the following. Keep in mind that chart.umd.js is minified.

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.js"></script>

You can also use Cloudflare:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.umd.js"></script>

Or unpkg:

<script src="https://unpkg.com/chart.js@4.2.0/dist/chart.umd.js"></script>

For example, below is a bar chart using Chart.js from unpkg.

ChartJS 2

Below is how you can import Chart.js 2 using Cloudflare's CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>

---

More Chartjs Tutorials

• Handling onClick Events on ChartJS Bar Charts
• Make a Horizontal Bar Chart with ChartJS
• How to Remove Line Chart Fill in ChartJS
• Create a Chart with 2 Y Axes in ChartJS
• Hide the Tooltip in ChartJS
• Set Axis Label Color in ChartJS
• Set Chart Size with ChartJS