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.

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>
  )
}