Dashboard Widget with Tailwind CSS & Chart.js
Tags: webdev, javascript, uiweekly, productivity
Published: 2021-10-11 06:59:00

_Save for later._
<br/>

Hello. Through this post we'll see how we can make a dashboard widget (in the cover photo) with the help of Tailwind CSS and Chart.js!

Let's directly get into it 🚀
<br/>

#### Step 1: Include the assets
> You may do this either via CDN or NPM. I've used CDN here.
```
<link rel="stylesheet" 
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"  
/>
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css"
/>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js">
</script>
```

#### <br/>Step 2 : Build the interface
> This consists of making the card, placing the text and chart.
```
<div class="min-w-screen min-h-screen bg-gray-200 flex items-center justify-center px-5 py-5">
  <div class="w-full max-w-3xl">
    <div class="-mx-2 md:flex">
      <div class="w-full md:w-1/3 px-2">
        <div class="rounded-lg shadow-sm mb-4">
          <div class="rounded-lg bg-white shadow-lg md:shadow-xl relative overflow:hidden">
            <div class="px-3 pt-8 pb-10 text-center relative z-10">
              <h4 class="text-sm uppercase text-gray-500 leading-tight">
                Followers
              </h4>
              <h3 class="text-3xl text-gray-700 font-semibold leading-tight my-3">
                13,579
              </h3>
              <p class="text-xs text-green-500 leading-tight">
                🔺 40.9%
              </p>
            </div>
            <div class="absolute bottom-0 inset-x-0">
              <canvas id="chart1" height="70"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

#### <br/>Step 3 : Add the chart
> This is the JavaScript we need to generate the chart.
```
<script>
        const chartOptions = {
        maintainAspectRation: false,
        legend: {
          display: false
        },
        tooltips: {
          enable: false
        },
        elements: {
          point: {
            radius: 0
          }
        },
        scales: {
          xAxes: [
            {
              gridLines: false,
              scaleLabel: false,
              ticks: {
                display: false
              }
            }
          ],
          yAxes: [
            {
              gridLines: false,
              scaleLabel: false,
              ticks: {
                display: false,
                suggestedMin: 0,
                suggestedMax: 10
              }
            }
          ]
        }
      };

      var ctx = document.getElementById("chart1").getContext("2d");
      var chart = new Chart(ctx, {
        type: "line",
        data: {
          labels: [1, 2, 1, 3, 5, 4, 7],
          datasets: [
            {
              backgroundColor: "rgba(101, 116, 205, 0.1)",
              borderColor: "rgba(101, 116, 205, 0.8)",
              borderWidth: 2,
              data: [1, 2, 1, 3, 5, 4, 7]
            }
          ]
        },
        options: chartOptions
      });
</script>
```

#### <br/>Output!
> This is how it turns out to be.

![Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/naugbs3bzw2xtd6f49vo.png)

<br/>
Congrats! You've made a dashboard widget successfully. Do modify it according to your style and share it in the comment section below!
🙌🏻
<br/>
Thank you for reading. Please leave a like if you enjoyed the post and follow for upcoming articles!

<br/>P.S. Want the next post to be something specific? Do let me know in the comments.

🤘🏻
<br/>
Connect with me : [Github](https://github.com/deyRupak)
Support me : [Buy me a coffee!](https://paypal.me/deyrdx?locale.x=en_GB)