# Chart selected data

Connect a Grid range to a chart to view the same data as both a table and a graph. Select category and value columns appropriate to the chart type, rather than simply selecting numeric values.

Canonical: https://grid.syidax.com/docs/features/integrated-charts/

<a id="understand"></a>

## How it works and when to use it

Creation returns a report that distinguishes success from rejection. Check success before using chartId to update, export, or destroy the chart. Register the chart components and configure Pro first.

Using this feature in a product requires the Pro package and a valid license. Matching setting names do not enable Pro features in Community.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

- [Installation and integration · Shared sample data](https://grid.syidax.com/docs/guides/getting-started.md)

<a id="example-1"></a>

## Example 1. Create a bar chart from a selected range

First select a range containing a category column and a numeric column.

```javascript
grid.rangeSelection = true;
const result = await grid.createRangeChart({ chartType: 'column' });
if (result.status === 'created') {
  console.log(result.chart.chartId);
} else {
  console.log(result.reason, result.detail);
}
```

Verify the result: On success, a chart appears in a panel managed by the Grid. If there is no selection or the data combination is unsupported, read the rejection reason.

<a id="example-2"></a>

## Example 2. Sync with the current table

After filtering or changing data, inspect active charts and read the synchronization result.

```javascript
console.log(await grid.getChartRefs());
console.log(await grid.syncCharts());
```

Verify the result: Chart data is rebuilt from the current view. Avoid repeatedly creating the same chart unnecessarily.

<a id="example-3"></a>

## Example 3. Restore and clean up charts

Save user-created chart settings and restore them later in a Grid with the same data contract.

```javascript
const saved = await grid.getChartModels();
console.log(saved);
// Restore the saved envelope:
console.log(await grid.restoreChartModels(saved.envelope));
```

Verify the result: Check the capture result's issues and pass only envelope to restoration. Inspect applied and rejected results. Call destroyChart(chartId) to close an individual chart and clean up any external containers your app created.

<a id="pitfalls"></a>

## Combining features and troubleshooting

Group and pivot result columns have different identifiers from source columns. Inspect the current result column model and use a supported chart projection.

Distinguish chart cross-filter ownership from external filters set by your app. resetChartCrossFilter() clears filters managed by charts.

<a id="related-api"></a>

## APIs used by this feature

- [createRangeChart](https://grid.syidax.com/docs/methods/createRangeChart.md) — Creates an integrated chart from a selection or explicit source. Read chartId on success or the rejection reason on failure.
- [updateChart](https://grid.syidax.com/docs/methods/updateChart.md) — Changes an existing chart's type, source range, or properties and returns the result.
- [destroyChart](https://grid.syidax.com/docs/methods/destroyChart.md) — Closes the specified chart and releases its resources.
- [getChartRefs](https://grid.syidax.com/docs/methods/getChartRefs.md) — Reads IDs and states of active integrated charts.
- [syncCharts](https://grid.syidax.com/docs/methods/syncCharts.md) — Recalculates integrated chart data projections from the current Grid view.
- [getChartMenuModel](https://grid.syidax.com/docs/methods/getChartMenuModel.md) — Reads the chart menu model available for the current selection and permissions.
- [openChartToolPanel](https://grid.syidax.com/docs/methods/openChartToolPanel.md) — Opens the tool panel for choosing an available chart.
- [closeChartToolPanel](https://grid.syidax.com/docs/methods/closeChartToolPanel.md) — Closes the chart creation panel and cleans up its selection flow.
- [getChartToolPanelReport](https://grid.syidax.com/docs/methods/getChartToolPanelReport.md) — Reads chart panel open, focus, and accessibility state.
- [activateChartToolPanelItem](https://grid.syidax.com/docs/methods/activateChartToolPanelItem.md) — Creates a chart by activating the currently focused chart panel item.
- [getChartModels](https://grid.syidax.com/docs/methods/getChartModels.md) — Captures active charts in a versioned envelope with capture issues. Pass the result's envelope to restoration.
- [restoreChartModels](https://grid.syidax.com/docs/methods/restoreChartModels.md) — Restores a saved chart envelope against the current Grid data contract and returns results.
- [exportChartImage](https://grid.syidax.com/docs/methods/exportChartImage.md) — Requests image export for an integrated chart and returns the result.
- [applyChartCrossFilter](https://grid.syidax.com/docs/methods/applyChartCrossFilter.md) — Applies chart selection actions to the Grid filter model.
- [resetChartCrossFilter](https://grid.syidax.com/docs/methods/resetChartCrossFilter.md) — Clears chart-owned cross-filters while retaining the app's external filters.
- [getChartAccessibleSummary](https://grid.syidax.com/docs/methods/getChartAccessibleSummary.md) — Reads chart data summaries and accessibility checks.
- [getChartFleetReport](https://grid.syidax.com/docs/methods/getChartFleetReport.md) — Reports the current chart set, open resources, and cleanup state.
- [chartCreated](https://grid.syidax.com/docs/events/chartCreated.md) — Emitted when an integrated Grid chart is created. Manage your app's chart list by chart ID.
- [chartRangeChanged](https://grid.syidax.com/docs/events/chartRangeChanged.md) — Emitted when an integrated chart's source range changes.
- [chartOptionsChanged](https://grid.syidax.com/docs/events/chartOptionsChanged.md) — Emitted when integrated chart settings change. Update saved chart models if needed.
- [chartDestroyed](https://grid.syidax.com/docs/events/chartDestroyed.md) — Emitted when an integrated chart is destroyed. Clean up app-held references and external resources.

<a id="next"></a>

## Related reading

- [How rows, columns, and IDs relate](https://grid.syidax.com/docs/guides/concepts.md)
- [Connect results and events](https://grid.syidax.com/docs/guides/data-event-access.md)
- [Explore in Features](https://grid.syidax.com/grid/integrated-charts) — The guide describes which interactions are available to try.