Vendor : Chartjs
Simple HTML5 Charts using the canvas tag.
- License: MIT
- https://github.com/chartjs/Chart.js
src/js/vendors/vendor.chartjs.js
Chartjs Basic
<!-- Save Chart - optional -->
<a href="#" data-chartjs-id="smartySimple" data-file-name="smartySimple" class="chartjs-save btn btn-sm btn-primary" title="Save Chart" aria-label="Save Chart">
<svg width="18px" height="18px" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-save-fill" viewBox="0 0 16 16">
<path d="M8.5 1.5A1.5 1.5 0 0 1 10 0h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h6c-.314.418-.5.937-.5 1.5v7.793L4.854 6.646a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l3.5-3.5a.5.5 0 0 0-.708-.708L8.5 9.293V1.5z"></path>
</svg>
<span class="ms-2">Save chart</span>
</a>
<!--
data-chartjs-type="line|bar"
data-chartjs-grid="true|false|xAxes|yAxes"
data-chartjs-legend="false|top|bottom|left|right"
Color Examples
Red: rgb(255, 99, 132, 1)
Orange: rgb(255, 159, 64, 1)
Yellow: rgb(255, 205, 86, 1)
Green: rgb(75, 192, 192, 1)
Blue: rgb(54, 162, 235, 1)
Purple: rgb(153, 102, 255, 1)
Grey: rgb(201, 203, 207, 1)
To set opacity, change the last value (0 - 1).
Example: rgb(255, 99, 132, 0.5)
:: Use Smarty Colorpicker :)
-->
<canvas id="smartySimple" class="chartjs"
data-chartjs-dots="true"
data-chartjs-legend="top"
data-chartjs-grid="true"
data-chartjs-tooltip="true"
data-chartjs-title="Single Chart"
data-chartjs-xaxes-label="Month"
data-chartjs-yaxes-label="Visits"
data-chartjs-line-width="5"
data-chartjs-type="line"
data-chartjs-labels='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]'
data-chartjs-datasets='[{
"label": "Visits",
"data": [20, 22, 24, 21, 23, 26, 24, 23, 21, 24, 23, 22],
"fill": true,
"backgroundColor": "rgba(133, 145, 255, 0.5)"
}]' style="height:600px"></canvas>
Chartjs Multi
<!--
data-chartjs-type="line|bar"
data-chartjs-grid="true|false|xAxes|yAxes"
data-chartjs-legend="false|top|bottom|left|right"
Color Examples
Red: rgb(255, 99, 132, 1)
Orange: rgb(255, 159, 64, 1)
Yellow: rgb(255, 205, 86, 1)
Green: rgb(75, 192, 192, 1)
Blue: rgb(54, 162, 235, 1)
Purple: rgb(153, 102, 255, 1)
Grey: rgb(201, 203, 207, 1)
To set opacity, change the last value (0 - 1).
Example: rgb(255, 99, 132, 0.5)
:: Use Smarty Colorpicker :)
-->
<canvas id="smartyMultiple" class="chartjs"
data-chartjs-dots="false"
data-chartjs-legend="top"
data-chartjs-grid="true"
data-chartjs-tooltip="true"
data-chartjs-title="Multiple Charts"
data-chartjs-xaxes-label="Month"
data-chartjs-yaxes-label="Visits vs Orders"
data-chartjs-line-width="5"
data-chartjs-type="line"
data-chartjs-labels='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]'
data-chartjs-datasets='[{
"label": "Visits",
"data": [20, 22, 24, 21, 23, 26, 24, 23, 21, 24, 23, 22],
"fill": true,
"backgroundColor": "rgba(255, 159, 64, 0.5)"
},{
"label": "Orders",
"data": [14, 16, 16, 14, 13, 12, 14, 14, 13, 14, 12, 10],
"fill": true,
"backgroundColor": "rgba(255, 159, 64, 0.9)"
}]' style="height:600px"></canvas>
Chartjs Line
<!--
data-chartjs-type="line|bar"
data-chartjs-grid="true|false|xAxes|yAxes"
data-chartjs-legend="false|top|bottom|left|right"
Color Examples
Red: rgb(255, 99, 132, 1)
Orange: rgb(255, 159, 64, 1)
Yellow: rgb(255, 205, 86, 1)
Green: rgb(75, 192, 192, 1)
Blue: rgb(54, 162, 235, 1)
Purple: rgb(153, 102, 255, 1)
Grey: rgb(201, 203, 207, 1)
To set opacity, change the last value (0 - 1).
Example: rgb(255, 99, 132, 0.5)
:: Use Smarty Colorpicker :)
-->
<canvas id="graphLineMixed" class="chartjs"
data-chartjs-dots="false"
data-chartjs-legend="top"
data-chartjs-grid="true"
data-chartjs-tooltip="true"
data-chartjs-title="Line Chart"
data-chartjs-xaxes-label="Month"
data-chartjs-yaxes-label="Visits vs Orders"
data-chartjs-line-width="5"
data-chartjs-type="line"
data-chartjs-labels='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]'
data-chartjs-datasets='[{
"label": "Visits",
"data": [30, 32, 34, 31, 33, 36, 34, 63, 31, 64, 33, 32],
"fill": true,
"backgroundColor": "rgba(201, 203, 207, 0.3)"
},{
"label": "Orders",
"data": [20, 22, 24, 21, 23, 26, 24, 23, 21, 24, 23, 22],
"fill": false,
"backgroundColor": "rgba(255, 99, 132, 0.6)"
}]' style="height:600px"></canvas>
Chartjs Mini
<!--
Color Examples
Red: rgb(255, 99, 132, 1)
Orange: rgb(255, 159, 64, 1)
Yellow: rgb(255, 205, 86, 1)
Green: rgb(75, 192, 192, 1)
Blue: rgb(54, 162, 235, 1)
Purple: rgb(153, 102, 255, 1)
Grey: rgb(201, 203, 207, 1)
To set opacity, change the last value (0 - 1).
Example: rgb(255, 99, 132, 0.5)
:: Use Smarty Colorpicker :)
-->
<canvas class="chartjs"
data-chartjs-dots="false"
data-chartjs-legend="false"
data-chartjs-grid="false"
data-chartjs-tooltip="false"
data-chartjs-line-width="3"
data-chartjs-type="line"
data-chartjs-labels='["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]'
data-chartjs-datasets='[{
"label": "Visits",
"data": [11, 11, 17, 11, 15, 12, 13, 16, 11, 18],
"fill": false,
"backgroundColor": "rgba(255, 99, 132, 1)"
}]' style="width:250px;height:250px;"></canvas>
Chartjs Bars
<!--
data-chartjs-type="line|bar"
data-chartjs-grid="true|false|xAxes|yAxes"
data-chartjs-legend="false|top|bottom|left|right"
Color Examples
Red: rgb(255, 99, 132, 1)
Orange: rgb(255, 159, 64, 1)
Yellow: rgb(255, 205, 86, 1)
Green: rgb(75, 192, 192, 1)
Blue: rgb(54, 162, 235, 1)
Purple: rgb(153, 102, 255, 1)
Grey: rgb(201, 203, 207, 1)
To set opacity, change the last value (0 - 1).
Example: rgb(255, 99, 132, 0.5)
:: Use Smarty Colorpicker :)
-->
<canvas id="smartyBarSimple" class="chartjs"
data-chartjs-dots="false"
data-chartjs-legend="true"
data-chartjs-grid="true"
data-chartjs-tooltip="true"
data-chartjs-title="Simple Bar Charts"
data-chartjs-xaxes-label="Month"
data-chartjs-yaxes-label="Visits"
data-chartjs-type="bar"
data-chartjs-labels='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]'
data-chartjs-datasets='[{
"label": "Visits",
"data": [20, 22, 24, 21, 23, 26, 24, 23, 21, 24, 23, 22],
"backgroundColor": "rgba(139, 195, 74, 0.35)"
}]' style="height:600px"></canvas>
Chartjs Multi bar
<!--
data-chartjs-type="line|bar"
data-chartjs-grid="true|false|xAxes|yAxes"
data-chartjs-legend="false|top|bottom|left|right"
Color Examples
Red: rgb(255, 99, 132, 1)
Orange: rgb(255, 159, 64, 1)
Yellow: rgb(255, 205, 86, 1)
Green: rgb(75, 192, 192, 1)
Blue: rgb(54, 162, 235, 1)
Purple: rgb(153, 102, 255, 1)
Grey: rgb(201, 203, 207, 1)
To set opacity, change the last value (0 - 1).
Example: rgb(255, 99, 132, 0.5)
:: Use Smarty Colorpicker :)
-->
<canvas id="smartyBarMultiple" class="chartjs"
data-chartjs-dots="false"
data-chartjs-legend="top"
data-chartjs-grid="true"
data-chartjs-tooltip="true"
data-chartjs-title="Multiple Bar Charts"
data-chartjs-xaxes-label="Month"
data-chartjs-yaxes-label="Visits vs Orders"
data-chartjs-line-width="5"
data-chartjs-type="bar"
data-chartjs-labels='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]'
data-chartjs-datasets='[{
"label": "Visits",
"data": [20, 22, 24, 21, 23, 26, 24, 23, 21, 24, 23, 22],
"backgroundColor": "rgba(3, 169, 244, 0.7)"
},{
"label": "Orders",
"data": [14, 16, 16, 14, 13, 12, 14, 14, 13, 14, 12, 10],
"backgroundColor": "rgba(255, 193, 7, 0.61)"
}]' style="height:600px"></canvas>
Chartjs Pie & Doughnut
Pie chart
Doughnut chart
<!--
data-chartjs-type="pie|doughnut"
data-chartjs-legend="false|top|bottom|left|right"
-->
<canvas class="chartjs"
data-chartjs-title="Pie Chart"
data-chartjs-legend="left"
data-chartjs-tooltip="true"
data-chartjs-type="doughnut"
data-chartjs-datasets='[
["Visitors", 544, "#ff0000"],
["Orders", 412, "#377dff"],
["Green Stuff", 455, "#6dbb30"],
["This is Yellow", 511, "#fad776"]
]'></canvas>
Chartjs by Attribute
<canvas id="byAttributes" class="chartjs"
data-chartjs='{
"type": "bar",
"data": {
"labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
"datasets": [{
"label": "# of Votes",
"data": [12, 19, 3, 5, 2, 3],
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
],
"borderColor": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
"borderWidth": 1
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
}'></canvas>
Chartjs by Javascript
<canvas id="byObject" class="chartjs" data-custom="customChartJs"></canvas>
<script>
var customChartJs = {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: 'Visits',
data: [20, 22, 24, 21, 23, 26, 24, 23, 21, 24, 23, 22],
fill: true,
pointHoverRadius: 4,
pointHoverBorderWidth: 12,
pointBackgroundColor: 'rgba(133, 133, 145, 0)',
pointBorderColor: 'rgba(133, 145, 255, 0)',
pointHoverBackgroundColor: 'rgba(133, 145, 255, 0)',
pointHoverBorderColor: 'rgba(133, 145, 255, 0)',
borderWidth: 0,
backgroundColor: 'rgba(133, 145, 255, 0.5)',
borderColor: 'rgb(133, 145, 255, 0)',
categoryPercentage: 0.35,
barPercentage: 0.70,
// categoryPercentage: 0.6, // bar width adjust
// barPercentage: 1, // bar width adjust
},
{
label: 'Orders',
data: [14, 16, 16, 14, 13, 12, 14, 14, 13, 14, 12, 10],
fill: true,
pointHoverRadius: 4,
pointHoverBorderWidth: 12,
pointBackgroundColor: 'rgba(133, 133, 145, 0)',
pointBorderColor: 'rgba(133, 145, 255, 0)',
pointHoverBackgroundColor: 'rgba(133, 145, 255, 0)',
pointHoverBorderColor: 'rgba(133, 145, 255, 0)',
borderWidth: 0,
backgroundColor: 'rgba(133, 145, 255, 0.9)',
borderColor: 'rgb(133, 145, 255, 0)',
}
]
},
options: {
responsive: true,
maintainAspectRatio: true,
hover: {
mode: 'index'
},
legend: {
display: true,
position: 'top',
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Month'
},
ticks: {
display: true,
beginAtZero: true,
fontColor: '#999999',
fontSize: 13,
padding: 10
},
display: true,
gridLines: false,
}],
yAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Value'
},
gridLines: {
color: '#dddddd',
borderDash: [2, 3],
zeroLineBorderDash: [2, 3],
zeroLineWidth: 1,
},
ticks: {
max: 50,
stepSize: 10,
display: true,
beginAtZero: true,
fontColor: '#999999',
fontSize: 13,
padding: 10
}
}]
},
title: {
display: false,
text: 'Legend Position: top'
},
tooltips: {
enabled: true,
intersect: false,
mode: 'nearest',
bodySpacing: 5,
yPadding: 10,
xPadding: 15,
caretPadding: 0,
displayColors: false,
backgroundColor: '#121212',
titleFontColor: '#ffffff',
cornerRadius: 4,
footerSpacing: 0,
titleSpacing: 0
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
}
}
};
</script>