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="../../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.

<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-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/

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