Chart.js
Simple yet flexible JavaScript charting for designers & developers.
- License: MIT
- https://www.chartjs.org/
Chart Basic
<!-- Bar title -->
<div class="rounded-pill bg-light p-2 d-flex align-items-center">
<h5 class="m-0 px-2 w-100">
Chart Title
</h5>
<!-- save as image -->
<a href="#!" data-chartjs-save='{"chartId":"basicChart","fileName":"basicChart","bgcolor":"white"}' class="btn btn-icon btn-primary rounded-circle" data-bs-toggle="tooltip" title="Save Chart">
<svg height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"></path>
<path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"></path>
</svg>
</a>
</div>
<!--
Chart : 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)
-->
<canvas id="basicChart" height="450" data-chartjs='{
"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,
"backgroundColor": "rgba(133, 145, 255, 0.5)",
"borderColor": "rgba(133, 145, 255, 0.5)",
"borderWidth": 2
}]
},
"options": {
"title": {
"display": false,
"text": "Chart Title"
},
"legend": {
"display": false,
"position": "top"
},
"scales": {
"xAxes": [{
"display":true,
"scaleLabel": {
"display": false,
"labelString": "Month"
}
}],
"yAxes": [{
"display":true,
"scaleLabel": {
"display": false,
"labelString": "Visits"
}
}]
}
}
}'></canvas>
<!-- Vendor : Quill -->
<link rel="stylesheet" href="../assets/vendors/chart.js/dist/Chart.min.css">
<!-- Vendor : Quill -->
<script src="../assets/vendors/chart.js/dist/Chart.bundle.min.js"></script>
<script src="../assets/vendors/file-saver/dist/FileSaver.min.js"></script>
<script src="../assets/vendors/vendor.chartjs.min.js"></script>
Chart Multiple datasets
<canvas height="450" data-chartjs='{
"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,
"backgroundColor": "rgba(255, 159, 64, 0.5)",
"borderColor": "rgba(255, 159, 64, 0.5)",
"borderWidth": 2
},{
"label": "Orders",
"data": [14, 16, 16, 14, 13, 12, 14, 14, 13, 14, 12, 10],
"fill": true,
"backgroundColor": "rgba(255, 159, 64, 0.9)",
"borderColor": "rgba(255, 159, 64, 0.9)",
"borderWidth": 2
}]
},
"options": {
"title": {
"display": true,
"text": "Multiple Datasets"
},
"legend": {
"display": true,
"position": "top"
},
"scales": {
"xAxes": [{
"display":true,
"scaleLabel": {
"display": false,
"labelString": "Orders"
}
}],
"yAxes": [{
"display":true,
"scaleLabel": {
"display": false,
"labelString": "Visits"
}
}]
}
}
}'></canvas>
Chart Combined
<canvas height="450" data-chartjs='{
"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,
"backgroundColor": "rgba(201, 203, 207, 0.3)",
"borderColor": "rgba(201, 203, 207, 0.3)",
"borderWidth": 2
},{
"label": "Orders",
"data": [14, 16, 16, 14, 13, 12, 14, 14, 13, 14, 12, 10],
"fill": false,
"backgroundColor": "rgba(255, 99, 132, 0.6)",
"borderColor": "rgba(255, 99, 132, 0.6)",
"borderWidth": 2
}]
},
"options": {
"title": {
"display": true,
"text": "Combined Datasets"
},
"legend": {
"display": true,
"position": "top"
},
"scales": {
"xAxes": [{
"display":true,
"scaleLabel": {
"display": false,
"labelString": "Orders"
}
}],
"yAxes": [{
"display":true,
"scaleLabel": {
"display": false,
"labelString": "Visits"
}
}]
}
}
}'></canvas>
Chart Simple line
<canvas height="450" data-chartjs='{
"type": "line",
"data": {
"labels": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
"datasets": [{
"label": "Visits",
"data": [11, 11, 17, 11, 15, 12, 13, 16, 11, 18],
"fill": false,
"borderColor": "rgba(255, 99, 132, 1)",
"borderWidth": 3
}]
},
"options": {
"title": {"display": false},
"legend": {"display": false},
"scales": {
"xAxes": [{"display":false}],
"yAxes": [{"display":false}]
}
}
}'></canvas>
Chart Simple line
<canvas height="450" data-chartjs='{
"type": "line",
"data": {
"labels": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
"datasets": [{
"label": "Visits",
"data": [11, 11, 17, 11, 15, 12, 13, 16, 11, 18],
"fill": false,
"borderColor": "rgba(201, 203, 207, 1)",
"borderWidth": 3
}]
},
"options": {
"title": {"display": false},
"legend": {"display": false},
"scales": {
"xAxes": [{"display":false}],
"yAxes": [{"display":false}]
},
"elements": {"point":{"radius":0}},
"tooltips": {"enabled": false}
}
}'></canvas>
Chart Bar
<canvas height="450" data-chartjs='{
"type": "bar",
"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],
"backgroundColor": "rgba(139, 195, 74, 0.35)",
"borderWidth": 2
}]
},
"options": {
"title": {
"display": false,
"text": "Chart Title"
},
"legend": {
"display": false,
"position": "top"
},
"scales": {
"xAxes": [{
"display":true,
"scaleLabel": {
"display": false,
"labelString": "Month"
}
}],
"yAxes": [{
"display":true,
"scaleLabel": {
"display": false,
"labelString": "Visits"
}
}]
}
}
}'></canvas>
Chart Bar Multiple Datasets
<canvas height="450" data-chartjs='{
"type": "bar",
"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],
"backgroundColor": "rgba(3, 169, 244, 0.7)",
"borderWidth": 2
},{
"label": "Orders",
"data": [14, 16, 16, 14, 13, 12, 14, 14, 13, 14, 12, 10],
"backgroundColor": "rgba(255, 193, 7, 0.61)",
"borderWidth": 2
}]
},
"options": {
"title": {
"display": false,
"text": "Multiple Datasets"
},
"legend": {
"display": false,
"position": "top"
},
"scales": {
"xAxes": [{
"display":true,
"scaleLabel": {
"display": false,
"labelString": "Month"
}
}],
"yAxes": [{
"display":true,
"scaleLabel": {
"display": false,
"labelString": "Visits"
}
}]
}
}
}'></canvas>
Chart Pie & Doughnut
<!-- Pie -->
<canvas height="450" data-chartjs='{
"type": "pie",
"data": {
"labels": ["Jan", "Feb", "Mar", "Apr"],
"datasets": [{
"label": "Pie Chart",
"data": [544, 412, 455, 511],
"backgroundColor": ["#ff0000", "#377dff", "#6dbb30", "#fad776"]
}]
},
"options": {
"title": {"display": false},
"legend": {"display": true,"position": "bottom"},
"scales": {
"xAxes": [{"display":false}],
"yAxes": [{"display":false}]
}
}
}'></canvas>
<!-- Doughnut -->
<canvas height="450" data-chartjs='{
"type": "doughnut",
"data": {
"labels": ["Jan", "Feb", "Mar", "Apr"],
"datasets": [{
"label": "Pie Chart",
"data": [544, 412, 455, 511],
"backgroundColor": ["#ff0000", "#377dff", "#6dbb30", "#fad776"]
}]
},
"options": {
"title": {"display": false},
"legend": {"display": true,"position": "bottom"},
"scales": {
"xAxes": [{"display":false}],
"yAxes": [{"display":false}]
}
}
}'></canvas>