IconResources
Visualize intelligence

Pie chart

Add a pie chart to a card.

Pie charts are useful for showing proportions between categories in a single measure. Use them to display part-to-whole relationships when there are few categories.

Add pie chart

Set card to type "Vega Chart".

t0 screenshot - Add pie chart

t0 Prompt

Select data in the context dropdown of the chat window.

make a pie chart

generate arc chart

convert to pie chart

Code

{
...
"mark": {
"type": "arc",
...
},
"encoding": ... ,
...
}

t0 screenshot - Add pie chart

Add donut chart

Use a donut chart to highlight proportional values while drawing attention to the center. This is useful when you want a visual distinction or need to place a label or value in the middle.

t0 Prompt

make a donut chart

convert to donut chart

Code

{
"mark": {
"type": "arc",
"innerRadius": 100
},
...
}

t0 screenshot - Add donut chart

Configuration options

PropertyDescription
thetaDefines slice size using a quantitative field.
colorMaps categorical values to color.
tooltipDisplays values on hover.
detailPreserves group granularity for cleaner visual segmentation.
innerRadiusControls the inner radius of the arc in pixels; use to create a donut chart.
outerRadiusOptional. Sets the outer radius of the arc in pixels. Defaults to chart size.
radiusRelative size (0 to 1) of the arc radius; useful for responsive design.
view.strokeHides or shows the chart outline. Use null to remove the border.
autosizeControls how the chart fits its container. Recommended: {"type": "fit"}.

On this page