SYIDAX / DATA GRID

Chart selected data PRO

Create charts linked to selected ranges and update them with data changes.

Get started
Chart selected dataSample order data
120 rows
Loading Grid…
Latest result

Enable range selection and choose category names plus numeric values. Avoid mixing incompatible units on one axis.

View code
Current preview

Usage guide

#

Select table values for immediate chart comparison and keep charts synchronized with table changes.

Integration steps

  1. Select the chart range

    Enable range selection and choose category names plus numeric values. Avoid mixing incompatible units on one axis.

  2. 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.

  3. Compare data and chart

    Change source values and inspect chart results. Clean up the created chart's lifecycle when closing it.

Expected results

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
EventsDetail typeDescription
PRO
SyGridChartEventthe four outbound chart events, on ONE emitter each.
PRO
SyGridChartEventSelect a name to inspect its type contract.
PRO
SyGridChartEventSelect a name to inspect its type contract.
PRO
SyGridChartEventSelect a name to inspect its type contract.
Methods17
Method / ArgumentsReturn typeDescription
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.