title: HTML and JavaScriptissue: My chart is so big
body: <p>I'm following a YouTube tutorial and in the video it shows this chart:
  <a href="https://i.stack.imgur.com/ueGUl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ueGUl.png" alt="enter image description here" /></a></p>
  <p>and my chart looks like this:
  <a href="https://i.stack.imgur.com/edu3s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/edu3s.png" alt="enter image description here" /></a></p>
  <p>So how to solve it, as looks like the first picture?</p>
  <p>I wrote the same exact code from the tutorial, so I don't know why I have this problem.</p>
  <p>I tried in HTML playing with height and width to make it much smaller or bigger, for example:</p>
  <pre><code>&lt;canvas id=&quot;myChart&quot; width=&quot;100&quot; height=&quot;100&quot;&gt;&lt;/canvas&gt;
  
  &lt;canvas id=&quot;myChart&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;&lt;/canvas&gt;
  
  &lt;canvas id=&quot;myChart&quot; width=&quot;400&quot; height=&quot;400&quot;&gt;&lt;/canvas&gt;
  </code></pre>
  <p>Even if I changed the width and height, don't change the size</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//MenuToggle
  let toggle = document.querySelector('.toggle');
  let navigation = document.querySelector('.navigation');
  let main = document.querySelector('.main');
  
  toggle.onclick = function() {
    navigation.classList.toggle('active');
    main.classList.toggle('active');
  }
  
  //ad hovered class in selected list item
  let list = document.querySelectorAll('.navigation li');
  
  function activeLink() {
    list.forEach((item) =&gt;
      item.classList.remove('hovered'));
    this.classList.add('hovered');
  }
  list.forEach((item) =&gt;
    item.addEventListener('mouseover', activeLink));
  
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'polarArea',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&amp;display=swap');
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Ubuntu', sans-serif;
  }
  
   :root {
    --blue: #287bff;
    --white: #fff;
    --grey: #f5f5f5;
    --black1: #222;
    --black2: #999;
  }
  
  body {
    min-height: 100vh;
    overflow-x: hidden;
  }
  
  .container {
    position: relative;
    width: 100%;
  }
  
  .navigation {
    position: fixed;
    width: 300px;
    height: 100%;
    background: var(--blue);
    border-left: 10px solid var(--blue);
    transition: 0.5s;
    overflow: hidden;
  }
  
  .navigation.active {
    width: 80px;
  }
  
  .navigation ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  
  .navigation ul li {
    position: relative;
    width: 100%;
    list-style: none;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
  }
  
  .navigation ul li:hover,
  .navigation ul li.hovered {
    background: var(--white);
  }
  
  .navigation ul li:nth-child(1) {
    margin-bottom: 40px;
    pointer-events: none;
  }
  
  .navigation ul li a {
    position: relative;
    display: block;
    width: 100%;
    display: flex;
    text-decoration: none;
    color: var(--white);
  }
  
  .navigation ul li:hover a,
  .navigation ul li.hovered a {
    color: var(--blue);
  }
  
  .navigation ul li a .icon {
    position: relative;
    display: block;
    min-width: 60px;
    height: 60px;
    line-height: 70px;
    text-align: center;
  }
  
  .navigation ul li a .icon ion-icon {
    font-size: 1.75em;
  }
  
  .navigation ul li a .title {
    position: relative;
    display: block;
    padding: 0 10px;
    height: 60px;
    line-height: 60px;
    text-align: start;
    white-space: nowrap;
  }
  
  
  /*curve outs*/
  
  .navigation ul li:hover a::before,
  .navigation ul li.hovered a::before {
    content: '';
    position: absolute;
    right: 0;
    top: -50px;
    width: 50px;
    height: 50px;
    background: transparent;
    border-radius: 50%;
    box-shadow: 35px 35px 0 10px var(--white);
    pointer-events: none;
  }
  
  .navigation ul li:hover a::after,
  .navigation ul li.hovered a::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -50px;
    width: 50px;
    height: 50px;
    background: transparent;
    border-radius: 50%;
    box-shadow: 35px -35px 0 10px var(--white);
    pointer-events: none;
  }
  
  
  /* main */
  
  .main {
    position: absolute;
    width: calc(100% - 300px);
    left: 300px;
    min-height: 100vh;
    background: var(--white);
    transition: 0.5s;
  }
  
  .main.active {
    width: calc(100% - 80px);
    left: 80px;
  }
  
  .topbar {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
  }
  
  .toggle {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5em;
    cursor: pointer;
  }
  
  .search {
    position: relative;
    width: 400px;
    margin: 0 10px;
  }
  
  .search label {
    position: relative;
    width: 100%;
  }
  
  .search label input {
    width: 100%;
    height: 40px;
    border-radius: 40px;
    padding: 5px 20px;
    padding-left: 35px;
    font-size: 18px;
    outline: none;
    border: 1px solid var(--black2);
  }
  
  .search label ion-icon {
    position: absolute;
    top: 0;
    left: 10px;
    font-size: 1.2em;
  }
  
  .user {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
  }
  
  .user img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .cardBox {
    position: relative;
    width: 100%;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
  }
  
  .cardBox .card {
    position: relative;
    background: var(--white);
    padding: 30px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
  }
  
  .cardBox .card .numbers {
    position: relative;
    font-weight: 500;
    font-size: 2.5em;
    color: var(--blue);
  }
  
  .cardBox .card .cardName {
    color: var(--black2);
    font-size: 1.1em;
    margin-top: 5px;
  }
  
  .cardBox .card .iconBx {
    font-size: 3.5em;
    color: var(--black2);
  }
  
  .cardBox .card:hover {
    background: var(--blue);
  }
  
  .cardBox .card:hover .numbers,
  .cardBox .card:hover .cardName,
  .cardBox .card:hover .iconBx {
    color: var(--white);
  }
  
  
  /* charts */
  
  .grapghBox {
    position: relative;
    width: 100%;
    padding: 20px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 30px;
    min-height: 200px;
  }
  
  .grapghBox .box {
    position: relative;
    background: #fff;
    padding: 20px;
    width: 100%;
    box-shadow: 0 7px 25px rgb(0, 0, 0, 0.08);
    border-radius: 20px;
  }
  
  .details {
    position: relative;
    width: 100%;
    padding: 20px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 30px;
    /*margin-top: 10px;*/
  }
  
  .details .recentOrders {
    position: relative;
    display: grid;
    min-height: 500px;
    background: var(--white);
    padding: 20px;
    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
    border-radius: 20px;
  }
  
  .cardHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .cardHeader h2 {
    font-weight: 600;
    color: var(--blue);
  }
  
  .btn {
    position: relative;
    padding: 5px 10px;
    background: var(--blue);
    text-decoration: none;
    color: var(--white);
    border-radius: 6px;
  }
  
  .details table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
  }
  
  .details table thead td {
    font-weight: 600;
  }
  
  .details .recentOrders table tr {
    color: var(--black1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .details .recentOrders table tr:last-child {
    border-bottom: none;
  }
  
  .details .recentOrders table tbody tr:hover {
    background: var(--blue);
    color: var(--white);
  }
  
  .details .recentOrders table tr td {
    padding: 10px;
  }
  
  .details .recentOrders table tr td:last-child {
    text-align: end;
  }
  
  .details .recentOrders table tr td:nth-child(2) {
    text-align: end;
  }
  
  .details .recentOrders table tr td:nth-child(3) {
    text-align: center;
  }
  
  .status.delivered {
    padding: 2px 4px;
    background: #8de02c;
    color: var(--white);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
  }
  
  .status.pending {
    padding: 2px 4px;
    background: #e0bf2c;
    color: var(--white);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
  }
  
  .status.return {
    padding: 2px 4px;
    background: #e02c2c;
    color: var(--white);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
  }
  
  .status.return {
    padding: 2px 4px;
    background: #e02c2c;
    color: var(--white);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
  }
  
  .status.inprogress {
    padding: 2px 4px;
    background: #2c8fe0;
    color: var(--white);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
  }
  
  .recentCustomers {
    position: relative;
    display: grid;
    min-height: 500px;
    padding: 20px;
    background: var(--white);
    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
    border-radius: 20px;
  }
  
  .recentCustomers .imgBx {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
  }
  
  .recentCustomers .imgBx img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .recentCustomers table tr td {
    padding: 12px 10px;
  }
  
  .recentCustomers table tr td h4 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2em;
  }
  
  .recentCustomers table tr td h4 span {
    font-size: 14px;
    color: var(--black2);
  }
  
  .recentCustomers table tr:hover {
    background: var(--blue);
    color: var(--white);
  }
  
  .recentCustomers table tr:hover td h4 span {
    color: var(--white);
  }
  
  
  /* responsive design */
  
  @media (max-width: 991px) {
    .grapghBox {
      grid-template-columns: 1fr;
      height: auto;
    }
    .navigation {
      left: -300px;
    }
    .navigation.active {
      width: 300px;
      left: 0;
    }
    .main {
      width: 100%;
      left: 0;
    }
    .main.active {
      left: 300px;
    }
    .cardBox {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 768px) {
    .details {
      grid-template-columns: repeat(1, 1fr);
    }
    .recentOrders {
      overflow-x: auto;
    }
    .status.inprogress {
      white-space: nowrap;
    }
  }
  
  @media (max-width: 480px) {
    .cardBox {
      grid-template-columns: repeat(1, 1fr);
    }
    .cardHeader h2 {
      font-size: 20px;
    }
    .user {
      min-width: 40px;
    }
    .navigation {
      width: 100%;
      left: -100%;
      z-index: 1000;
    }
    .navigation.active {
      width: 100%;
      left: 0;
    }
    .toggle {
      z-index: 10001;
    }
    .main.active .toggle {
      position: fixed;
      right: 0;
      left: initial;
      color: #fff;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Responsive Admin Dashboard | Redesign&lt;/title&gt;
  &lt;div class="container"&gt;
    &lt;div class="navigation"&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            &lt;span class="icon"&gt;&lt;ion-icon name="logo-apple"&gt;&lt;/ion-icon&gt;&lt;/span&gt;
            &lt;span class="title"&gt;Brand Name&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            &lt;span class="icon"&gt;&lt;ion-icon name="home-outline"&gt;&lt;/ion-icon&gt;&lt;/span&gt;
            &lt;span class="title"&gt;Dashboard&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            &lt;span class="icon"&gt;&lt;ion-icon name="person-outline"&gt;&lt;/ion-icon&gt;&lt;/span&gt;
            &lt;span class="title"&gt;Customers&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            &lt;span class="icon"&gt;&lt;ion-icon name="chatbubble-outline"&gt;&lt;/ion-icon&gt;&lt;/span&gt;
            &lt;span class="title"&gt;Message&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            &lt;span class="icon"&gt;&lt;ion-icon name="help-outline"&gt;&lt;/ion-icon&gt;&lt;/span&gt;
            &lt;span class="title"&gt;Help&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            &lt;span class="icon"&gt;&lt;ion-icon name="settings-outline"&gt;&lt;/ion-icon&gt;&lt;/span&gt;
            &lt;span class="title"&gt;Setting&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            &lt;span class="icon"&gt;&lt;ion-icon name="lock-closed-outline"&gt;&lt;/ion-icon&gt;&lt;/span&gt;
            &lt;span class="title"&gt;Password&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            &lt;span class="icon"&gt;&lt;ion-icon name="log-out-outline"&gt;&lt;/ion-icon&gt;&lt;/span&gt;
            &lt;span class="title"&gt;Sign Out&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;!-- main--&gt;
    &lt;div class="main"&gt;
      &lt;div class="topbar"&gt;
        &lt;div class="toggle"&gt;
          &lt;ion-icon name="menu-outline"&gt;&lt;/ion-icon&gt;
        &lt;/div&gt;
        &lt;!-- search --&gt;
        &lt;div class="search"&gt;
          &lt;label&gt;
                              &lt;input type="text" placeholder="Search here"&gt;
                              &lt;ion-icon name="search-outline"&gt;&lt;/ion-icon&gt;
                          &lt;/label&gt;
        &lt;/div&gt;
        &lt;!-- userImg --&gt;
        &lt;div class="user"&gt;
          &lt;img src="user.jpg" alt=""&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!--cards--&gt;
      &lt;div class="cardBox"&gt;
        &lt;div class="card"&gt;
          &lt;div&gt;
            &lt;div class="numbers"&gt;1,504&lt;/div&gt;
            &lt;div class="cardName"&gt;Daily Views&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="iconBx"&gt;
            &lt;ion-icon name="eye-outline"&gt;&lt;/ion-icon&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="card"&gt;
          &lt;div&gt;
            &lt;div class="numbers"&gt;80&lt;/div&gt;
            &lt;div class="cardName"&gt;Sales&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="iconBx"&gt;
            &lt;ion-icon name="cart-outline"&gt;&lt;/ion-icon&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="card"&gt;
          &lt;div&gt;
            &lt;div class="numbers"&gt;284&lt;/div&gt;
            &lt;div class="cardName"&gt;Comments&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="iconBx"&gt;
            &lt;ion-icon name="chatbubbles-outline"&gt;&lt;/ion-icon&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="card"&gt;
          &lt;div&gt;
            &lt;div class="numbers"&gt;$7,842&lt;/div&gt;
            &lt;div class="cardName"&gt;Earnings&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="iconBx"&gt;
            &lt;ion-icon name="cash-outline"&gt;&lt;/ion-icon&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;!--Add charts--&gt;
      &lt;div class="grapghBox"&gt;
        &lt;div class="box"&gt;
          &lt;canvas id="myChart"&gt;&lt;/canvas&gt;
  
        &lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="details"&gt;
        &lt;!-- order details list --&gt;
        &lt;div class="recentOrders"&gt;
          &lt;div class="cardHeader"&gt;
            &lt;h2&gt;Recent Orders&lt;/h2&gt;
            &lt;a href="#" class="btn"&gt;View All&lt;/a&gt;
          &lt;/div&gt;
          &lt;table&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;td&gt;Name&lt;/td&gt;
                &lt;td&gt;Price&lt;/td&gt;
                &lt;td&gt;Payment&lt;/td&gt;
                &lt;td&gt;Status&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;Star Refrigerator&lt;/td&gt;
                &lt;td&gt;$1200&lt;/td&gt;
                &lt;td&gt;Paid&lt;/td&gt;
                &lt;td&gt;&lt;span class="status delivered"&gt;Delivered&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Windows Coolers&lt;/td&gt;
                &lt;td&gt;$110&lt;/td&gt;
                &lt;td&gt;Due&lt;/td&gt;
                &lt;td&gt;&lt;span class="status pending"&gt;Pending&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Speakers&lt;/td&gt;
                &lt;td&gt;$620&lt;/td&gt;
                &lt;td&gt;Paid&lt;/td&gt;
                &lt;td&gt;&lt;span class="status return"&gt;Return&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Hp Laptop&lt;/td&gt;
                &lt;td&gt;$110&lt;/td&gt;
                &lt;td&gt;Due&lt;/td&gt;
                &lt;td&gt;&lt;span class="status inprogress"&gt;In Progress&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Apple Watch&lt;/td&gt;
                &lt;td&gt;$1200&lt;/td&gt;
                &lt;td&gt;Paid&lt;/td&gt;
                &lt;td&gt;&lt;span class="status delivered"&gt;Delivered&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Wall Fan&lt;/td&gt;
                &lt;td&gt;$110&lt;/td&gt;
                &lt;td&gt;Paid&lt;/td&gt;
                &lt;td&gt;&lt;span class="status pending"&gt;Pending&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Adidas Shoes&lt;/td&gt;
                &lt;td&gt;$620&lt;/td&gt;
                &lt;td&gt;Paid&lt;/td&gt;
                &lt;td&gt;&lt;span class="status return"&gt;Return&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Denim Shirts&lt;/td&gt;
                &lt;td&gt;$110&lt;/td&gt;
                &lt;td&gt;Due&lt;/td&gt;
                &lt;td&gt;&lt;span class="status inprogress"&gt;In Progress&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Casual Shoes&lt;/td&gt;
                &lt;td&gt;$575&lt;/td&gt;
                &lt;td&gt;Paid&lt;/td&gt;
                &lt;td&gt;&lt;span class="status pending"&gt;Pending&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Wall Fan&lt;/td&gt;
                &lt;td&gt;$110&lt;/td&gt;
                &lt;td&gt;Paid&lt;/td&gt;
                &lt;td&gt;&lt;span class="status pending"&gt;Pending&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Denim Shirts&lt;/td&gt;
                &lt;td&gt;$110&lt;/td&gt;
                &lt;td&gt;Due&lt;/td&gt;
                &lt;td&gt;&lt;span class="status inprogress"&gt;In Progress&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
  
        &lt;!-- New Customer --&gt;
        &lt;div class="recentCustomers"&gt;
          &lt;div class="cardHeader"&gt;
            &lt;h2&gt;Recent Customers&lt;/h2&gt;
          &lt;/div&gt;
          &lt;table&gt;
            &lt;tr&gt;
              &lt;td width="60px"&gt;
                &lt;div class="imgBx"&gt;&lt;img src="img1.jpg" alt=""&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;h4&gt;David&lt;br&gt;&lt;span&gt;Italy&lt;/span&gt;&lt;/h4&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td width="60px"&gt;
                &lt;div class="imgBx"&gt;&lt;img src="img2.jpg" alt=""&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;h4&gt;Muhammad&lt;br&gt;&lt;span&gt;India&lt;/span&gt;&lt;/h4&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td width="60px"&gt;
                &lt;div class="imgBx"&gt;&lt;img src="img3.jpg" alt=""&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;h4&gt;Amelia&lt;br&gt;&lt;span&gt;France&lt;/span&gt;&lt;/h4&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td width="60px"&gt;
                &lt;div class="imgBx"&gt;&lt;img src="img4.jpg" alt=""&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;h4&gt;Olivia&lt;br&gt;&lt;span&gt;Usa&lt;/span&gt;&lt;/h4&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td width="60px"&gt;
                &lt;div class="imgBx"&gt;&lt;img src="img5.jpg" alt=""&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;h4&gt;Amit&lt;br&gt;&lt;span&gt;Japan&lt;/span&gt;&lt;/h4&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td width="60px"&gt;
                &lt;div class="imgBx"&gt;&lt;img src="img6.jpg" alt=""&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;h4&gt;Ashraf&lt;br&gt;&lt;span&gt;India&lt;/span&gt;&lt;/h4&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td width="60px"&gt;
                &lt;div class="imgBx"&gt;&lt;img src="img7.jpg" alt=""&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;h4&gt;Diana&lt;br&gt;&lt;span&gt;Malasia&lt;/span&gt;&lt;/h4&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td width="60px"&gt;
                &lt;div class="imgBx"&gt;&lt;img src="img8.jpg" alt=""&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;h4&gt;Amit&lt;br&gt;&lt;span&gt;India&lt;/span&gt;&lt;/h4&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
  
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"&gt;&lt;/script&gt;
  &lt;script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.min.js"&gt;&lt;/script&gt;
  &lt;script src="my_chart.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>