Design Interview Question to create 3D Bar Chart for Your Data App.
When you work on Data Driven App, You may need to display data in form of Bar charts, Area Charts and Pie Charts. You can easily use different resources or library to which you supply the data and it will render the Charts for you.
But, sometimes you need to display charts using 3D effect and designing 3D Charts could be difficult.
In this article, we will go over step by step guide to create 3D Bar chart. This is hassle free and quicker way to create 3D Chart. So stay tune.
We will use tailwind css in our implementation but you can convert it into SASS, CSS3 or Bootstrap very easily. Using Tailwind CSS shows your knowledge and preference to modern cutting edge Technology.
Lets Start with Step 1: You need to create basic HTML Page Layout on which we will be displaying Bar Chart
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bar Chart</title>
</head>
<body>
<!--Header-->
<header></header>
<!--Main Article-->
<main>
<!--Post Section -->
<section>
<!--Bar Chart Container-->
<div></div>
</section>
<!--Left SideBar-->
<aside></aside>
</main>
<!--Footer-->
<footer></footer>
</body>
</html>
Check Out our Video Tutorial on 3D Bar Chart!
Step 2: Now, we need to resource in Tailwind CSS to use its classes.
For that, you can checkout Tailwind CSS website. There are different options for sourcing in Tailwind CSS for your Nextjs App, React App, Vuejs App. But as we are using HTML, you can click Play CDN and copy the script source code!
<script src="https://cdn.tailwindcss.com"></script>
Here is the HTML Page with CSS Source In. We have used basic background and height and width to make Page Layout nicer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bar Chart</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!--Header-->
<header class="bg-gray-200 w-full h-[100px]"></header>
<!--Main Article-->
<main class="w-full flex">
<!--Post Section -->
<section class="w-5/6 h-full">
<!--Bar Chart Container-->
<div></div>
</section>
<!--Left SideBar-->
<aside class="h-full"></aside>
</main>
<!--Footer-->
<footer></footer>
</body>
</html>Step 3: We will update chart container styling
We are basically adding height and width to make sure the area of Chart Grid. When you working with flex or grid layout you might not need specify height, width and can use percentile to display the area.
<!--Bar Chart Container-->
<div class="relative w-[800px] h-[500px] left-[100px]"></div>
Step 4: Now we will add one simple Bar chart.
Before you create 3D effect, you need to create basic bar chart. All you do is provide background color in which you want to display your bar chart, height and width.
As we are only working through design in this article we need to specify height. But in Actual Data App, height will be coming through data percentage.
Checkout the Code here:
<div class="relative w-[800px] h-[500px] left-[100px]">
<span class="bg-green-500 w-[40px] h-1/3 absolute bottom-0></span>
</div>
Step 5: Add 3D effect using before, after attributes.
You need to add empty content, then provide height, width and background. That way it will have three sides.
<div class="relative w-[800px] h-[500px] left-[100px]">
<span class="bg-green-500 w-[40px] h-1/3 absolute bottom-0 before:content-[''] before:bg-green-900 before:w-[15px] before:h-full before:absolute</span>
</div>So we are basically adding same css which we have added for chart but using before attribute .
Now we need to add similar css for after attribute
<div class="relative w-[800px] h-[500px] left-[100px]">
<span class="bg-green-500 w-[40px] h-1/3 absolute bottom-0 before:content- [''] before:bg-green-900 before:w-[15px] before:h-full before:absolute after:content-[''] after:bg-green-900 after:w-[40px] after:h-[15px] after:absolute"></span>
</div>Step 6: Use Skew CSS function for before, after attribute to finalize 3D effect.
<div class="relative w-[800px] h-[500px] left-[100px]">
<span class="bg-green-500 w-[40px] h-1/3 absolute bottom-0 before:content-[''] before:bg-green-900 before:w-[15px] before:h-full before:absolute before:skew-y-[45deg] after:content-[''] after:bg-green-900 after:absolute after:w-[40px] after:h-[15px] after:skew-x-[45deg]"></span>
</div>Step 7: Now you can adjust the 3D position using negative left and top margins
<div class="relative w-[800px] h-[500px] left-[100px]">
<span class="bg-green-500 w-[40px] h-1/3 absolute bottom-0 before:content-[''] before:bg-green-900 before:w-[15px] before:h-full before:absolute before:skew-y-[45deg] before:-left-[15px] before:-top-[8px] after:content-[''] after:bg-green-900 after:absolute after:w-[40px] after:h-[15px] after:skew-x-[45deg] after:-left-[8px] after:-top-[15px]"></span>
</div>You can check out the Layout now!
The Layout will look like this.You can easily change styling by adjusting background color, height, width, Skew degree and alignment.
Leave a Reply