ADD: Bar Chart using ChartJs

dev-shetty · dev-shetty · commit a1da1bb86fc3 · 2023-05-19T15:59:23.000+05:30
diff --git a/Chart/BarChart/index.html b/Chart/BarChart/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Bar Chart</title>
+  </head>
+  <body>
+    <div class="chart">
+      <canvas id="bar-chart" role="img" width="500" aria-label="Bar Chart">
+        <p>Bar Chart</p>
+      </canvas>
+    </div>
+  </body>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="./script.js"></script>
+</html>
diff --git a/Chart/BarChart/script.js b/Chart/BarChart/script.js
@@ -0,0 +1,33 @@
+const barChart = document.getElementById("bar-chart")
+
+new Chart(barChart, {
+  type: "bar",
+  data: {
+    labels: ["JavaScript", "TypeScript", "CSS", "Python", "C", "Java"],
+    datasets: [
+      {
+        label: "Like Rating",
+        data: [7, 8, 10, 7, 5, 2],
+        borderWidth: 1,
+      },
+    ],
+  },
+  options: {
+    scale: {
+      y: {
+        min: 1,
+        max: 10,
+      },
+    },
+    plugins: {
+      legend: {
+        display: false,
+      },
+      title: {
+        display: true,
+        text: "How much do I like these languages?",
+        align: "center",
+      },
+    },
+  },
+})
diff --git a/Chart/BarChart/style.css b/Chart/BarChart/style.css
@@ -0,0 +1,10 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
