Integrated Charts (Enterprise)

apex-grid-enterprise turns the grid's current view or a selected cell range into an ApexCharts chart. Use the declarative <apex-grid-chart> companion element for a live, self-updating chart, or the imperative renderChart / createRangeChart methods for full control.

The <apex-grid-chart> element

Bind a chart element to a grid by setting its grid property. It renders the grid's current chart model and redraws automatically when the view changes (grouping, pivot, data, or selection):

import 'apex-grid-enterprise/define';

const grid = document.querySelector('apex-grid-enterprise');
const chart = document.createElement('apex-grid-chart');
chart.grid = grid;
chart.source = 'auto';   // selection if present, else the view
document.querySelector('#chart-slot').appendChild(chart);

Property	Type	Description
grid	ApexGridEnterprise	The grid to chart
source	'auto' | 'selection' | 'view'	Which model to chart: selection if present else view ('auto'), or force one
type	ChartType | 'auto'	Chart type, or let the grid recommend one
mode	'inline' | 'dialog'	Render in place ('inline') or in a dialog ('dialog', default)

It fires apex-chart-created ({ chart, type }) after rendering and apex-chart-type-changed ({ type }) when the built-in gallery changes type. Note: unlike the other companion elements it renders in light DOM, because ApexCharts injects global styles.

Chart types

ChartType is 'column' | 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'scatter' | 'radar' | 'combo'. 'column' and 'bar' distinguish vertical vs horizontal.

Imperative rendering

Render into any container element and get back the ApexCharts instance:

// chart the current view (respects grouping/pivot/sort/filter)
const chart = await grid.renderChart(document.querySelector('#c'), { type: 'column' });

// chart the current cell range selection
const rangeChart = await grid.createRangeChart(document.querySelector('#c2'), { type: 'line' });

RenderChartOptions includes type (a ChartType or 'auto') and comboTypes (per-series types for a 'combo' chart).

Chart models

For custom rendering pipelines, get the underlying ChartModel (categories + series) without rendering:

Method	Returns
getChartModel()	Model for the current auto source
getViewChartModel()	Model derived from the current view (grouping/pivot)
getRangeChartModel()	Model derived from the current range selection
getCrossFilterModel()	{ categoryKey, model } for cross-filtering

import { chartModelToApexOptions, recommendChartType } from 'apex-grid-enterprise';

const model = grid.getViewChartModel();
const type = recommendChartType(model);              // pick a sensible type
const options = chartModelToApexOptions(model, { type });  // → ApexCharts options

recommendChartType(model) returns a ChartType heuristic; chartModelToApexOptions(model, options) is a pure transform to an ApexCharts options object (no ApexCharts dependency at call time).

Charting a pivot

Because <apex-grid-chart> follows the view, it redraws when you change pivotOn/groupBy. Both the grid and the chart element listen to the apex-view-changed event.

Cross-filtering

Set crossFilter (the property or the cross-filter attribute) on <apex-grid-chart> to turn the chart into a filter surface: clicking a chart category filters the grid to that value, and clicking it again clears the filter.

<apex-grid-chart cross-filter></apex-grid-chart>

chart.crossFilter = true;
chart.selectCategory(0);   // programmatic equivalent of clicking the first segment

The chart reads the grid's full, unfiltered data, so every category stays on the chart instead of collapsing to the filtered subset. The filter is applied with a self-contained, type-independent equality operation, so it matches regardless of the category column's declared type. Turning crossFilter off (or disconnecting the panel) drops any filter it applied. For custom pipelines, getCrossFilterModel() returns { categoryKey, model }.

React example

import { useEffect, useRef } from 'react'
import 'apex-grid-enterprise/define'

export default function ChartedGrid() {
  const gridRef = useRef<any>(null)
  const chartRef = useRef<any>(null)

  useEffect(() => {
    const grid = gridRef.current
    grid.columns = columns
    grid.data = data
    grid.groupBy = ['region']
    grid.aggregations = { revenue: ['sum'] }
    chartRef.current.grid = grid
    chartRef.current.source = 'view'
    chartRef.current.type = 'column'
  }, [])

  return (
    <div>
      <apex-grid-enterprise ref={gridRef} style={{ height: 360 }} />
      <apex-grid-chart ref={chartRef} mode="inline" />
    </div>
  )
}