🎨 styles: charts

linder3hs · Mar 2, 2024 · 556de46 · 556de46
1 parent dc1ccbf
commit 556de46
Showing 1 changed file with 37 additions and 0 deletions.
diff --git a/semana-5/challenges/bootstrap/index.html b/semana-5/challenges/bootstrap/index.html
@@ -75,6 +75,9 @@
           </table>
         </div>
       </section>
+      <section>
+        <canvas id="myChart"></canvas>
+      </section>
     </main>
     <!-- Modal -->
     <div
@@ -140,10 +143,44 @@ <h2>Editar Producto</h2>
         </div>
       </div>
     </div>
+    <!-- Bootstrap -->
     <script
       src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
       crossorigin="anonymous"
     ></script>
+    <!-- ChartJS -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
+    <script>
+      new Chart(document.getElementById("myChart"), {
+        type: "bar",
+        options: {
+          plugins: {
+            title: {
+              display: true,
+              text: "Ventas de iPhone VS Mac",
+            },
+          },
+        },
+        data: {
+          labels: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio"],
+          datasets: [
+            {
+              label: "Valor de iPhone",
+              data: [1000, 1210, 1080, 2200, 330, 1135],
+              backgroundColor: ["#F8FF5B"],
+              borderWidth: 3,
+              borderRadius: 20,
+              borderColor: "#f01",
+            },
+            {
+              label: "Valor de Mac",
+              data: [2200, 1200, 800, 400, 309, 1035],
+              backgroundColor: ["#39EE65"],
+            },
+          ],
+        },
+      });
+    </script>
   </body>
 </html>