Chartjs

Simple yet flexible JavaScript charting for designers & developers.

Chartjs documentation

How to use?

Copy-paste the stylesheets <link> into your <head> to load the CSS.

              
                <link rel="stylesheet" href="./assets/vendor/chart.js/dist/Chart.min.css">

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

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

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

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF CHARTJS
                    // =======================================================
                    $('.js-chart').each(function () {
                      var chart = $.HSCore.components.HSChartJS.init($(this));
                    });
                  });
                </script>

Basic example 

                    
                      <!-- Chart -->
                      <div class="position-relative">
                        <canvas class="js-chart"
                                data-hs-chartjs-options='{
                                  "type": "bar",
                                  "data": {
                                    "labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
                                    "datasets": [{
                                      "data": [10, 8, 5, 7, 6, 6, 10, 10, 8, 5, 7, 6, 6, 10, 6, 6, 10, 10, 8, 5, 7, 6, 6, 10, 6, 6, 10, 10, 8],
                                      "backgroundColor": "#19a0ff",
                                      "borderColor": "#19a0ff"
                                    }]
                                  },
                                  "options": {
                                    "scales": {
                                      "yAxes": [{
                                        "display": false,
                                        "gridLines": {
                                          "display": false,
                                          "drawBorder": false
                                        },
                                        "ticks": {
                                          "beginAtZero": true
                                        }
                                      }],
                                      "xAxes": [{
                                        "display": false,
                                        "gridLines": {
                                          "display": false,
                                          "drawBorder": false
                                        }
                                      }]
                                    },
                                    "tooltips": false
                                  }
                                }'
                                height="80"></canvas>
                      </div>
                      <!-- Chart -->

SCSS

SCSS-files of the component can be found here assets/scss/front/vendor/chartjs/

JavaScript behavior

Extend

By assigning a variable, you can call the standard methods of the plugin:

              
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF CHARTJS
                    // =======================================================
                    $('.js-chart').each(function () {
                      var chart = $.HSCore.components.HSChartJS.init($(this));

                      chart.destroy();
                    });
                  });
                </script>

Attributes

By assigning a variable, you can call the standard methods of the plugin:

              
                data-hs-chartjs-options='{
                 "type": "line",
                 "data": {...},
                 "options": {...}
              }' - array

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-chartjs-options='{}'. For more detailed or missing attributes/functions, see the official Chartjs documentation page.

Parameters Description Default value
options.scales.yAxes.ticks.prefix Preffix for yAxes. false
options.scales.yAxes.ticks.postfix Postfix for yAxes. false
options.scales.yAxes.ticks.metric Metric output for axes (1k, 1kk, etc..). false
options.responsive Responsive chart. true
options.maintainAspectRatio Maintain the original canvas aspect ratio (width / height) when resizing. false
options.legend.display Legend for chart. false
options.tooltips.enabled Enable or disable tooltips. false
options.tooltips.prefix Prefix for tooltip text. false
options.tooltips.postfix Postfix for tooltip text. false
options.tooltips.hasIndicator Add indicator for tooltip. false