Formatting and Styling Items on a Story Canvas

You can style the appearance of SAP Analytics Cloud story widgets by changing fonts, colors, axis scaling on charts, and so on.

Input controls, charts, tables, and other widgets have their own styling options. You can change background colors or fonts, add borders, set hyperlinks, apply filters, and so on.

Note
You can also set default styles for all widgets in your story preferences. For more information, see Story Preferences and Details.

How to Access the Styling Options

  1. Switch to Edit mode.

  2. Select a widget on the page.

  3. Open the Designer panel and select Styling.

    The Styling panel displays options available for the selected widget type.

    Note

    Some options may not be available to all users, and some options are only available when a specific area of the widget is highlighted. The heading in the Styling panel identifies the area.

    For example, for a chart or table the Styling panel heading may show Title, Data Cell, Axis Labels, and so on. Selecting a different part of the widget changes the heading and the styling options.

  4. Select desired options.

Table Styling: Individual Styling Options and Performance

You can apply many individual styling options in table widgets, whether you are setting different styles for a set of data cells, the title cell, or some other portion of the table. However, too many individual styling options could affect the table's performance.

There is a limit of 500 individual styling options. When you have reached that limit and add additional styling options, you will see a warning message that includes an option to remove all individual styling options. If you don't want to remove all your individual styling options, you can select specific cells and reset them to their default settings.

If you want to apply styling options to your table data, consider using styling rules instead. For more information on styling rules, see Styling Rules for Tables.

Description of the Widget Styling Options

The following table contains all the style properties available for the widget types. However, some properties or a subset of properties may not be available for a specific. For example, while all of the widgets have the Actions “Order” properties, only some widgets have “Rotate” properties.

To find options for a particular widget, filter the Widget column.

Font Styles
Styling Options Description Widget
Widget

Background Color: select a background color for this widget.

Border: after you add at least one border line to your widget, you can change the line using the following options.

  • Style

  • Color

  • Line Width

  • Corner Radius
  • Chart
  • Clock
  • Data Action Trigger
  • Multi Action Trigger
  • Image
  • Input Control
  • Pictograms
  • Pinned Visualizations
  • RSS Reader
  • Table
  • Text
  • Value Driver Trees
Actions

Change the placement of the widget on the canvas.

Order
  • (Send Backward)
  • (Send to Back)
  • (Bring Forward)
  • (Bring to Front)
Rotate
  • Rotate Right 90
  • Rotate Left 90
  • Rotate 180
  • Chart
  • Data Action Trigger
  • Multi Action Trigger
  • Input Control
  • Pictograms
  • Table
  • Text
  • Value Driver Trees
Button Style

Content: color of the button content.

Border: color of the button border.

 Input Control

Boardroom Properties

Note
The boardroom properties are only available if you have the Digital Boardroom add-on.
 Actions:

  • Enable Sort Option in Boardroom

  • Enable Top N Option in Boardroom

  • Enable Variance Option in Boardroom

 Chart
Data Points

Select all data points or specific data points, lines, or other options.

Fill Color: change the color of the data point or line.

 Chart

Font

Chart

Text Selection

Select whether the style change applies to all the text labels or one or more of the following labels.

Standard labels for most chart types:
  • Axis Label
  • Data/Dimension Label
  • Legend
  • Chart Title
  • Subtitle
  • Trellis Label
  • Error Message
Labels that apply to specific chart types:
  • Axis Title: applies to Line, Bubble, Scatterplot, and Histogram charts.
Labels for the Numeric Point chart:
  • Primary
  • Primary Value
  • Primary Label
  • Primary Variance Value
  • Primary Variance Title
  • Secondary
  • Secondary Value
  • Secondary Label
  • Footer Text
 Chart
Font

The font options change based on the widget.

  • Text type: You can apply styles such as Header 1 or Body, or provide a custom style.

  • Text Selection: Select all text in the widget or specific text such as a header title or a subtitle.

  • Font

  • Size

  • Color: select a color or select More to create your own color option.

  • Style: apply bold, italics, or other styles.

  • Alignment

  • Lists: add bulleted or numbered lists.
  • Chart
  • Table
  • Pictograms
  • RSS Reader
  • Text
Dynamic Text

Show excluded values as strikethrough

Number of values displayed

 Text
Number Format

Select (Reset to auto) to undo any changes, and return all number values to the default unit setting.

Scale: select how to display the numbers on an axis: whether to show all digits for each data point or to display the values as thousands, millions, or billions.

  • Unformatted

  • Thousand

  • Million

  • Billion

  • Auto-formatted: picks the best scale for the values.

    The following numbers are used to determine which scale is automatically chosen:

    • Unformatted: values < 10,000

    • Thousand: values < 10,000,000

    • Million: values < 10,000,000,000

    • Billion: values >= 10,000,000,000

    For example, if the values are below zero when the number format is set to Million, then Auto-formatted changes the format to Thousand.

Scale Format
  • Default
  • k, m, bn
  • Thousand, Million, Billion

Measure Selection: choose an included measure to apply the formatting to.

Decimal Places: select the number of decimal places to display.

  • Default: the default number of decimal places is set in the model.

  • Automatic: truncates values to at least three digits. Values that are less than one will have three decimal places. Larger values will have the decimal places truncated.
    Example
    Original Formatted to Thousands Thousands with Automatic Decimal Places
    155.5555555 0.1555555555 0.156
    11689.76 11.68976 11.7
    0.00009999999 0.0000001 +0.00
    543234567998.99994 543234567.999 543234568
Show Sign As
  • Default
  • + / -
  • ( ): brackets will appear around negative values instead of a minus sign.
  • Chart
  • Table
Legend
Placement
  • Above Chart
  • Below Chart
  • Beside Chart (Right)

Alignment: select how to align the legend in relation to the chart.

 Chart
Labels

You can change the behavior or style of different labels in your charts.

Axis Label Direction

  • Automatic

  • Horizontal

  • Diagonal

    Note
    If you have multiple measures or multiple dimensions, the labels won't display on the diagonal, only on the horizontal.

  • Inline (Applies to only horizontal Bar or Stacked Bar charts.)

Axis Label Truncation

  • Right

  • Left

  • Middle

  • Truncate by Dimension/Measure:

    • Truncate by Dimension/Measure: select the dimension or measure

    • Truncation Direction: select Right, Left, or Middle

Data Label Background Color: use a background color for data labels to improve the readability of the data labels.

To use a custom color or to change the opacity of the background color, from the data label color picker, select More and then make your choices.

Data Label
  • Avoid Data Label Overlap – select whether to display all chart labels, or to detect when labels overlap and display only some labels.

    • Prioritize Largest Absolute Value

    • Show Only the Front Bar Label

  • Round Data Label Values – if there is not enough room on the chart, rounding the data label values allows all labels to be displayed. However, rounded values may not include the specified number of decimal places.

  • Hide Repeated Data Labels – select whether to avoid displaying repeated data labels, displaying only one occurrence of a repeated label.

  • First/Last/High/Low Labels – for each line in a chart, show only four data points and their labels: first, last, highest, and lowest.

  • Variance Label Alignment– select whether variance labels are above the variance chart or below it.

Bubble or Scatterplot: other options available when a Bubble or Scatterplot chart is selected.
  • Change the bubble scale.
  • Change the bubble opacity.
  • X-Axis High/Low Labels – show labels for only the highest and lowest data-points.
  • Y-Axis High/Low Labels – show labels for only the highest and lowest data-points.
  • Size High/Low Labels – (bubble charts) show labels for only the highest and lowest data-points.

Donut or Pie

Absolute Value – show labels as absolute value instead of percentage.

 Chart
Axis Axis Line Color: change the color of the axis line. Chart

Boardroom Keypad Slider

Note
The keypad slider is only available if you have the Digital Boardroom add-on.

Show Slider

Minimum

Maximum

Step Size

 Table

Clock Properties

Note
The clock widget is only available if you have the Digital Boardroom add-on.

Show Logo: display a company logo.

Time Format

Date Format

 Clock
Image Properties Select how to handle image scaling:
  • Contain: The entire image is contained in the frame, maintaining the image's aspect ratio.
  • Cover: The image is scaled to cover or fill the entire frame, maintaining the image's aspect ratio. Some parts of the image may be cropped.
  • Stretched: The entire image is stretched to fit in the entire frame.
  • Pan: The image is scaled to fill the horizontal dimension of the frame. The bottom of the image may be cropped.
 Image
Pictogram Properties

Use the following options to modify shapes or pictograms in your story.

  • Fill Color

  • Line Color

  • Outline Width

 Pictograms
Hyperlink Link to another story, page, or external URL from this widget.
  • Chart
  • Image
  • Pinned Visualizations
  • Text
Table Properties
Template: Apply a preset template to the table.

  • Default: uses best practices styling and color scheme. Includes different column heading lines for each type of planning version (Actual, Forecast, and so on).

    Color Fill for Editable Cells: Provide a color for cells that can be edited.

  • Report Styling: follows the International Business Communication Standards (IBCS) guidelines.

    Not every option is available for every template:
    • Frequency of Reading Lines: Changes the number of lines displayed for ease of reading. By default this is set to one line per row.
    • Show group lines: Displays a line around groups in the table.
  • Alternating Rows: designed for list reporting.

  • Basic (previously Standard): a simple design that includes gridlines and shading for row and column headings.

Color Fill for Expand Icon: lets you choose the color of the expand icon.

This makes it easier to see the expand/collapse arrows in your table after you've changed the background color.

Threshold Style: changes how threshold cell data is displayed.
  • Symbol (default) – use the story-defined symbols and colors for the threshold ranges.
  • Color Values – the threshold colors are applied to the cell data.
  • Color Background – the threshold colors are applied to the cell background.
  • Color Background Without Values – the threshold colors are applied to the cell background and the values are hidden.

Row Height: select a predefined height or choose to set a custom height.

  • Default: sets the row height according to the content in the row by calculating the needed height based on the font-size as well as icons and padding. The default setting will adjust the height to avoid cutting off text.

  • Cozy: uses more padding above and below the text within the cell.

  • Condensed: uses less padding above and below the text within the cell.

  • Super Condensed

  • Custom: lets you specify the height of the column by changing the value in Height in Pixels.

 Table
Style

When selecting cells to apply style changes to, you can apply the change to an entire region or to specific cells. Regions include Title, Header region, and Data region.

You can create a new style which can be applied to cells in the current table, or to cells in other tables in the story.

  1. Select (Add Style).

  2. Enter a name for the style.

  3. Choose a font and other options.

  4. Apply the changes.

 Table
Styling Rules

Styling rules allow you to make text style changes along a hierarchy, changing styles for sibling, descendant, or child members.

For more information, see Styling Rules for Tables.

 Table
Cell

Merge: Merge cells.

Fill: choose from available colors or choose More to display the color selector and opacity selector.

Wrap: wrap text for a cell or for a column.

Add or delete a Row or Column: select a header region table cell to use these options to add custom rows or columns outside the data region.

The column or row placement will be automatic. When you have multiple dimensions or measures, you can only use the outer header region cells to add rows or columns.
Cell Row Placement Column Placement
Top left Above the table To the left of the table
Top right Above the table To the right of the table
Top middle Above the table Not Applicable
Bottom left Below the table To the left of the table
Bottom right Below the table Not Applicable
Bottom middle Below the table Not Applicable
Middle left Below selected member To the left of the table
Tip

Add some content or styling to your new custom row or column before making any changes to the table's data. Until they have been modified, the custom rows or columns are treated as temporary objects and may disappear when you make data changes.

 Table
Lines

Add lines to selected area or cell:

  • Simple Line: a narrow line between cells.

  • Decoration Line: a wider line between cells.

For each line, you can set different values:

  • Alignment

  • Line width

  • Color

  • Pattern

  • Style

  • Left Padding or Right Padding: you can add padding to the left or right side of a cell.

 Table

Description of the Page Styling Options

Many of the styling options on the story pages are similar to the those for the widgets, including font and background options. (The Grid pages have the same options as tables.)

There are some options that are only found on the Responsive and Canvas story pages, but not every option is available on both page types.

Styling Option

 Description Page
Canvas Background Color

Canvas
Lane Background Color

Responsive
Page Background Color

Responsive
Grid
  • Show Grid (You can also use Ctrl + Alt + G to show or hide the grid.)
  • Snap to Grid
  • Snap to Object
  • Canvas
  • Responsive
Dynamic Text

Show excluded values as strikethrough

Number of values displayed

 Responsive
Page Size
Note

Before you can change the page size, you may need to rearrange widgets in your canvas to fit the new size.

Dynamic pages grow or shrink to accommodate the widgets, while Fixed pages can be set to a specific size.

Size: set a Custom size or select a predetermined size from the list:
  • Letter
  • Legal
  • Tabloid
  • A3
  • A4
  • B4
  • B5
  • 16:9 (HD)

Width: set a width between 512 and 7680 pixels.

Height: set a height between 384 and 7680 pixels.

Orientation: choose landscape or portrait orientation.

Continuous Height: select continuous height if you want the height to remain constant.

Fit Page to Grid: select to automatically update the width and height settings to align with the grid.

Canvas
Page Layout

Show Header

Show Footer

Margins: select the margins for the canvas between None, Normal, Narrow, or Wide.

 Canvas
Insert Add an Image or Shape to the header area. Responsive