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.
Chart Types
Here are some of the fundamental chart types:
- Area Chart: Area charts are similar to line charts but with the area between the axis and the line filled. They are useful for showcasing trends while emphasizing the magnitude of change.
- Bar Chart: Bar charts are effective for comparing individual data points across categories. They consist of horizontal or vertical bars, with the length or height proportional to the data they represent.
- Bubble chart: Bubble charts are effective for displaying data points with three values: x-coordinate, y-coordinate, and bubble size. The size of the bubble represents the third dimension.
- Doughnut Chart: Similar to a pie chart but with a hole in the center, allowing for additional information or aesthetics.
- Pie Chart: Pie charts represent data in a circular graph, where each slice represents a percentage of the whole. Ideal for displaying the contribution of each category to the total.
- Line Chart: A line chart is suitable for displaying data points over a continuous interval or time span. It is often used to illustrate trends and patterns.
- Mixed Chart: Mixed charts allow you to combine two or more different chart types within the same chart. This is useful when you want to represent multiple datasets with varying characteristics.
- Polar Area Chart: Polar area charts are similar to pie charts, but the segments are plotted on a circular axis. They are suitable for displaying data in a radial manner.
- Radar chart: Radar charts are used to display multivariate data in the form of a two-dimensional chart with three or more quantitative variables represented on axes.
- Scatter chart: Scatter charts display individual data points on a two-dimensional graph. They are useful for visualizing the distribution and relationship between two variables.
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=
</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=
</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: