In essence, a grouped bar chart is a group of charts displayed side by side. In this blog, we will make a grouped bar chart that displays the sales figures for three categories across three fictional retailers.
Copy and paste the data
We will use the following fictional data:
Store,Category,Sales
Perfect Plaza,Electronics,2000
Perfect Plaza,Clothing,1500
Perfect Plaza,Home Goods,1200
Cozy Corner,Electronics,1800
Cozy Corner,Clothing,1600
Cozy Corner,Home Goods,1000
Sunny Spot,Electronics,1700
Sunny Spot,Clothing,1200
Sunny Spot,Home Goods,800
- Copy the data above to your clipboard
- Go to the DataPicta app
- Click the dots in the upper right corner and choose New blank chart
- Now click the icon that says Upload data
- In the dialog, paste the data from your clipboard into the textarea.
- Set the name of this data to Sales data
- Click Parse
Create the grouped bar chart
- Click Add a Mark and choose Bar
- In the newly opened panel, choose Bar Y for Type
- For X axis choose Category
- For Y axis choose Sales
- For X facet choose Store
Using X facet, we produce several charts side by side; by choosing Store, we specify that each facet should be for a distinct store.
Adding color
- With the bar panel still open, we choose Category for Fill color
Each category now has a fixed color. Similar to the x- and the y-axis, the color is a scale of the chart; the color indicates the category. We can manipulate the colors by adding the color scale.
- Close the Bar panel
- Click the icon to Add a Scale
- Choose the Color scale
- In the new panel change the color scheme to Dark2
- Click Legend
Beautification
Let's do some cleanup. First we will remove the category names underneath the bars, they are no longer needed now that we have a legend.
- Close the Color scale panel
- Add the X axis scale
- For Location choose Hide
- Close this panel and add the X facet panel
Every scale has some unique settings and settings that are available to all scales. The shared settings are underneath the Common tab. Let's delete the label of this scale.
- Click the Common tab
- For Label choose No label
Finally, to improve the chart's readability, we add some grid lines and change the padding of the bars
- Add the Y axis scale
- Click show grid
- Go back to the X facet scale
- For Padding inner type 0.2
- Go back to the X axis scale
- For Padding inner type 0.2