Show Sidebar Hide Sidebar

Make a Bar Graph

A Step by Step Guide to Making a Bar Graph

Make a Bar Graph

LA Zoo vs SF Zoo

Step 1A: Set up the grid (two traces)

If you’re trying to make a bar chart like the one above, which compares two different sets of numbers in the same categories, you have options getting started. The first option is to arrange these two data sets into two different columns.

This is one way you could set up Plotly’s grid to make the graph above (You can copy data from here). Zoo data for bar chart
Select Bar chart from the MAKE A PLOT menu. Choose an option from the MAKE A PLOT menu
Click the blue plot button in the sidebar to create the chart. (Need more help with the grid? Check out our tutorial “How to Enter Data in the Grid” ) Add data to Plotly Grid

Step 1b: Set-up the grid (Group by)

Your second option is to have a column of variables identifying which dataset each row belongs to, and then “grouping by” this column.

This is another way you could Plotly’s grid to make the graph above (You can copy data from here ). Alternative graphing option
Select Bar chart from the MAKE A PLOT menu. Select bar chart from MAKE A PLOT menu
Select Group by from the OPTIONS in the sidebar, and select choose as G from the Zoo column. Select Group By from the Options menu Choose G from Zoo column
Click the blue plot button in the sidebar to create the chart. (For more help with the grid see: Add data to the Plotly Grid ) Add data to Plotly Grid

Step 2: Setting the Traces

Your plot should look something like this. The first step to styling it into the horizontal bar graph above is to open the TRACES popover in the toolbar. Vertical bar chart Traces popover
Select All Traces (bar) from the drop down menu. Click on Flip bars & Axis config to make your bar chart horizontal. All traces in drop down menu Flip Bars and Axis config
(Alternative: if you want to stack or overlay your bars, instead of grouping them, just change the Mode setting.) Style menu Mode setting Stacked  bar chart online

Step 3: Style it!

Now your plot should look something like this: a grouped horizontal bar chart. We still have some styling to do to get the plot at the top of this tutorial! Open TRACES again. Grouped horizontal bar chart
This is how the Style tab of the TRACES popover on LA Zoo should look. We’ve altered every option in this panel: Opacity, Bar Gap, Group Gap, Fill, and Border. Style tab of Traces popover LA Zoo
This is how the Style tab of the TRACES popover on SF Zoo should look. These are the same as for LA Zoo, but fill and border are different colors. Style tab of Traces popover SF Zoo
This is how the LAYOUT popover should look. We’re changing the font throughout the plot. We’re also giving the plot a grey background, and nudging the margins. Change the background color in the layout menu. Layout popover Margins
This is how the AXES popover should look. We’re giving the plot thicker white gridlines. Change the style of grid lines in the axes popover.
This is how the LEGEND popover should look, we’re giving it a grey background, and moving the position. Style the legent using the Legend menu
Your finished chart should look something like this. Finished bar chart
Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to our Premium or Enterprise plans.