Dashboard Widget with Tailwind CSS & Chart.js

#webdev #javascript #uiweekly #productivity

Save for later.

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 🚀

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>

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>

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>

Output!

This is how it turns out to be.

Congrats! You've made a dashboard widget successfully. Do modify it according to your style and share it in the comment section below!
🙌🏻

Thank you for reading. Please leave a like if you enjoyed the post and follow for upcoming articles!

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

🤘🏻

Connect with me : Github
Support me : Buy me a coffee!