KendoReact Data Grid Chart IntegrationPremium
Integrating charts within the Grid provides a visual representation of the data, making trends, patterns, and outliers more clear compared to raw table data.
Start Free Trial
Use the KendoReact Chart Wizard to quickly create charts from the Grid data.
The following example demonstrates how to launch the Chart Wizard from a Context Menu.
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 component:
- Using Data-Binding—Reduce the repetitive boilerplate code when creating charts from the Grid data.
- Using Grid Selected Keys—Create charts from the Grid
selectedKeysproperty collection.
Using Data-Binding
To bind the Chart Wizard component and create charts based on the Grid selection:
- Set the Chart Wizard's
dataprop to thechartWizardDataarray:
<ChartWizard data={chartWizardData} />The following example demonstrates how to bind the Chart Wizard to the selection of the Grid:
Using Selected Keys
The Chart Wizard component expects data of type ChartWizardDataRow. To map the selectedKeys array to the supported format, use the built-in getWizardDataFromGridSelection method.
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.
Plot Any Data
To allow users to create charts without selecting cells, create a selectedKeys collection on the fly and use the
getWizardDataFromGridSelection helper method as shown above.
You can bind the Chart Wizard component without selecting any Grid rows or cells by providing a custom collection to the selectedKeys field of the getWizardDataFromGridSelection helper method.
The following example demonstrates how plot all data of the Grid through a floating button: