How to use
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./node_modules/chart.js/dist/Chart.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins 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>
(function() {
// INITIALIZATION OF CHARTJS
// =======================================================
document.querySelectorAll('.js-chart').forEach(item => {
HSCore.components.HSChartJS.init(item)
})
})()
</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": {
"y":{
"display": false,
"gridLines": {
"display": false,
"drawBorder": false
},
"ticks": {
"beginAtZero": true
}
},
"x": {
"display": false,
"gridLines": {
"display": false,
"drawBorder": false
}
}
},
"plugins": {
"tooltip": false
}
}
}'
height="80"></canvas>
</div>
<!-- Chart -->
Methods
| Parameters | Description | Default value |
|---|---|---|
options.scales.y.ticks.prefix |
Preffix for y. | false |
options.scales.y.ticks.postfix |
Postfix for y. | false |
options.scales.y.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.plugins.legend.display |
Legend for chart. | false |
options.plugins.tooltip.enabled |
Enable or disable tooltip. | false |
options.plugins.tooltip.prefix |
Prefix for tooltip text. | false |
options.plugins.tooltip.postfix |
Postfix for tooltip text. | false |
options.plugins.tooltip.hasIndicator |
Add indicator for tooltip. | false |