Chartjs

Simple yet flexible JavaScript charting for designers & developers.

How to use?

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

              
                <link rel="stylesheet" href="./node_modules/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="./node_modules/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.

              
                <script src="./assets/js/hs.chartjs.js"></script>

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>

                    
                      <!-- 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`