Chartjs
Simple yet flexible JavaScript charting for designers & developers.
Official documentation
For more detailed information and examples, see the official documentation: Chartjs .
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>
Basic example
<!-- 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 -->
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.