Hey, what's up! I have made it a habit of writing up tutorials once a week on some things I think some of our users might like! Today, I will be going over some quick dashboard design ideas using flexbox!
This is going to be a really basic rundown with simple examples. I just want you to get going in the right direction when it comes to building dashboards!
Note: You can fork any of the demos below and it will take you into CodePen so you can edit yourself!
Note #2: These charts will just show up in a column if on mobile, since that is the intended responsive layout!
Flexbox Dashboards
There are a few ways to make dashboards with ZingChart. You can use a graphset to make one natively within ZingChart. Or you could use different divs, renders, and CSS flexbox. We are going to use the flexbox method today!
Flexbox is cool and I have been playing around with it on my free time. I didn't like the way normal CSS positioning worked (things like float really sucked). Flexbox has proved to be extremely fun and simple to work with!
I am going to walk you through a few flexbox basics in order to make this dashboard design easier to execute. In order for this to work, we are going to need a few things:
-
A
<div>for each chart (each with a unique id) -
A separate render for each chart
-
A container
<div>
We now have the basis ready to dive into playing around with flexbox. So in order for flexbox to function, the parent element (the commonly used container div shall suffice) needs to be given a display type of flex. Once all of that is executed, your chart should look something like this:
Note: I added in some temporary values for height and width to make it easier to see in the editor.
Parent
Now all of its direct children elements (in this case, all of the divs that hold our charts) will now be flex items. You can now modify the positioning and orientation of them with flexbox. The parent element will dictate this positioning and orientation with a few properties.
Flex-Direction
Flex-direction is the first property we will be working with. There are four options here: Row, row-reverse, column, & column-reverse. If flex-direction isn't specified, it is row by default. Row items will move along the x-axis, and column items will move along the y-axis. The diagram below explains how it all flows.
Justify-Content
Once the flex-direction is set, we can use "justify-content" to move the items around within the parent element along the axis specified by flex-direction. The example below is exhibiting how content moves when "row" is specified. If the flex-direction is column, these changes will happen along the y-axis
We will be using "space-around", which, as shown above, equally distributes items along the specified axis and adds the remaining space available (based on the size of the flex item) between. It gives them a sort of margin around them which is pretty useful if you are playing around with card type items.
Here's what the code should look like now!
#container {
height: 500px;
display: flex;
justify-content: space-around;
}
Flex-Wrap
The last attribute we will talk about when it comes to the parent item is called flex-wrap. There are two properties: "wrap" and "no-wrap". If the parent is given "no-wrap", the items will be scaled down and made to fit on one line no matter how small the screen size is.
If the parent is given "wrap", the the items will be placed along multiple lines to give room for each other when the screen size is changed.
We will give our items a "flex-wrap" of "wrap". This gives us a responsive element to our dashboard when screen sizes change.
So our code should now look like this:
#container {
height: 500px;
display: flex;
justify-content: space-around;
}
Children:
Flex children can also be passed flex attributes. These attributes generally affect their individual sizing, positioning, and responsive properties.
Flex-Basis
In this example, we will be using flex-basis. Flex-basis gives the flex items an initial width. It will play an integral role in the way our dashboard is positioned and wrapped.
This will determine how many items are in each row based on their width in relation to the width of the screen size it is being viewed on and if our items will be wrapped or not.
Flex-basis will affect width is flex-direction is row and will affect height is flex-direction is column
This dashboard example is going to give equal an equal flex-basis of 250px all around (we are going with a pretty basic example). Flex-basis is an easier to use rather than min-width or min-height because it allows for items to be scaled down for responsiveness.
Giving the flex-wrap a wrap property will place as many 250px charts on each line as the screen size allows. Once there is no available room, it starts to stack the charts on top of each other. It's a simple, yet very useful responsive feature.
Here is what our code looks like now:
#container {
height: 500px;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
#myChart {
height: 40%;
flex-basis: 250px;
}
#myChart1 {
height: 40%;
flex-basis: 250px;
}
#myChart2 {
height: 40%;
flex-basis: 250px;;
}
#myChart3 {
height: 40%;
flex-basis: 250px;
}
Here is what your dashboard will look like now:
UI
Cool, we have a dashboard, but don't you want it to look like someone on Dribbble designed this on Photoshop? I have a few cool UI tricks to make your charts go from basic to (mildly) visually appealing. **Note all of these attributes will be placed into the CSS of the element you want to affect.
Font
Font is super important and it gives a much more relaxed feel. It's one of my favorite ways to give a more playful look to my charts or pages. I like Google Fonts because it is super easy to use and it's free. I used 'Muli' in my dashboard.
Google will give you an @import tag to place on the top of your CSS. Boom you can use 'Muli' in your font-family tags! It should look like this:
@import 'https://fonts.googleapis.com/css?family=Muli';
Your element should look like this:
#myChart {
flex-basis: 250px;
height: 40%;
margin: 10px;
font-family: Muli;
}
Box-shadow
Cards are trending right now when it comes to UI and design. I have started to adopt this attribute when I make items within my divs. It just gives a super clean look to the elements it is placed on.
Here's the attribute to place into your divs:
box-shadow: 10px 10px 5px 0 rgba(230,230,230,1);
Your element should now look like this:
#myChart {
flex-basis: 250px;
height: 40%;
margin: 10px;
font-family: Muli;
box-shadow: 10px 10px 5px 0 rgba(230,230,230,1);
}
I copy and paste this same border shadow every time. I like the way it looks so I don't feel a need to change haha.
Border-Radius:
This is also another favorite trick I like to use. I like using a little more smooth font, I don't like offsetting this with rigid corners, so I add border-radius to everything. It gives stuff a rounded relaxing feel to it. Here's the code for that too:
border-radius: 5px;
Your element should now look like this:
#myChart {
flex-basis: 250px;
height: 40%;
margin: 10px;
font-family: Muli;
box-shadow: 10px 10px 5px 0 rgba(230,230,230,1);
border-radius: 5px;
}
Alright, I think I have provided you with at least an idea of how to go about some new-age dashboard design. I have my dashboard format below via CodePen if you want to play around with it a bit!
Here is the final dashboard product below:
Study Materials
If you want some more flexbox materials to study up with, here are a few that have helped me out:
-
The Net Ninja's flexbox series on YouTube
-
Dev Tip's Flexbox series on YouTube
-
Flexboxfroggy (a super fun game on flexbox)
As always, if you have any questions, post a comment below or tweet @zingchart! Or, if you want to check out some of our dashboards, check out or demos gallery!