# KendoReact Grid Chart Integration

Integrating charts within the Grid provides a visual representation of the data, making trends, patterns, and outliers more clear compared to raw table data.

<CtaPanelOverview></CtaPanelOverview>

Use the [KendoReact Chart Wizard](https://www.telerik.com/kendo-react-ui-develop/components/chart-wizard) to quickly create charts from the Grid data.

The following example demonstrates how to launch the Chart Wizard from a [Context Menu](https://www.telerik.com/kendo-react-ui-develop/components/layout/contextmenu).

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/chart-integration/context-menu/source.txt)

## Generating Chart from Grid Selection

You can create charts from the Grid row and cell selection. Use one of the following methods to set up the [Chart Wizard](https://www.telerik.com/kendo-react-ui-develop/components/chart-wizard) component:

* [Using Data-Binding](https://www.telerik.com/kendo-react-ui-develop/components/grid/integration-with-chart#using-data-binding)—Reduce the repetitive boilerplate code when creating charts from the Grid data.
* [Using Grid Selected Keys](https://www.telerik.com/kendo-react-ui-develop/components/grid/integration-with-chart#using-selected-keys)—Create charts from the Grid `selectedKeys` property collection.

### Using Data-Binding

To bind the Chart Wizard component and create charts based on the Grid selection:

1. Set the Chart Wizard's [`data`](https://www.telerik.com/kendo-react-ui-develop/components/chart-wizard/api/chartwizardprops) prop to the `chartWizardData` array:

```jsx
<ChartWizard data={chartWizardData} />
```

The following example demonstrates how to bind the Chart Wizard to the selection of the Grid:

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/chart-integration/data-binding/source.txt)

### Using Selected Keys

The Chart Wizard component expects data of type [`ChartWizardDataRow`](https://www.telerik.com/kendo-react-ui-develop/components/chart-wizard/api/chartwizarddatarow). To map the `selectedKeys` array to the supported format, use the built-in [`getWizardDataFromGridSelection`](https://www.telerik.com/kendo-react-ui-develop/components/chart-wizard/api/getwizarddatafromgridselection) method.

```jsx
import {
    ChartWizard,
    ChartWizardDataRow,
    getWizardDataFromGridSelection,
} from '@progress/kendo-react-chart-wizard';
...
const onOpen = React.useCallback(() => {
    setWizardData(
        getWizardDataFromGridSelection({
            grid: gridRef.current,
            data: sampleData,
            selectedState,
            dataItemKey: DATA_ITEM_KEY,
        })
    );

    setVisible(true);
}, [selectedState]);

```

The following example demonstrates the `getWizardDataFromGridSelection` helper method in action.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/chart-integration/helper-methods/source.txt)

## Plot Any Data

To allow users to create charts without selecting cells, create a `selectedKeys` collection on the fly and use the
[`getWizardDataFromGridSelection`](https://www.telerik.com/kendo-react-ui-develop/components/chart-wizard/api/getwizarddatafromgridselection) helper method as shown above.

You can bind the [Chart Wizard](https://www.telerik.com/kendo-react-ui-develop/components/chart-wizard) component without selecting any Grid rows or cells by providing a custom collection to the `selectedKeys` field of the [`getWizardDataFromGridSelection`](https://www.telerik.com/kendo-react-ui-develop/components/chart-wizard/api/getwizarddatafromgridselection) helper method.

The following example demonstrates how plot all data of the Grid through a floating button:

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/chart-integration/all-data/source.txt)

## Suggested Links

* [Chart Wizard Overview](https://www.telerik.com/kendo-react-ui-develop/components/chart-wizard)
* [API Index of the Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api)
* [API Index of the Chart Wizard](https://www.telerik.com/kendo-react-ui-develop/components/chart-wizard/api)
* [KendoReact Grid Context Menu](https://www.telerik.com/kendo-react-ui-develop/components/grid/interactivity/context-menu)