LogoDark mode logo
LogoDark mode logo
Contact SupportLoading Light/Dark Toggle

  • Getting started
  • Perspectives
  • Tile Editor
    • Table visualization
    • Scalar visualization
    • Line graph visualization
    • Bar chart visualization
    • Blocks visualization
    • Donut visualization
    • Embed visualization
    • Gauge visualization
  • Sharing
  • Data streams
  • Objects
  • Data Explorer
  • Users and groups
  • Monitors
  • Workspaces
  • Organization home
  • Access control
  • KPI
  • Map
  • Search

Data sources

first stepsvisualization settingsdonut visualization

Donut visualization

Donut settings

Mapping

Setting
Description
Value
Choose the column to use for the value for each segment.
Label
Choose the label for each segment.

Legend

Setting
Description
Legend
Select how the donut labels are displayed. Choose from:
  • Inline: The labels are attached to the corresponding donut segment. This is the default style.
  • Table: The labels are displayed adjacent to the donut.
Legend Position
Select where the donut labels are displayed. This option is only visible when Table is selected from the Legend field.

Options

Setting
Description
Show as percentage
Select to display each donut segment value as a percentage of the total value.

Custom palette

It is possible to use custom colors for this visualization by creating a custom palette. Custom palettes can be declared as either an array or an object as follows:

  • Array: Select the colors based on the order of the data (for example, the first series is the first color).
    "palette": ["red", "#abcdef", "green"]
  • Object: Select colors based on the series label.
    "palette": { "EC2": "red", "Lambda": "#abcdef", "CloudWatch": "blue" }

How to apply a custom palette

To apply a custom palette, do the following:

  1. Click the More Options ellipsis button then select Edit JSON.
  2. Enter the JSON for the palette you want to apply under visualisation/config/data-stream-donut-chart. For example:
    "visualisation": {
        "type": "data-stream-donut-chart",
        "config": {
          "data-stream-donut-chart": {
            "horizontalLayout": "vertical",
            "grouping": false,
            "showValue": false,
            "displayMode": "actual",
            "xAxisLabel": "",
            "yAxisLabel": "",
            "range": {
              "type": "auto"
            },
            "showGrid": true,
            "showLegend": false,
            "legendPosition": "bottom",
            "palette": {
              "EC2": "red",
              "Lambda": "#abcdef",
              "CloudWatch": "blue"
            }
          }
        }
      },
  3. Click Save to apply the changes.

Was this article helpful?


Have more questions or facing an issue?
Submit a ticket

On this page

  • Donut settings
  • Mapping
  • Legend
  • Options
  • Custom palette
  • How to apply a custom palette

Footer

Sites

  • SquaredUp
  • SQUAREDUP DS
  • DOWNLOAD
  • COMMUNITY ANSWERS

Quick Links

  • Contact Support
  • Events
  • Careers

Small Print

  • Privacy Policy
  • Terms and Conditions
YoutubeX (Twitter)LinkedInBlueSky

© SquaredUp 2025