CDN Link
The latest version of Chart.js can be downloaded from GitHub or we can use the Chart.js CDN.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Example 1: This example illustrates the creation of a Radar Chart.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0" /> < script src = "https://cdn.jsdelivr.net/npm/chart.js" > </ script > < title >Chart.js</ title > </ head > < body > < div > < canvas id = "myChart" ></ canvas > </ div > < script > const ctx = document.getElementById("myChart"); new Chart(ctx, { type: "radar", data: { labels: [ "Searching", "Sorting", "Linked Lists", "Trees", "Graphs", "Dynamic Programming", "Hashing", ], datasets: [ { label: "DSA Proficiency", data: [85, 70, 95, 80, 65, 75, 90], fill: true, backgroundColor: "rgba(75, 192, 192, 0.2)", borderColor: "rgb(75, 192, 192)", pointBackgroundColor: "rgb(75, 192, 192)", pointBorderColor: "#fff", pointHoverBackgroundColor: "#fff", pointHoverBorderColor: "rgb(75, 192, 192)", }, { label: "Algorithm Complexity", data: [60, 80, 75, 85, 40, 70, 55], fill: true, backgroundColor: "rgba(255, 99, 132, 0.2)", borderColor: "rgb(255, 99, 132)", pointBackgroundColor: "rgb(255, 99, 132)", pointBorderColor: "#fff", pointHoverBackgroundColor: "#fff", pointHoverBorderColor: "rgb(255, 99, 132)", }, ], }, options: { elements: { line: { borderWidth: 3, }, }, }, }); </ script > </ body > </ html > |
Output:
Example 2: In this example, we are going to create a mixed chart. Here, the Bar chart, Line chart, and Scatter chart are used to display the data.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0" /> < script src = "https://cdn.jsdelivr.net/npm/chart.js" > </ script > < title >DSA Progress Chart</ title > </ head > < body > < div > < canvas id = "myChart" width = "900" height = "400" > </ canvas > </ div > < script > const ctx = document.getElementById("myChart"); new Chart(ctx, { type: "bar", data: { datasets: [ { type: "bar", label: "Array Problems Solved", data: [20, 35, 50, 45], backgroundColor: "rgba(75, 192, 192, 0.2)", borderColor: "rgba(75, 192, 192, 1)", borderWidth: 1, }, { type: "line", label: "Tree Problems Solved", data: [10, 15, 30, 25], fill: false, borderColor: "rgba(255, 99, 132, 1)", borderWidth: 2, }, { type: "scatter", label: "Graph Problems Solved", data: [ { x: "January", y: 15 }, { x: "February", y: 25 }, { x: "March", y: 35 }, { x: "April", y: 45 }, ], backgroundColor: "rgba(255, 205, 86, 0.8)", borderColor: "rgba(255, 205, 86, 1)", borderWidth: 1, }, ], labels: ["January", "February", "March", "April"], }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, }, }, }, }); </ script > </ body > </ html > |
Output:
Chart.js Chart Types
In this article, we will explore some of the key chart types provided by Chart.js, covering their descriptions, syntax, examples, and outputs.
Chart.js offers a diverse set of chart types, each designed to convey specific types of data effectively. It also helps to see the computed data at a glance, in order to analyze & make the required decision accordingly. With this, it enhances overall readability, & the user experience.
Contact Us