Chart heights

Sometimes it makes sense to change the heights of charts in your report. If you want to emphasize certain charts over others, changing display heights might be the way to go.

In the report below, the first chart is tall; the second two charts are short.

View Mode Analysis

Click Powered by Mode to duplicate the report and change chart heights in your reports. Learn more about using HTML to customize your reports.

Change chart height

Once you've added charts to your report, you can change their height with the following steps.

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>

Add the customizable snippet at the bottom of the HTML:

<script>

alamode.resizeChartHeight(
  { chart: "chart_d81c34cf90ab",
	height: 600 
  }
)

alamode.resizeChartHeight(
  {
	chart: "chart_f0b785069dd0",
	height: 200 
  }
)

alamode.resizeChartHeight(
  { 
	chart: "chart_ac8a71581df2", 
	height: 200 
  }
)

</script> 

You can customize each chart's height by editing the parameters in the snippet:

• chart: The ID of the Mode chart you want to adjust. You'll find this ID in the pre-populated HTML code in a line that looks like this: <mode-chart id="chart_d81c34cf90ab" dataset="dataset" options="chart_options"></mode-chart>.
• height: The height of the chart in pixels.