How to create mobile-friendly visualizations

While all Flourish visualizations are responsive – resizing the window they are being displayed in will make the visualization use the space available – there a few things you can do to improve the way your visualizations look on smaller screens.

1

Preview buttons

Use the preview buttons in the top left corner to preview your visualization at different widths. The first button will display a full-screen preview in a new tab, while the desktop icon shows you the available width in the current window. The next two icons display your visualization at typical tablet and typical mobile phone width. You can click through these to see what your visualizations will look like at different widths. The last button lets you preview it at a custom size. This is helpful to preview what your visualization might look like at different screen sizes, and change some things that don't work ideally.

2

Adding a fixed aspect ratio

Some templates offer the possibility of adding a fixed aspect ratio. This is helpful if some of your labels aren't being displayed because the height of your embed doesn't allow it. Let's take this chart as an example:

While all the labels are displaying on desktop, they might be cut off on mobile because there isn't enough available space:

One way to avoid this is to add a fixed aspect ratio. To do this, go to the Aspect ratio setting within the Chart styles settings, and set it to something quite high, like 100 or 200. You can also supply a separate aspect ratio for desktop and mobile – this is useful because often you will need your chart to be taller on mobile.

This should fix the issue of some of the labels disappearing on mobile:

3

Displaying axis ticks at an angle

Another issue that can occur in our Line, bar, pie as well as our Scatter template is that some of the axis ticks will be excluded on mobile. This is to ensure they don't overlap. Sometimes, it might be important to keep certain axis labels though, especially if they contain words. Here's an example of axis labels being excluded on mobile because they are being displayed with a degree of 0.

To avoid this, we recommend using a slight angle for your tick labels.

To change the angle of your tick labels in our Line, bar, pie template, go to the X axis settings and find the section Ticks & Labels. The example below is using an angle of 30 degrees, making all labels are visible on mobile. The same settings are available for the Y axis.

4

Displaying labels above bars

When visualizing your data with bars, you might experience the issue that some of your labels are being removed off at certain screen sizes. To avoid this, you can display them above your bars.

To display your labels above your bars instead of in the axis, go to the Labels settings and select Above bars. You can also supply the size, color, and whether you would like them to be bold.

5

Embedding your charts using our script embed

We recommend embedding your charts with our script embed, as this will allow them to redraw with the available space, which is especially visible in templates with grid and table views. Our grid of line charts, for example, will display as four columns with one small multiple each in the desktop version:

And two columns of charts on mobile:

You can learn more about embedding Flourish charts in your CMS here.