How to change the size of your embedded visualizations

The height and width of your visualization are important aspects of its design: How steeply does the line rise? How easily can readers compare the height of the columns in your column chart or the width of the bars in your bar chart? This often depends on the size of your visualization. This article explains what control you have over the size of embedded Datawrapper visualizations.

The reader's screen size determines the width of your visualizations

Embedded visualizations are fully responsive. That means that the width of your embedded visualization adapts smoothly to the width of your reader’s screen. If your visualization gets embedded, the width can't be defined; it depends on the device the visualization is viewed on. On mobile screens, your chart might only be 380px or 400px wide, while on a big computer screen, it might be 700px wide. 

To preview your visualization at different widths, you can drag around the little ←→ symbol in the bottom-right corner of your visualization. You can also change the preview width in the preview panel below your chart, map, or table:

It's important to understand that this is only a preview. (If you want to export the visualization, you can set the width in step 4: Publish & embed.) You don't actually set a width for your visualization; the width gets set by your reader's screen size.

The rest of the article focusses on the height of your visualizations:

Your data determines the height in many visualization types

The height of your visualization is often determined by the nature of your data — like the number of bars in a bar chart, or the shape of the country in your choropleth map. That means that you can't control their height directly. Here's a table of all visualization types with more information:

*In choropleth and symbol maps, you can't control the height directly, but you can set a maximum height in step 3 > Refine. That's useful for countries that you don't want to take up the available width, like Chile. You can also set a padding that influences the height of your map. 

Changing the height of the plot, not the chart

Let's have a look at the visualization types marked " 🔵  can be set in pixels" in the table above – the ones in which you can control the height: line charts, area charts, scatter plots, and all three kinds of column chart (regular, grouped, and stacked).

To change the height of these charts, find the setting Plot height in step 3: Visualize > Refine:

You can drag the slider to the left and right, type in the height in pixels – or hover over the chart and drag the pink handle up and down: 

We'll have a closer look at the options in a minute. First, let's clarify: What's a plot height?

What does plot height mean?

The plot is the chart area without header, footer, color key, or annotations. In Datawrapper, you set a height for the plot instead of the full chart. That's because on mobile screens, a long title, footer, or annotations shown as a key would otherwise "eat away" the space for the actual chart. By defining the height for the plot, long notes, titles, or lists of annotations displayed as mobile keys won’t take up the space of your actual data:

As you can see above, you have two options for defining the height of the plot: 

What's a fixed height?

Setting a fixed height means the height of your plot will be exactly the same on all screen widths. No matter if your embedded chart is e.g. 400px or 700px wide, you can e.g. set the plot height to be a constant, fixed 300px. 

What's a height based on width?

Switch to setting a plot height based on width if you wan a consistent aspect ratio that scales your plot proportionally based on its width. In the example below, plot area is almost exactly a square (aspect ratio of 1:1), no matter the screen size:

Changing the height of an embedded chart

Sometimes, you might need to set the exact height of your embedded Datawrapper visualization. To do so, you can add the fitchart=true render flag to your visualization before you embed it, like so (don't forget the questionmark!):

https://datawrapper.dwcdn.net/DDS7B/?fitchart=true

<iframe title="Capacity of nuclear power in Germany" aria-label="Interactive line chart" id="datawrapper-chart-DDS7B" src="https://datawrapper.dwcdn.net/DDS7B/1/?fitchart=true" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="300" data-external="1"></iframe>

Changing the height of a PNG/PDF/SVG export

For print layouts, slides, PDF reports, and other static formats, we recommend to export your visualization as PNG, PDF, or SVG. If you do so, you can define the  exact total height of your visualization, including title and footer:

To do so, go to step 4: Publish. Click on PNG, PDF, or SVG, and enter the width and height in pixels. (If you choose PDF, you can also specify the size in inches or millimeters.) 

When exporting PDFs and SVGs, you can even change the height of a visualization whose height is actually determined by the nature of your data (like bar charts, tables, range plots). When you do this, Datawrapper adds an extra space between the plot and the footer:

To avoid this, be sure to select the Auto option next or below the height field. If auto height is turned on, Datawrapper automatically calculates the height for your visualization, and no extra spaces are added: