To set up a web page for Chart.js, you just need to load the library. If you already have a website set up, you can download Chart.js from www.chartjs.org, store it where you can load it from a web page, and import it using the <script> tag, as follows:
<script src="../js/Chart.min.js"></script>
You can also use npm or bower to install Chart.js if you have a modular development environment, as shown in the following code. Chart.js integrates well with ES6 modules, Angular, React, and Vue applications:
npm install chart.js --save
bower install chart.js --save
The simplest way to get started is to link to a library file provided by a Content Delivery Network (CDN). You can obtain a list at cdnjs.com/libraries/Chart.js, choose the version and CDN provider of your choice, and copy one of the links. Unless you want to inspect the code, use the minified link (that ends in min.js). It's best not to use the bundle version, since it includes some extra non-Chart.js libraries (a better practice is to include third-party libraries separately when needed).
Using any text or code editor, copy the link to the src attribute of a script tag placed somewhere in the <head> of your HTML file, as follows:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js">
</script>
If you have a development environment, such as Visual Studio Code, PHPStorm, or Brackets, you may wish to set up a template file that includes the Chart.js CDN script tag for new pages.
Another way to explore Chart.js and follow the examples in this book, is to use an online code editor, such as CodePen or JSFiddle. It's also a great way to share your charts and code.
Using JSFiddle (https://jsfiddle.net/), you just need to add the Chart.js CDN to the Resources tab, as shown in the following screenshot, and then you can use the tabs to write the HTML, CSS, and JavaScript code for your charts:
To configure Chart.js in CodePen (https://codepen.io/), click the Settings menu and then the JavaScript tab. Search for Chart.js, and click the first option to add the CDN to your environment, as demonstrated in the following screenshot:
You can now use the Chart.js library and see the results in real time, as shown in the following screenshot:
