Would you like to know which fruit is produced the most? We will create a chart based on the following data:
Fruit,Production (in Million Metric Tons)
Tomatoes,182.3
Bananas,115.74
Watermelons,103.97
Apples,86.14
Grapes,79.19
Oranges,75.54
Mangoes and Guavas,55.38
Plantains,39.48
"Tangerines, Mandarins and Clementines",34.39
Pineapples,27.92
- 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.
- Name this dataset Fruit data
- Click Parse
Create the bars
A chart needs at least one mark, and for a bar chart that should be the bar mark.
- Click Add a Mark
- Choose Bar
A new panel shows up, and we configure the bars there. This will be a horizontal bar chart, with the fruits on the horizontal axis and the production in millions of metric tons on the vertical axis.
- For type choose Bar Y
- For X axis choose Fruit
- For Y axis choose Production
Sort the bars
Lets arrange the fruits by production; that means tomatoes to the left and pineapples to the right.
- Click on the style tab
- Under sort set sort to X axis and sort by to Y axis
- Reverse the order by clicking the arrow
Color the bars
Here is where our creativity comes into play; we look for hues that symbolize the fruits.
Under Fill you can pick the first color. That is the color that will symbolize the tomatoes. After that, you can pick the second color. Please continue picking colors for all ten fruits. Does your chart look like this one? Or are your color skills even better? 😇
Remove the X-axis
The colors are great, but the fruit names are not so shiny. Let's get rid of the current names for now so we can make something better later on.
- Click Add a Scale and choose the X axis
- For Location choose Hide
We will also add some grid lines for the y-axis
- Click Add a Scale and choose the Y axis
- Click Show grid
Add the fruit names
Besides the bar mark, we can add more marks to the chart. We will add the text mark and position the fruit names inside the bars.
- Click Add a mark and choose Text
The text panel appears
- For X axis choose Fruit
- For Text choose Fruit
The fruit names appear in the chart; but they need some styling.
- Click on the style tab
- Rotate the text 270 degrees
- Set the Font size to about 40 pixels
- For Font variant choose Small-caps
- For Font weight choose 600
- For Frame anchor choose bottom
- For Text anchor choose start
- For Line anchor choose middle
- For Fill choose Black
- For Fill opacity choose 50 percent
- And for Vertical offset choose -10