Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# DonutChart

Donut Chart component (Pie chart with inner radius).

## Example​

    "use client";

    import { DonutChart } from "@databricks/appkit-ui/react";

    export default function DonutChartExample() {
      return (
        <DonutChart
          data={[
            { name: "Engineering", value: 450 },
            { name: "Marketing", value: 250 },
            { name: "Sales", value: 300 },
            { name: "Operations", value: 200 },
          ]}
          height={300}
        />
      );
    }

## DonutChart​

Donut Chart component (Pie chart with inner radius).

Important: This component uses Apache ECharts architecture. Configure it via props, not by passing child components.

Best Practice: Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.

Supports both query mode (queryKey + parameters) and data mode (static data).

Source: `packages/appkit-ui/src/react/charts/pie/index.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`queryKey` | `string` |  | - | Analytics query key registered with analytics plugin
`parameters` | `Record<string, unknown>` |  | - | Query parameters passed to the analytics endpoint
`format` | `enum` |  | `"auto"` | Data format to use - "json": Use JSON format (smaller payloads, simpler) - "arrow": Use Arrow format (faster for large datasets) - "auto": Automatically select based on expected data size
`transformer` | `(<T>(data: T) => T)` |  | - | Transform raw data before rendering
`data` | `ChartData` |  | - | Arrow Table or JSON array
`title` | `string` |  | - | Chart title
`showLegend` | `boolean` |  | - | Show legend
`colorPalette` | `enum` |  | - | Color palette to use. Auto-selected based on chart type if not specified. - "categorical": Distinct colors for different categories (bar, pie, line) - "sequential": Gradient for magnitude/intensity (heatmap) - "diverging": Two-tone for positive/negative values
`colors` | `string[]` |  | - | Custom colors for series (overrides colorPalette)
`height` | `number` |  | `300` | Chart height in pixels
`className` | `string` |  | - | Additional CSS classes
`xKey` | `string` |  | - | X-axis field key. Auto-detected from schema if not provided.
`yKey` | `string | string[]` |  | - | Y-axis field key(s). Auto-detected from schema if not provided.
`ariaLabel` | `string` |  | - | Accessibility label for screen readers
`testId` | `string` |  | - | Test ID for automated testing
`options` | `Record<string, unknown>` |  | - | Additional ECharts options to merge
`innerRadius` | `number` |  | `0` | Inner radius for donut charts (0-100%)
`showLabels` | `boolean` |  | `true` | Show labels on slices
`labelPosition` | `enum` |  | `"outside"` | Label position

### Usage​

    import { DonutChart } from '@databricks/appkit-ui';

    <DonutChart /* props */ />