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!
Top comments (2)
What year is this? That looks like JS from the early 2000's
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