# GenieQueryVisualization

Renders a chart + data table for a Genie query result.

## GenieQueryVisualization[​](#geniequeryvisualization-1 "Direct link to GenieQueryVisualization")

Renders a chart + data table for a Genie query result.

* When a chart type can be inferred: shows Tabs with "Chart" (default) and "Table"
* When no chart fits: shows only the data table
* When data is empty/malformed: renders nothing

**Source:** [`packages/appkit-ui/src/react/genie/genie-query-visualization.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/genie/genie-query-visualization.tsx)

### Props[​](#props "Direct link to Props")

| Prop        | Type                     | Required | Default | Description                                |
| ----------- | ------------------------ | -------- | ------- | ------------------------------------------ |
| `data`      | `GenieStatementResponse` | ✓        | -       | Raw statement\_response from the Genie API |
| `className` | `string`                 |          | -       | Additional CSS classes                     |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { GenieQueryVisualization } from '@databricks/appkit-ui';

<GenieQueryVisualization /* props */ />

```