DEV Community

Cover image for Dashboard Widget with Tailwind CSS & Chart.js
Rupak Dey
Rupak Dey

Posted on

Dashboard Widget with Tailwind CSS & Chart.js

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>
Enter fullscreen mode Exit fullscreen mode


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>
Enter fullscreen mode Exit fullscreen mode


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>
Enter fullscreen mode Exit fullscreen mode


Output!

This is how it turns out to be.

Output



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!

Discussion (2)

Collapse
sachaw profile image
Info Comment hidden by post author - thread only accessible via permalink
Sacha Weatherstone

What year is this? That looks like JS from the early 2000's

Collapse
marcussa profile image
Info Comment hidden by post author - thread only accessible via permalink
Marcus S. Abildskov

Why would one import an entire chart library just for creating some wavy lines?
You can do this with Tailwind CSS lol.

Some comments have been hidden by the post's author - find out more