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 init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
(function() {
// Initialization of chartjs
});
</script>
<canvas id="barChart">
<p>Your browser does not support the canvas element.</p>
</canvas>
<script>
const stat = document.getElementById('barChart').getContext('2d');
const statistics = new Chart(stat, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Orders',
data: [128, 159, 354, 524, 211, 321, 322, 543, 643, 654, 987, 123],
backgroundColor: [
'rgb(8, 66, 152, 0.9)'
],
borderRadius:5
},
{
label: 'Items sold',
data: [18, 19, 34, 54, 21, 31, 32, 53, 63, 64, 97, 13],
backgroundColor: [
'rgb(0 148 133)'
],
borderRadius:5
},
{
label: 'Refunds',
data: [108, 109, 304, 504, 201, 301, 302, 503, 603, 604, 907, 103],
backgroundColor: [
'rgb(233 30 99)'
],
borderRadius:5
}]
},
options: {
scales: {
y: {
beginAtZero: true,
display:false
}
}
}
});
</script>
<canvas id="lineChart">
<p>Your browser does not support the canvas element.</p>
</canvas>
<script>
const sale = document.getElementById('lineChart').getContext('2d');
const sales = new Chart(sale, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Sales',
data: [128, 159, 354, 524, 211, 321, 322, 543, 643, 654, 987, 123],
backgroundColor: [
'rgb(8, 66, 152, 0.2)'
],
fill: true,
borderColor: 'rgb(8, 66, 152, 0.9)',
tension: 0.1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
display:false
}
}
}
});
</script>
<canvas id="lineChart">
<p>Your browser does not support the canvas element.</p>
</canvas>
<script>
const traffic = document.getElementById('lineChart').getContext('2d');
const trafficC = new Chart(traffic, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Direct',
data: [128, 159, 354, 524, 311, 421, 352, 543, 643, 654, 987, 723],
backgroundColor: [
'rgb(8, 66, 152, 0.2)'
],
fill: false,
borderColor: 'rgb(8, 66, 152, 0.9)',
tension: 0.1
},
{
label: 'Organic',
data: [228, 259, 254, 224, 211, 321, 322, 443, 743, 554, 787, 923],
backgroundColor: [
'rgb(233 30 99)'
],
fill: false,
borderColor: 'rgb(233 30 99)',
tension: 0.1
},
{
label: 'Referral',
data: [328, 359, 154, 124, 200, 221, 222, 243, 343, 254, 387, 523],
backgroundColor: [
'rgb(0 150 136)'
],
fill: false,
borderColor: 'rgb(0 150 136)',
tension: 0.1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
display:false
}
}
}
});
</script>