Chart.js
Chart.js
Simple yet flexible JavaScript charting library for the modern web
We used some 3rd party plugins while developing the Qoduby template. We have customized these plugins according to our template. You can view examples of this plugin below.
You can find the original documentation of this plugin in the info card above.
Bar Chart
var chrt = document.getElementById("chart1").getContext("2d");
var chart1 = new Chart(chrt, {
type: 'bar',
data: {
labels: ["React", "Vue", "Next", "Angular", "jQuery", "Svelte"],
datasets: [{
label: "Top JS Frameworks",
data: [20, 40, 30, 35, 30, 20],
backgroundColor: ['#5151F9', '#11B981', '#0EA5E9', '#FFBB2A', '#E11D48', '#6C757D'],
borderColor: ['#5151F9', '#11B981', '#0EA5E9', '#FFBB2A', '#E11D48', '#6C757D'],
borderWidth: 1,
}],
},
options: {
responsive: false,
},
});
<canvas id="chart1" class="height-300"></canvas>
Line Chart
var chrt = document.getElementById("chart2").getContext("2d");
var chart2 = new Chart(chrt, {
type: 'line',
data: {
labels: ["React", "Vue", "Next", "Angular", "jQuery", "Svelte"],
datasets: [{
label: "Top JS Frameworks",
data: [20, 40, 30, 35, 30, 20],
backgroundColor: ['#5151F9', '#11B981', '#0EA5E9', '#FFBB2A', '#E11D48', '#6C757D'],
borderWidth: 2,
pointRadius: 5,
}],
},
options: {
responsive: false,
},
});
<canvas id="chart2" class="height-300"></canvas>
Pie Chart
var chrt = document.getElementById("chart3").getContext("2d");
var chart3 = new Chart(chrt, {
type: 'pie',
data: {
labels: ["React", "Vue", "Next", "Angular", "jQuery", "Svelte"],
datasets: [{
label: "Top JS Frameworks",
data: [20, 40, 30, 35, 30, 20],
backgroundColor: ['#5151F9', '#11B981', '#0EA5E9', '#FFBB2A', '#E11D48', '#6C757D'],
hoverOffset: 5
}],
},
options: {
responsive: false,
},
});
<canvas id="chart3" class="height-300"></canvas>