How to create mobile-friendly visualizations

While all Flourish visualisations 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 looks on smaller screens.

    Preview buttons
    Use the preview buttons in the top left corner to preview your visualisation 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 visualisations 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.

    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. 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" setting within the "Chart styles" settings, and set it to something quite high, like 100 or 200.

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

    Displaying axis ticks at an angle
    Another issue that can occur in our Line, bar and 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 and 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.

    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 dekstop version:

    And two columns of charts on mobile:

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