I have left the creation of charts as a last task as I was confident I will be able to complete it decently fast while making the charts effective and attractive in my dashboard. The target with these charts will be to create some differentiation from all the other colours used and shapes, this will make the charts stand out more from the rest of my dashboard
To create the charts, I have played around with figma chart plugins such as chartline and NB Charts although they did not offer the result I was looking to achieve, therefore I began to research online for free chart makers and came across ‘Rapid Tables’.
Rapid tables offers free service with great results which allow the user to even download the file in svg format which then later can be edited in figma.
Line Graph Maker | Create a line chart
This chart will showcase my weekly phone usage data. I have chosen to use a bar chart as it in my opinion it will show my data percisely and will make it easy to read throughout the entire week, as a certain day could be compared to the rest of the week while glancing at other days.
These are the accurate sizes of the charts that I have transferred into figma from the svg file from Rapid tables. Although they are to small to be left like that therefore I will stretch them up so they fit perfectly into my background card.
After designing and editing the original charts, adding a gradient was my main target as it would make the chart different from the rest of the dashboard and stand out. I have also added buttons called ‘’Day’’ and ‘’Weekly’’, as for the interactivity side of the dashboard, a user will be able to click on either one of those and be exposed to the selected data.
For the labels I had mixed feelings whether I want to show the hours spent inside the data bars or outside of it, as both of them look interesting and attractive. Although for accessibility I have selected the second option, labels at the top as it is easier to see it and the user does not have to bend their head to read the information.
The designs for ‘’Day’’ cards are meant to be simplified as they show a singular set of data or information, therefore I simplified my designs to make them easy to read and effective.
