Chart selected data PRO
Create charts linked to selected ranges and update them with data changes.
Enable range selection and choose category names plus numeric values. Avoid mixing incompatible units on one axis.
View code
Sample data included in the code · 6 rows
Usage guide
#Select table values for immediate chart comparison and keep charts synchronized with table changes.
Integration steps
- Select the chart range
Enable range selection and choose category names plus numeric values. Avoid mixing incompatible units on one axis.
- Connect chart creation
Pass the range and chart type to createRangeChart from a user button action. Review required options and return values in the API.
- Compare data and chart
Change source values and inspect chart results. Clean up the created chart's lifecycle when closing it.
Visually compare table values through a chart linked to the selected range.
The current workspace has no chart creation button or chart area. Enabling range selection alone does not create charts automatically.
Useful terms
- createRangeChart
- A method creating a chart linked to a selected data range.
- Range connection
- The relationship defining which table cells supply chart data.
Using this feature in your product requires the Pro runtime and a valid license.
API reference
#Events4
| Events | Detail type | Description |
|---|---|---|
PRO | SyGridChartEvent | the four outbound chart events, on ONE emitter each. |
PRO | SyGridChartEvent | Select a name to inspect its type contract. |
PRO | SyGridChartEvent | Select a name to inspect its type contract. |
PRO | SyGridChartEvent | Select a name to inspect its type contract. |
Methods17
| Method / Arguments | Return type | Description |
|---|---|---|
PRO params: SyGridChartCreateParams | Promise<SyGridChartCreateResult> | create a linked chart from the current canonical range (or from explicit params) and mount a real `<sy-chart>` into a grid-owned panel or the caller's container. |
PRO chartId: string, patch: SyGridChartUpdatePatch | Promise<SyGridChartUpdateResult> | change a live chart's type, source window or properties. |
PRO chartId: string | Promise<SyGridChartDestroyResult> | destroy one chart and free every resource it holds. |
PRO | Promise<SyGridChartReport[]> | the live chart refs (never a lie about liveness). |
PRO mutation?: SyGridChartSyncMutation | Promise<SyGridChartSyncReport> | re-derive every linked chart against the CURRENT view. The generation advances first, so a re-presented view is a no-op at tolerance zero rather than a re-render. |
PRO permissions?: SyGridChartPermissions | Promise<SyGridChartMenuReport> | the menu/wizard MODEL: what this selection may be charted as. |
PRO permissions?: SyGridChartPermissions | Promise<SyGridChartPanelReport> | open the rendered tool panel: a `role="dialog"` with a `role="menu"` of every concrete type, roving tabindex, 44px touch targets and RTL-aware arrow keys. |
PRO | Promise<SyGridChartPanelReport> | close the tool panel and release its wizard. |
PRO | Promise<SyGridChartPanelReport> | the panel's current focus/touch/RTL truth, measured. |
PRO | Promise<SyGridChartCreateResult> | activate the panel's focused menu item (Enter/Space). |
PRO | Promise<SyGridChartCaptureResult> | capture every live chart into the versioned model envelope. |
PRO envelope: unknown | Promise<SyGridChartRestoreResult> | restore charts from a persisted envelope against THIS grid. |
PRO chartId: string, request: SyGridChartExportRequest | Promise<SyGridChartExportResult> | resolve an export and ask the ELEMENT for the pixels. |
PRO chartId: string, colId: string, action: SyGridChartCrossFilterAction, categories: unknown[] | Promise<SyGridChartCrossFilterResult> | a chart gesture becomes a real grid filter model. |
PRO | Promise<SyGridChartCrossFilterResult> | drop every chart-owned filter; external filters are untouched. |
PRO chartId: string | Promise<SyGridChartAccessibleReport | null> | the accessible summary: the ELEMENT's own data table fed the grid's projection, plus the focus stops the RENDERED panel exposes and the violations the predicate finds in them. |
PRO | Promise<SyGridChartFleetReport> | the fleet/teardown ledger: live charts, open handles, leaks. |
Explore each feature
Learn when to use each feature and how to configure it. Each guide identifies live examples and features you connect in your app.