Integrated charting capabilities with ag-charts integration for creating interactive visualizations from grid data, including range charts, pivot charts, and sparklines.
Create charts from selected cell ranges with various chart types and customization options.
/**
* Create charts from selected data ranges
*/
function createRangeChart(params: CreateRangeChartParams): ChartRef | undefined;
/**
* Parameters for creating range charts
*/
interface CreateRangeChartParams {
/** Cell range to chart */
cellRange: CellRangeParams;
/** Type of chart to create */
chartType: ChartType;
/** Container element for the chart */
chartContainer?: HTMLElement;
/** Whether to suppress chart range highlighting */
suppressChartRanges?: boolean;
/** Aggregation function for grouped data */
aggFunc?: string | IAggFunc;
/** Chart theme name */
chartThemeName?: string;
/** Whether chart should be unlinked from grid data */
unlinkChart?: boolean;
/** Chart options override */
chartOptions?: ChartOptions;
}
/**
* Chart reference for managing created charts
*/
interface ChartRef {
/** Unique chart identifier */
chartId: string;
/** Destroy the chart */
destroyChart(): void;
/** Get chart instance */
getChartInstance(): any;
/** Update chart data */
updateChart(params: UpdateChartParams): void;
}
/**
* Cell range parameters for chart data selection
*/
interface CellRangeParams {
/** Starting row index */
rowStartIndex?: number;
/** Ending row index */
rowEndIndex?: number;
/** Starting column */
columnStart?: string | Column;
/** Ending column */
columnEnd?: string | Column;
/** Specific row start pinned position */
rowStartPinned?: string;
/** Specific row end pinned position */
rowEndPinned?: string;
}Usage Example:
import { IntegratedChartsModule } from "ag-grid-enterprise";
const gridOptions: GridOptions = {
modules: [IntegratedChartsModule],
enableCharts: true,
enableRangeSelection: true,
popupParent: document.body,
chartThemes: ["ag-default", "ag-material", "ag-sheets"],
chartThemeOverrides: {
common: {
title: {
fontSize: 18,
fontFamily: "Arial"
}
}
}
};
// Create chart from selected range
const chartRef = gridApi.createRangeChart({
cellRange: {
rowStartIndex: 0,
rowEndIndex: 9,
columnStart: "country",
columnEnd: "gold"
},
chartType: "groupedColumn",
chartContainer: document.querySelector("#chartContainer"),
suppressChartRanges: false,
aggFunc: "sum"
});
// Manage chart lifecycle
if (chartRef) {
console.log("Chart created with ID:", chartRef.chartId);
// Update chart later
chartRef.updateChart({
chartType: "line",
chartOptions: {
title: { text: "Updated Chart Title" }
}
});
// Destroy when done
setTimeout(() => chartRef.destroyChart(), 10000);
}Create charts from pivot data with automatic aggregation and grouping.
/**
* Create charts from pivot data
*/
function createPivotChart(params: CreatePivotChartParams): ChartRef | undefined;
/**
* Parameters for creating pivot charts
*/
interface CreatePivotChartParams {
/** Type of chart to create */
chartType: ChartType;
/** Container element for the chart */
chartContainer?: HTMLElement;
/** Chart theme name */
chartThemeName?: string;
/** Whether chart should be unlinked from grid data */
unlinkChart?: boolean;
/** Chart options override */
chartOptions?: ChartOptions;
}
/**
* Cross filter chart for interactive filtering
*/
function createCrossFilterChart(params: CreateCrossFilterChartParams): ChartRef | undefined;
interface CreateCrossFilterChartParams {
/** Chart type */
chartType: ChartType;
/** Cell range for cross filter data */
cellRange: CellRangeParams;
/** Whether to suppress chart ranges */
suppressChartRanges?: boolean;
/** Aggregation function */
aggFunc?: string | IAggFunc;
/** Chart container */
chartContainer?: HTMLElement;
}Usage Example:
// Enable pivot mode first
gridApi.setPivotMode(true);
// Set up pivot columns
gridApi.setPivotColumns(["country"]);
gridApi.setRowGroupColumns(["sport"]);
gridApi.setValueColumns([{colId: "gold", aggFunc: "sum"}]);
// Create pivot chart
const pivotChartRef = gridApi.createPivotChart({
chartType: "stackedColumn",
chartContainer: document.querySelector("#pivotChart"),
chartThemeName: "ag-material"
});
// Create cross-filter chart for interactive filtering
const crossFilterRef = gridApi.createCrossFilterChart({
chartType: "doughnut",
cellRange: {
columnStart: "sport",
columnEnd: "sport"
},
aggFunc: "count"
});Comprehensive API for managing chart lifecycle, appearance, and data.
/**
* Get all chart models in the grid
*/
function getChartModels(): ChartModel[];
/**
* Get chart reference by ID
*/
function getChartRef(chartId: string): ChartRef | undefined;
/**
* Download chart as image
*/
function downloadChart(params: DownloadChartParams): void;
/**
* Get chart as data URL
*/
function getChartImageDataURL(params: GetChartImageDataURLParams): string;
/**
* Update existing chart
*/
function updateChart(params: UpdateChartParams): void;
/**
* Restore chart from model
*/
function restoreChart(params: ChartModel): ChartRef | undefined;
/**
* Chart model for persistence
*/
interface ChartModel {
/** Chart ID */
chartId: string;
/** Chart type */
chartType: ChartType;
/** Data model */
data: ChartData;
/** Chart options */
options: ChartOptions;
/** Chart theme */
theme: string;
}
/**
* Download chart parameters
*/
interface DownloadChartParams {
/** Chart ID to download */
chartId: string;
/** File name for download */
fileName?: string;
/** Image format */
fileFormat?: "png" | "jpg";
/** Image dimensions */
dimensions?: { width: number; height: number };
}
/**
* Chart image data URL parameters
*/
interface GetChartImageDataURLParams {
/** Chart ID */
chartId: string;
/** Image format */
fileFormat?: "png" | "jpg";
/** Image dimensions */
dimensions?: { width: number; height: number };
}Usage Example:
// Get all charts
const chartModels = gridApi.getChartModels();
console.log(`Found ${chartModels.length} charts`);
// Download chart as image
gridApi.downloadChart({
chartId: chartRef.chartId,
fileName: "sales-chart",
fileFormat: "png",
dimensions: { width: 800, height: 600 }
});
// Get chart as data URL for embedding
const imageDataURL = gridApi.getChartImageDataURL({
chartId: chartRef.chartId,
fileFormat: "png"
});
// Update chart appearance
gridApi.updateChart({
chartId: chartRef.chartId,
chartOptions: {
title: { text: "Updated Sales Data" },
legend: { position: "bottom" }
}
});
// Persist and restore charts
const chartModel = chartModels[0];
localStorage.setItem("savedChart", JSON.stringify(chartModel));
// Later restore
const savedModel = JSON.parse(localStorage.getItem("savedChart"));
const restoredChart = gridApi.restoreChart(savedModel);Mini-charts displayed within grid cells for data visualization at the cell level.
/**
* Sparkline cell renderer for mini-charts in cells
*/
interface SparklineCellRendererParams extends ICellRendererParams {
/** Sparkline options */
sparklineOptions: SparklineOptions;
}
/**
* Sparkline configuration options
*/
interface SparklineOptions {
/** Type of sparkline */
type: "line" | "column" | "area";
/** Data for the sparkline */
data?: number[];
/** X-axis data */
xKey?: string;
/** Y-axis data */
yKey?: string;
/** Line color */
stroke?: string;
/** Fill color for area charts */
fill?: string;
/** Line width */
strokeWidth?: number;
/** Marker options */
marker?: {
size?: number;
fill?: string;
stroke?: string;
};
/** Highlight options */
highlightStyle?: {
fill?: string;
stroke?: string;
};
}Usage Example:
import { SparklinesModule } from "ag-grid-enterprise";
const columnDefs: ColDef[] = [
{ field: "symbol" },
{ field: "name" },
{
field: "change",
cellRenderer: "agSparklineCellRenderer",
cellRendererParams: {
sparklineOptions: {
type: "line",
stroke: "green",
strokeWidth: 2,
marker: {
size: 3,
fill: "green"
},
highlightStyle: {
stroke: "darkgreen",
strokeWidth: 3
}
}
}
},
{
field: "volume",
cellRenderer: "agSparklineCellRenderer",
cellRendererParams: {
sparklineOptions: {
type: "column",
fill: "blue",
stroke: "darkblue",
highlightStyle: {
fill: "lightblue"
}
}
}
}
];
const rowData = [
{
symbol: "AAPL",
name: "Apple Inc.",
change: [1, -2, 3, -1, 2, 1, -1],
volume: [100, 120, 90, 110, 95, 105, 115]
}
];
const gridOptions: GridOptions = {
modules: [SparklinesModule],
columnDefs,
rowData
};Visual interface for chart creation and configuration with drag-and-drop functionality.
/**
* Chart tool panel API
*/
function openChartToolPanel(params?: OpenChartToolPanelParams): void;
function closeChartToolPanel(params?: CloseChartToolPanelParams): void;
/**
* Chart tool panel parameters
*/
interface OpenChartToolPanelParams {
/** Chart ID to configure */
chartId?: string;
}
interface CloseChartToolPanelParams {
/** Chart ID */
chartId?: string;
}// Chart types enumeration
type ChartType =
| "column" | "groupedColumn" | "stackedColumn" | "normalizedColumn"
| "bar" | "groupedBar" | "stackedBar" | "normalizedBar"
| "line" | "scatter" | "bubble"
| "pie" | "doughnut"
| "area" | "stackedArea" | "normalizedArea"
| "histogram" | "columnLineCombo" | "areaColumnCombo"
| "customCombo";
// Chart options interface
interface ChartOptions {
title?: {
text?: string;
fontFamily?: string;
fontSize?: number;
color?: string;
};
legend?: {
position?: "top" | "bottom" | "left" | "right";
enabled?: boolean;
};
axes?: AxisOptions[];
series?: SeriesOptions[];
}
// Axis configuration
interface AxisOptions {
type: "category" | "number" | "time";
position: "top" | "bottom" | "left" | "right";
title?: {
text?: string;
enabled?: boolean;
};
label?: {
rotation?: number;
format?: string;
};
}
// Series configuration
interface SeriesOptions {
type: string;
xKey?: string;
yKey?: string;
fill?: string;
stroke?: string;
marker?: {
enabled?: boolean;
size?: number;
};
}
// Chart data interface
interface ChartData {
labels: string[];
datasets: ChartDataset[];
}
interface ChartDataset {
label: string;
data: number[];
backgroundColor?: string;
borderColor?: string;
}
// Update chart parameters
interface UpdateChartParams {
chartId: string;
chartType?: ChartType;
chartOptions?: ChartOptions;
}