Visuals

Types of visuals

There are 2 different types of visuals that can be used in a project:

Charts and Graphs: These are used to represent data in a visual format, such as bar charts, line charts, pie charts, etc. These are built using vega-lite, see references/vega-lite-visual.md for more details.
Data Grids: These are used to display tabular data in a structured format, allowing for sorting, filtering, and pagination. See references/data-grid-visual.md for more details.

Packages & Imports

The visual components are provided by three packages. Always use these package imports when creating visuals.

Package	Primary exports	Example import
`@microsoft/fabric-visuals`	`VegaVisual`, types: `VisualizationSpec`, `VegaLiteConfig`, `VegaVisualProps`	`import { VegaVisual } from "@microsoft/fabric-visuals"`
`@microsoft/fabric-datagrid`	`DataGrid`, types: `GridColumnDef`, `Row`, `CellValue`, `DataGridProps`, `DataGridTheme`, `SortConfig`	`import { DataGrid } from "@microsoft/fabric-datagrid"`
`@microsoft/fabric-visuals-core`	`isDataTable`, `convertDataTableToRows`, design tokens	`import { isDataTable } from "@microsoft/fabric-visuals-core"`

The DataTable type (used by both components) is defined in @microsoft/fabric-visuals-core and re-exported by the visual packages' type definitions.