Chart JS
Simply beautiful open-source charts. For more info click here Bottom link
Line Chart
<canvas id="chartjs_line" width="100" height="50"></canvas>
<script>
/* line chart */
Chart.defaults.borderColor = "rgba(142, 156, 173,0.1)", Chart.defaults.color = "#8c9097";
const labels = [
'January',
'February',
'March',
'April',
'May',
'June',
];
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(132, 90, 223)',
borderColor: 'rgb(132, 90, 223)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
};
const config = {
type: 'line',
data: data,
options: {}
};
const myChart = new Chart(
document.getElementById('chartjs_line'),
config
);
</script>
Bar Chart
<canvas id="chartjs_bar" width="100" height="50"></canvas>
<script>
/* bar chart */
const labels1 = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
];
const data1 = {
labels: labels1,
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: [
'rgba(132, 90, 223, 0.2)',
'rgba(35, 183, 229, 0.2)',
'rgba(245, 184, 73, 0.2)',
'rgba(73, 182, 245, 0.2)',
'rgba(230, 83, 60, 0.2)',
'rgba(38, 191, 148, 0.2)',
'rgba(35, 35, 35, 0.2)'
],
borderColor: [
'rgb(132, 90, 223)',
'rgb(35, 183, 229)',
'rgb(245, 184, 73)',
'rgb(73, 182, 245)',
'rgb(230, 83, 60)',
'rgb(38, 191, 148)',
'rgb(35, 35, 35)'
],
borderWidth: 1
}]
};
const config1 = {
type: 'bar',
data: data1,
options: {
scales: {
y: {
beginAtZero: true
}
}
},
};
const myChart1 = new Chart(
document.getElementById('chartjs_bar'),
config1
);
</script>
Pie Chart
<canvas id="chartjs_pie" width="100" height="50"></canvas>
<script>
/* pie chart */
const data2 = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(132, 90, 223)',
'rgb(35, 183, 229)',
'rgb(245, 184, 73)'
],
hoverOffset: 4
}]
};
const config3 = {
type: 'pie',
data: data2,
};
const myChart2 = new Chart(
document.getElementById('chartjs_pie'),
config3
);
</script>
Doughnut Chart
<canvas id="chartjs_doughnut" width="100" height="50"></canvas>
<script>
/* doughnut chart */
const data3 = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(132, 90, 223)',
'rgb(35, 183, 229)',
'rgb(245, 184, 73)'
],
hoverOffset: 4
}]
};
const config4 = {
type: 'doughnut',
data: data3,
};
const myChart3 = new Chart(
document.getElementById('chartjs_doughnut'),
config4
);
</script>
Mixed Chart
<canvas id="chartjs_mixed" width="100" height="50"></canvas>
<script>
/* mixed chart */
const data4 = {
labels: [
'January',
'February',
'March',
'April'
],
datasets: [{
type: 'bar',
label: 'Bar Dataset',
data: [10, 20, 30, 40],
borderColor: 'rgb(132, 90, 223)',
backgroundColor: 'rgba(132, 90, 223, 0.2)'
}, {
type: 'line',
label: 'Line Dataset',
data: [50, 50, 50, 50],
fill: false,
borderColor: 'rgb(35, 183, 229)'
}]
};
const config5 = {
type: 'scatter',
data: data4,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};
const myChart4 = new Chart(
document.getElementById('chartjs_mixed'),
config5
);
</script>
Polar Chart
<canvas id="chartjs_polar" width="100" height="50"></canvas>
<script>
/* polar area chart */
const data5 = {
labels: [
'Red',
'Green',
'Yellow',
'Grey',
'Blue'
],
datasets: [{
label: 'My First Dataset',
data: [11, 16, 7, 3, 14],
backgroundColor: [
'rgb(132, 90, 223)',
'rgb(75, 192, 192)',
'rgb(245, 184, 73)',
'rgb(201, 203, 207)',
'rgb(35, 183, 229)'
]
}]
};
const config6 = {
type: 'polarArea',
data: data5,
options: {}
};
const myChart5 = new Chart(
document.getElementById('chartjs_polar'),
config6
);
</script>
Radar Chart
<canvas id="chartjs_radar" width="100" height="50"></canvas>
<script>
/* radial chart */
const data6 = {
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running'
],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 90, 81, 56, 55, 40],
fill: true,
backgroundColor: 'rgba(132, 90, 223, 0.2)',
borderColor: 'rgb(132, 90, 223)',
pointBackgroundColor: 'rgb(132, 90, 223)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(132, 90, 223)'
}, {
label: 'My Second Dataset',
data: [28, 48, 40, 19, 96, 27, 100],
fill: true,
backgroundColor: 'rgba(35, 183, 229, 0.2)',
borderColor: 'rgb(35, 183, 229)',
pointBackgroundColor: 'rgb(35, 183, 229)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(35, 183, 229)'
}]
};
const config7 = {
type: 'radar',
data: data6,
options: {
elements: {
line: {
borderWidth: 3
}
}
},
};
const myChart6 = new Chart(
document.getElementById('chartjs_radar'),
config7
);
</script>
Scatter Chart
<canvas id="chartjs_scatter" width="100" height="50"></canvas>
<script>
/* scatter chart */
const data7 = {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}, {
x: 0.5,
y: 5.5
}],
backgroundColor: 'rgb(132, 90, 223)'
}],
};
const config8 = {
type: 'scatter',
data: data7,
options: {
scales: {
x: {
type: 'linear',
position: 'bottom'
}
}
}
};
const myChart7 = new Chart(
document.getElementById('chartjs_scatter'),
config8
);
</script>
Bubble Chart
<canvas id="chartjs_bubble" width="100" height="50"></canvas>
<script>
/* bubble chart */
const data8 = {
datasets: [{
label: 'First Dataset',
data: [{
x: 20,
y: 30,
r: 15
}, {
x: 40,
y: 10,
r: 10
}],
backgroundColor: 'rgb(132, 90, 223)'
}]
};
const config9 = {
type: 'bubble',
data: data8,
options: {}
};
const myChart8 = new Chart(
document.getElementById('chartjs_bubble'),
config9
);
</script>
Stepline
<canvas id="myChart" width="100" height="50"></canvas>
<script>
/* bubble chart */
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>