diff --git a/index.html b/index.html
new file mode 100644
index 00000000000..d895df4b9cb
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+<script src="https://npmcdn.com/chart.js@latest/dist/chart.umd.js"></script>
+<div class="myChartDiv">
+  <canvas id="myChart" width="600" height="400"></canvas>
+</div>
+
+<script src="js.js"></script>
+<!-- css -->
+<style>
+    .myChartDiv {
+  max-width: 600px;
+  max-height: 400px;
+}
+</style>
\ No newline at end of file
diff --git a/js.js b/js.js
new file mode 100644
index 00000000000..a2ee149d08d
--- /dev/null
+++ b/js.js
@@ -0,0 +1,43 @@
+var ctx = document.getElementById("myChart");
+var myChart = new Chart(ctx, {
+  type: "doughnut",
+  data: {
+    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+    datasets: [
+      {
+        label: "# of Votes",
+        data: [12, 19, 3, 5, 2, 3]
+      }
+    ]
+  },
+  options: {
+    plugins: {
+      legend: {
+        position: 'right',
+        labels: {
+          textAlign: 'right',
+        },
+        // rtl: true,
+      }
+    }
+  },
+  plugins: [
+    {
+      id: "legend-hit-box",
+      afterDraw(chart) {
+        const ctx = chart.ctx;
+        ctx.save();
+        ctx.strokeStyle = "green";
+        ctx.lineWidth = 1;
+
+        const legend = chart.legend;
+        legend.legendHitBoxes.forEach((box) => {
+
+          ctx.strokeRect(box.left, box.top, 100, box.height);//i changed the box.width to 100
+        });
+
+        ctx.restore();
+      }
+    }
+  ]
+});