syidaxgrid
Home Pricing Settings

GRID FEATURE · PRO

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.

Markdown source Features

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.

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.

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.

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.

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.

Related reading