Datapicta logo
© 2025 DataPicta
A fruity horizontal bar chart

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