Charts
Customizable responsive charts, including: Line, Bar, Pie charts and more.
The Chart component is powered by the Chart.js plugin. To this component, make sure to include the required reference to the plugin's .js file.
JavaScript file is linked before the closing </body> tag and above theme.min.js reference in your document:
<script src="assets/vendor/chart.js/dist/chart.umd.js"></script>You can apply virtually any chart option by specifying it within the data-chart="{}" attribute in JSON format.
For more features / options visit plugin documentation website:
https://www.chartjs.org/docs/latest/
Line chart
<!-- 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(245,82,102,.35)",
"borderWidth": 2,
"borderColor": "#f55266",
"pointBackgroundColor": "#f55266",
"pointBorderWidth": 8,
"pointBorderColor": "rgba(245,82,102,.35)",
"pointHoverBorderColor": "#f55266",
"pointHoverBorderWidth": 6
},
{
"label": "Dataset 2",
"data": [2, 1, 3, 7, 9, 6, 7.7, 4, 7],
"backgroundColor": "rgba(51,179,107,.35)",
"borderWidth": 2,
"borderColor": "#33b36b",
"pointBackgroundColor": "#33b36b",
"pointBorderWidth": 8,
"pointBorderColor": "rgba(51,179,107,.35)",
"pointHoverBorderColor": "#33b36b",
"pointHoverBorderWidth": 6
},
{
"label": "Dataset 3",
"data": [1, 3, 4, 5, 6, 8, 9, 10, 11],
"backgroundColor": "rgba(47,110,213,.35)",
"borderWidth": 2,
"borderColor": "#2f6ed5",
"pointBackgroundColor": "#2f6ed5",
"pointBorderWidth": 8,
"pointBorderColor": "rgba(47,110,213,.35)",
"pointHoverBorderColor": "#2f6ed5",
"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
<!-- 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": "#2f6ed5",
"backgroundColor": "rgba(47,110,213,.35)",
"hoverBackgroundColor": "rgba(47,110,213,.75)"
},
{
"label": "Dataset 2",
"data": [3500, 5000, 8750, 1300, 3000, 8750],
"borderWidth": 2,
"borderColor": "#fc9231",
"backgroundColor": "rgba(252,146,49,.35)",
"hoverBackgroundColor": "rgba(252,146,49,.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
<!-- 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": [
"#f55266",
"#33b36b",
"#2f6ed5"
],
"hoverBackgroundColor": [
"#f55266",
"#33b36b",
"#2f6ed5"
]
}
]
},
"options": {
"plugins": {
"legend": {
"position": "right",
"labels": {
"usePointStyle": true,
"boxWidth": 12,
"boxHeight": 12,
"useBorderRadius": true,
"borderRadius": 8,
"padding": 20,
"font": {
"size": 15
}
}
}
}
}
}'></canvas>Doughnut chart
<!-- 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": [
"#f55266",
"#33b36b",
"#2f6ed5"
],
"hoverBackgroundColor": [
"#f55266",
"#33b36b",
"#2f6ed5"
]
}
]
},
"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
<!-- Polar area chart: Multiple slices of different color + Legend -->
<canvas data-chart='{
"type": "polarArea",
"data": {
"labels": ["Red", "Green", "Orange", "Grey", "Blue"],
"datasets": [{
"label": "My dataset",
"data": [11, 16, 7, 3, 14],
"borderWidth": 0,
"backgroundColor": [
"#f55266",
"#33b36b",
"#fc9231",
"#cad0d9",
"#2f6ed5"
],
"hoverBackgroundColor": [
"#f55266",
"#33b36b",
"#fc9231",
"#cad0d9",
"#2f6ed5"
]
}]
},
"options": {
"scales": {
"r": {
"ticks": {
"backdropColor": "rgba(255,255,255,0)"
},
"grid": {
"color": "rgba(133,140,151,.18)"
}
}
}
}
}'></canvas>Radar chart
<!-- 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(245,82,102, .15)",
"borderColor": "#f55266",
"pointBackgroundColor": "#f55266",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "#f55266"
},
{
"label": "Dataset 2",
"data": [28, 48, 40, 19, 96, 27, 100],
"fill": true,
"backgroundColor": "rgba(47,110,213, .15)",
"borderColor": "#2f6ed5",
"pointBackgroundColor": "#2f6ed5",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "#2f6ed5"
}
]
},
"options": {
"elements": {
"line": {
"borderWidth": 3
}
},
"scales": {
"r": {
"ticks": {
"backdropColor": "rgba(255,255,255,0)"
},
"grid": {
"color": "rgba(133,140,151,.18)"
}
}
}
}
}'></canvas>