How to create mobile-friendly visualizations

All Flourish visualizations are responsive, so resizing the window they are being displayed in will make the visualization adjust to the space available. However, there are few things you can do to improve how your visualizations look on smaller screens, be they mobile phone devices or tablets.

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 in the unlikely case some of your labels aren't being displayed because the height of your embed doesn't allow it, or are you using a fixed height embed. 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 type options.

There, you can supply a separate aspect ratio for desktop and mobile – this is useful because often you will need your chart to be taller on mobile. For specifying an aspect ratio value, remember that one is square, above one is wider, and below one it taller.

It is also possible to provide the breakpoint, which is the width at which mobile mode ends and desktop begins.

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 occasionally can overlap on mobile for categorical data, or get hidden for number/date data to avoid overlapping.

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.

You can use 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 Label style setting of the Labels options 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.