I Chart Features | SCSE Components Playground

IChart — Interactive Features

IChart supports

interactive inline selectors embedded in the subtitle sentence
an explorer link button
four named toolbar slots for custom controls

Selectable dimensions wait for all dropdowns to initialize before fetching data, so the first request already contains the chosen values.

Selectable Dimensions

The selectable prop injects an inline dropdown directly into the auto-generated subtitle for any of 'model' | 'scenario' | 'region' | 'variable' . The selected value is merged into datasetsBase before each data fetch.

Selectable region
The subtitle renders an inline region dropdown. The chart refetches whenever the user switches regions; all other dataset dimensions stay fixed.

Selectable scenario
The user picks a scenario from the inline dropdown. The selected value is injected into datasetsBase before fetching, so only that scenario's data is shown across all dataset entries (which vary by region here).

Filtered dropdown options
selectable-filter applies a name_ilike query when fetching available items for the selector. Pass a glob pattern (e.g. "SSP*" ) to show only matching values. A per-dimension record is also accepted.

Pre-selected default value
default-selection sets the initial selector value. Without it, the first available item is selected. Pass a string (applies to all selectables) or a per-dimension record ( { region: 'Armenia' } ).

Multiple selectable dimensions
Pass an array to make several dimensions interactive simultaneously. Each gets its own inline dropdown in the subtitle sentence. Data is not fetched until all selectors have initialized, preventing unnecessary requests with partial filters.

Explorer Link

By default ( :explorer-link="true" ), an icon button appears in the toolbar right corner after data loads. It reads the exact rendered dimensions from the fetched chartData (not from props) and navigates to /explorer pre-filtered to show exactly what's displayed. The button is only shown once data is available and a valid filter can be derived.

Explorer link visible (default)
The chart multiline icon appears in the top-right toolbar after data loads. Click it to open the Data Explorer filtered to exactly the displayed data. Use explorer-path to override the default /explorer app route.

Explorer link disabled
Pass :explorer-link="false" to suppress the button. Use this when the app has no data explorer, or when navigation away from the current view is undesirable.

Toolbar Slots

Four named slots let you inject custom content at different positions in the chart header without any wrapper component.

#toolbar-top
Renders a full-width area above the title row. Use for notices, alerts, or a secondary toolbar spanning the entire chart width.

#toolbar-prepend
Placed on the left side of the header row, before the title. Useful for status indicators, dataset origin icons, or compact metadata chips.

#toolbar-append
Appended inside the toolbar pill on the right, after the existing buttons. The example adds an info button that opens an IPopUp overlay with additional context. The toolbar pill is visible when download , allowRelativeView , explorerLink , or this slot has content.

Selectable scenario + all toolbar features
Combine a selectable dimension with the explorer link, download, and a custom #toolbar-append slot to show a fully-featured chart with an interactive subtitle and a rich toolbar.