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?