The Flourish Layout settings is a powerful tool that enables you to style your visualization in many different ways.
In this article
Fonts
In the Layout settings tab, the first option is a dropdown list of fonts. These fonts come loaded into the Flourish editor by default and are free to use.
You can change the text color of the whole visualization by clicking on Text color.
TIP: You can find out more about fonts and how to add your own, here.
Background color or image
By default the chart background color will be turned On and the chart will have a plain white background. By clicking on the color swatch you can change this.
Alternatively, you can turn background image on and add a background image to your chart. You can then change its size options between Fill, Fit, Original and Stretch and its alignment positioning.
We recommend adjusting the opacity and saturation of the image with a tool like Canva before uploading it to Flourish. This will help the background stay subtle and keeps focus on the chart itself.
If you do not want any background, set the background color and background image to Off and your chart will have a transparent background when you export it.
Maximum width
This set of settings enables you to apply a maximum width to just the main graphic or everything - main graphic plus header, subtitle, text, footer text and footer image. If you select main graphic or everything you can set a maximum width, in pixels, that the chart will stretch to and a left, center or right alignment. When the embedded chart goes past this set width, it will stick to the alignment and not stretch further.
Chart layout
Your Flourish chart composed of separate elements, the header, controls, legend, primary graphic, and the footer. You can easily change the order these appear in. Here are some configurations:
-
Header – controls – legend – primary graphic – footer
- Primary graphic – header – controls – legend – footer
- Header – primary graphic – controls – legend – footer
- Controls – primary graphic – header – controls – legend – footer
- Grid mode: Primary graphic on the right
You can also adjust the space between different elements of your chart. There are 3 pre-set spacing options and a 4th option enables you to use custom spacing.
Borders and margins
You can adjust the space between your main graphic and the edge of the frame by adjusting the margins. You can specify an exact amount for the top, bottom, right and left.
You can add a border to your chart that will sit outside the margins and will act as a frame around it. You can select a line thickness, color and style (solid, dashed, dotted) for each border.
Read direction
You can set the text read direction from the default, which is Left to right, to Right to left. This will align all the text along the right side of the graphic. Especially useful if you are using a right to left writing language like Arabic.
Warning: Currently, It's not possible to adjust this on all elements, such as axes.