Customizable responsive charts, including: Line, Bar, Pie charts and more.
This component is powered by Chart.js plugin. Please ensure that you have linked to the Chart.js script file in your document at the following location: assets/vendor/chart.js/dist/chart.umd.js. You can refer to this page for guidance.
Around added extra layer of data attribute to access the core features of the plugin right in HTML document.
data-chart - to pass in data in JSON format to be displayed in line, bar, pie or other type of chart.
Check the code examples below.
<!-- Line chart: Multiple lines of different color + Legend -->
<canvas data-chart='{
"type": "line",
"data": {
"labels": ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9"],
"datasets": [
{
"label": "Dataset 1",
"data": [12, 9, 7, 8, 6, 4, 3, 2, 0],
"backgroundColor": "rgba(68,140,116,.35)",
"borderWidth": 2,
"borderColor": "#448c74",
"pointBackgroundColor": "#448c74",
"pointBorderWidth": 8,
"pointBorderColor": "rgba(68,140,116,.35)",
"pointHoverBorderColor": "#448c74",
"pointHoverBorderWidth": 6
},
{
"label": "Dataset 2",
"data": [2, 1, 3, 7, 9, 6, 7.7, 4, 7],
"backgroundColor": "rgba(237,203,80,.35)",
"borderWidth": 2,
"borderColor": "#edcb50",
"pointBackgroundColor": "#edcb50",
"pointBorderWidth": 8,
"pointBorderColor": "rgba(237,203,80,.35)",
"pointHoverBorderColor": "#edcb50",
"pointHoverBorderWidth": 6
},
{
"label": "Dataset 2",
"data": [1, 3, 4, 5, 6, 8, 9, 10, 11],
"backgroundColor": "rgba(237,80,80,.35)",
"borderWidth": 2,
"borderColor": "#ed5050",
"pointBackgroundColor": "#ed5050",
"pointBorderWidth": 8,
"pointBorderColor": "rgba(237,80,80,.35)",
"pointHoverBorderColor": "#ed5050",
"pointHoverBorderWidth": 6
}
]
},
"options": {
"scales": {
"y": {
"beginAtZero": true,
"border": {
"color": "rgba(133,140,151,.18)"
},
"grid": {
"color": "rgba(133,140,151,.18)"
}
},
"x": {
"border": {
"color": "rgba(133,140,151,.18)"
},
"grid": {
"color": "rgba(133,140,151,.18)"
}
}
}
}
}'></canvas><!-- Bar chart: Multiple bars of different color + Legend -->
<canva data-chart='{
"type": "bar",
"data": {
"labels": ["2018", "2019", "2020", "2021", "2022", "2023"],
"datasets": [
{
"label": "Dataset 1",
"data": [12000, 9000, 7000, 8000, 11000, 6000],
"borderWidth": 2,
"borderColor": "#448c74",
"backgroundColor": "rgba(68,140,116,.35)",
"hoverBackgroundColor": "rgba(68,140,116,.75)"
},
{
"label": "Dataset 2",
"data": [3500, 5000, 8750, 1300, 3000, 8750],
"borderWidth": 2,
"borderColor": "#edcb50",
"backgroundColor": "rgba(237,203,80,.35)",
"hoverBackgroundColor": "rgba(237,203,80,.75)"
}
]
},
"options": {
"scales": {
"y": {
"beginAtZero": true,
"border": {
"color": "rgba(133,140,151,.18)"
},
"grid": {
"color": "rgba(133,140,151,.18)"
}
},
"x": {
"border": {
"color": "rgba(133,140,151,.18)"
},
"grid": {
"color": "rgba(133,140,151,.18)"
}
}
}
}
}'></canvas><!-- Pie chart: Multiple slices of different color + Legend -->
<canvas data-chart='{
"type": "pie",
"data": {
"labels": ["Dataset 1", "Dataset 2", "Dataset 3"],
"datasets": [
{
"label": "Value, %",
"data": [42, 25, 33],
"borderWidth": 0,
"backgroundColor": [
"#448c74",
"#ed5050",
"#edcb50"
],
"hoverBackgroundColor": [
"#448c74",
"#ed5050",
"#edcb50"
]
}
]
},
"options": {
"plugins": {
"legend": {
"position": "right",
"labels": {
"usePointStyle": true,
"boxWidth": 12,
"boxHeight": 12,
"useBorderRadius": true,
"borderRadius": 8,
"padding": 20,
"font": {
"size": 15
}
}
}
}
}
}'></canvas><!-- Doughnut chart: Multiple slices of different color + Legend -->
<canvas data-chart='{
"type": "doughnut",
"data": {
"labels": ["Dataset 1", "Dataset 2", "Dataset 3"],
"datasets": [
{
"label": "Value, %",
"data": [42, 25, 33],
"borderWidth": 0,
"backgroundColor": [
"#448c74",
"#ed5050",
"#edcb50"
],
"hoverBackgroundColor": [
"#448c74",
"#ed5050",
"#edcb50"
]
}
]
},
"options": {
"plugins": {
"legend": {
"position": "right",
"labels": {
"usePointStyle": true,
"boxWidth": 12,
"boxHeight": 12,
"useBorderRadius": true,
"borderRadius": 8,
"padding": 20,
"font": {
"size": 15
}
}
}
}
}
}'></canvas><!-- Polar area chart: Multiple slices of different color + Legend -->
<canvas data-chart='{
"type": "polarArea",
"data": {
"labels": ["Red", "Green", "Yellow", "Grey", "Blue"],
"datasets": [{
"label": "My dataset",
"data": [11, 16, 7, 3, 14],
"borderWidth": 0,
"backgroundColor": [
"#ed5050",
"#448c74",
"#edcb50",
"#e3e9ef",
"#3f7fca"
],
"hoverBackgroundColor": [
"#ed5050",
"#448c74",
"#edcb50",
"#e3e9ef",
"#3f7fca"
]
}]
},
"options": {
"scales": {
"r": {
"ticks": {
"backdropColor": "rgba(255,255,255,0)"
},
"grid": {
"color": "rgba(133,140,151,.18)"
}
}
}
}
}'></canvas><!-- Radar chart: Multiple lines of different color with fill enabled + Legend -->
<canvas data-chart='{
"type": "radar",
"data": {
"labels": ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
"datasets": [
{
"label": "Dataset 1",
"data": [65, 59, 90, 81, 56, 55, 40],
"fill": true,
"backgroundColor": "rgba(237, 80, 80, .15)",
"borderColor": "#ed5050",
"pointBackgroundColor": "#ed5050",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "#ed5050"
},
{
"label": "Dataset 2",
"data": [28, 48, 40, 19, 96, 27, 100],
"fill": true,
"backgroundColor": "rgba(63, 127, 202, .15)",
"borderColor": "#3f7fca",
"pointBackgroundColor": "#3f7fca",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "#3f7fca"
}
]
},
"options": {
"elements": {
"line": {
"borderWidth": 3
}
},
"scales": {
"r": {
"ticks": {
"backdropColor": "rgba(255,255,255,0)"
},
"grid": {
"color": "rgba(133,140,151,.18)"
}
}
}
}
}'></canvas>