Chart.js

Simple yet flexible JavaScript charting for designers & developers.

Official documentation

For more detailed information and examples, see the official documentation: Chart.js documentation.

Creating a Chart

It's easy to get started with Chart.js. All that's required is the script included in your page along with a single <canvas> node to render the chart.

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

                
                  <script src="../assets/vendor/chart.js/dist/Chart.min.js"></script>
                  <script src="../assets/vendor/chartjs-plugin-style/dist/chartjs-plugin-style.min.js"></script>

Copy-paste the following <script>, depending of what chart you use, near the end of your pages under JS to enable it.

                
                  <script src="../assets/js/charts/area-chart-small.js"></script>

                
                  <script src="../assets/js/charts/area-chart.js"></script>

                
                  <script src="../assets/js/charts/doughnut-chart.js"></script>

                      
                        <canvas class="js-area-chart-small"
                                width="100"
                                height="150"
                                data-extend='[{
                                  "data": [20, 0, 40, 40, 100, 60, 100, 90, 80],
                                  "borderColor": "#444bf8"
                                }]'></canvas>

Result
Code

                      
                        <canvas class="js-area-chart"
                                width="100"
                                height="320"></canvas>

Result
Code

                      
                        <canvas class="js-doughnut-chart"
                                width="240"
                                height="240"></canvas>