How to use
Copy-paste the stylesheet <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> 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": {
"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 -->
Methods
| 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 |