Quick Links

• View the 'Style your visualisation' menu
  • From an existing data visualisation content block
• Visualisation size
• Background
  • Style the background
  • Style the border
• Legend
• Title, subtitle, caption, and source
• Colour
  • Change a colour in the palette
  • Change the colour order in the palette
  • Add a colour to the palette
• Bars
• Lines and symbols
  • Change line width or style
  • Change data symbol styling
• Slices and segments
  • Change spacing between slices
  • Change the size of the donut hole
• Axes and gridlines
• Axis Ticks
  • Add axis ticks to your visualisation
  • Style the ticks
• Prefix, suffix, decimals, and date format
• Tooltips
• Accessibility
• Save and exit data visualisation editor
• Edit an existing data visualisation

View the 'Style your visualisation' menu

To style your data visualisation, open the 'Style your visualisation' menu.

From an existing data visualisation content block

1. Click the settings icon at the top right of the content block.

2. In the 'Set up your visualisation' menu, click the 'Style your visualisation' button at the bottom right.

Visualisation size

1. In the 'Style your visualisation' menu, click Size.
2. Select the size of your visualisation:
   1. Contained
   2. Full-width
   3. Custom

Background

Style the background

1. Click 'Background' to expand the styling menu.
2. Click 'Background fill'.
3. Select the background fill style.
   1. Background image: upload an image for the visualisation background.
   2. Solid colour: select a solid colour for the visualisation background.
   3. No fill: leave the visualisation background transparent. The story's background colour will be visible behind the visualisation.

Style the border

1. Click 'Background' to expand the styling menu.
2. Select border style.
3. Set a line width.
4. Set an optional border radius to round the corners of your border.
5. Set the stroke colour.

Legend

1. Click Legend to expand the styling menu.
2. In Legend, you can
   1. change the legend position.
   2. change legend orientation.
   3. style legend text: font, colour, size, bold, italics, underline.
   4. show/hide the legend.

Title, subtitle, caption, and source

1. Click Title, subtitle, caption, and source.
2. You can:
   1. insert the title, subtitle, caption, and name of your data source.
   2. style the text's colour, size, bold, italics, underline.
   3. show or hide the title, subtitle or caption.
   4. add a link to the source.

Colour

You can customise the colour palette of your visualisation. For visualisations that use area to represent data—like area charts, bar graphs, and pie charts—you can choose a pattern fill.

1. Click Colour to expand the styling menu.
2. Click Colour paletteand choose a theme.
   1. For light background : this theme suits stories with a light background.
   2. For dark background: this theme suits stories with a dark background.

⚠️  Pattern fill designs are auto-generated and cannot be customised. Only the colour palette of the pattern can be changed.

Change a colour in the palette

1. Select the colour you want to change in the colour strip to open the styling menu.
2. Enter new HEX codes or use the colour picker to select a new colour.

Change the colour order in the palette

1. To change the order of colours, click the Edit button to the right of the colours.

2. Click and drag the = icon beside a colour to change its order.

Add a colour to the palette

1. To add a colour to the palette, click the Edit button to the right of its colours.

2. Click the 'Add colour' button.

3. Set the new colour using the colour picker or by changing the HEX code.

Bars

You can adjust the width of the bars in a bar chart.

1. Click Bars to expand the styling menu.

2. Adjust the bar width using the slider.

Lines and symbols

You can customise the lines and symbols in a line chart.

Change line width or style

1. Click Lines and symbols to expand the styling menu.

2. Type in the new line width.

3. Click Line style. You can choose from three line styles:

• None: Remove the line connecting your data points.
• Solid: A solid line connects your data points.
• Dashed: A dashed line connects your data points.

Change data symbol styling

You can change the shape and size of your data symbols. You can also add an outline for each symbol.

Slices and segments

You can change the spacing between slices for pie and donut charts. For donut charts, you can also adjust the size of the donut hole.

Change spacing between slices

1. Click Slices and segments to expand the styling menu.

2. Use the slider to adjust spaces between slices for pie and donut charts.

Change the size of the donut hole

1. Click Slices and segments to expand the styling menu.

2. Use the slider to adjust the size of the donut hole.

Axes and gridlines

You can change the styling of the visualisation's axes and gridlines.

1. Click Axes labels and gridlines.
2. Select the X-axis or Y-axis tab to edit that axis.
3. You can:
   1. insert an axis label.
   2. hide/show the axis.
   3. style the axis text by changing its font, colour or size. Add bold, italics or an underline.
   4. show or hide gridlines. Gridlines are hidden by default.
   5. style the gridline's colour, line style, and line width.

Axis Ticks

Add axis ticks to your visualisation

You can add ticks along the axes for better readability.

1. Click Ticks to open the styling menu.

2. Select the X-axis or Y-axis tab to edit that axis.

3. Type in the frequency and length of ticks.

4. Set a colour for the axis ticks.

5. Optional: Set a minimum and maximum value for the ticks.

Style the ticks

You can customise the tick label's font, size, colour, rotation and text fitting.

Prefix, suffix, decimals, and date format

You can add a prefix, suffix or decimals to clarify your data. Adding the date format used can also help to avoid misunderstanding.

1. Click Prefix, suffix, decimals, and date format to expand the styling menu.
2. You can:
   1. Add a prefix or suffix.
   2. Select a decimal place for your data.
   3. Select the date format your data follows.

Tooltips

Tooltips can provide additional context for specific data points, giving your readers a more detailed view of your data. In Lapis, you can customise tooltips for your visualisation.

1. Click Tooltips.
2. You can:
   • style the tooltip's header and body text: font, colour, size, bold, italics, underline.
   • show or hide tooltips.
   • type in the column name (e.g. A, B, C) to assign tooltip header and tooltip content.
   • style the tooltip box: background colour, stroke style, stroke width, border radius, stroke colour.

Accessibility

Providing an alternate text description for your visualisation helps screen reader users to understand the impact of your data.

1. Click Accessibility to expand the styling menu.
2. Type in alt text for your visualisation.

Save and exit data visualisation editor

Click Save at the bottom right to save your changes and exit to Storybuilder.

Edit an existing data visualisation

Click the settings icon on the top right of the data visualisation to continue to edit the visualisation.

Besides creating data visualisations in Lapis, you can also embed third-party data visualisations in your story.

Lapis is built by Kontinentalist↗, a data storytelling studio in Singapore.