Horizontal bar chart

You might want to use a horizontal bar chart when you're presenting a long list of results that would become crowded if displayed vertically. To accommodate especially long lists, combine this technique with the ability to change the chart height.

The example below uses a horizontal bar chart to display health data for Utah counties.

View Mode Analysis

Click Powered by Mode to duplicate this report and make your own horizontal bar chart. Learn more about using HTML to customize your reports.

Create a horizontal bar chart

Add the stylesheet link and script tag to the top of the HTML:

<link rel="stylesheet" href="https://mode.github.io/alamode/alamode.min.css">
<script src="https://mode.github.io/alamode/alamode.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.js'></script>

Add the customizable snippet at the bottom of the HTML:

<script>

alamode.horizontalBarChart(
  {
	chart_height: 500,
	chart_width: 450,
	title: "Utah Smoker and Drinker Rates by County",
	query_name: "Query 1",
	bar_column: "county",
	series_columns: ["smoker_rate","excessive_drinker_rate"],
	colors: ["#6AB328","#43A5DA"],
	stacked: false,
	left_pad: 120
  }
)

</script>

You can customize the bar chart by editing the parameters in the snippet:

• html_element: If not provided, the map will be added as the last element in the report. To place it elsewhere, select an element in your report with this parameter.
• chart_height: The height of the chart in pixels.
• chart_width: The width of the chart in pixels.
• title: The chart's title.
• query_name: The name of the query that returns the chart's dataset. If you update the name of the query, you’ll need to update it here as well.
• bar_column: The dataset column that defines the bars.
• series_columns: An array of dataset columns that define each series of the bar chart.
• colors: An array of hex colors that define the color of each series. You can find a library of hex color codes here.
• stacked: Set to true for a stacked bar chart; set to false for a grouped bar chart.
• left_pad: The padding to the left of each bar. Add more padding if the bar names are long.