Grid to Chart

Create Chart.js visualizations from DataGrid rows, selected rows, selected columns, full-grid metrics, or sparklines.

Grid to Chart

Overview of the reusable Grid to Chart APIs for row selection, metric selection, full-grid aggregation, and inline sparklines

Use the composite widget to keep grid state and chart output synchronized from one config object.

Chart type:

Loading interactive example…

Grid to Chart basics

Integration steps

Import NgbGridChartComponent when you want the grid and chart to stay in sync inside one composite widget.
Use NgbDataChartComponent for chart-only rendering and NgbDataSparklineComponent for inline row trends.
Define one dimension plus one or more NgbDataMetricDef entries; then choose a mode such as row-selection, column-selection, full-grid, or sparklines.
Bind a reusable NgbGridChartConfig object so the same dataset and metric definitions can power either the composite grid+chart widget or a standalone chart.

Composite — grid beside chart (ngb-grid-chart)

      import {
  NgbGridChartComponent,
  NgbGridChartConfig,
  NgbDataMetricDef,
} from '@angular-bootstrap/ngbootstrap';

@Component({
  imports: [NgbGridChartComponent],
  template: `
    <ngb-grid-chart [config]="config"></ngb-grid-chart>
  `,
})
export class ProductSalesChartOverview {
  readonly metrics: NgbDataMetricDef<ProductRow>[] = [
    { key: 'q1Sales', label: 'Q1 Sales', accessor: (row) => row.q1Sales, color: '#4F7DF3' },
    { key: 'q2Sales', label: 'Q2 Sales', accessor: (row) => row.q2Sales, color: '#F1645D' },
    { key: 'q3Sales', label: 'Q3 Sales', accessor: (row) => row.q3Sales, color: '#60C56E' },
    { key: 'q4Sales', label: 'Q4 Sales', accessor: (row) => row.q4Sales, color: '#F3B13E' },
  ];

  readonly config: NgbGridChartConfig<ProductRow> = {
    mode: 'row-selection',
    rows: this.products,
    dimension: { key: 'product', label: 'Product', accessor: (row) => row.product },
    subDimension: { key: 'category', label: 'Category', accessor: (row) => row.category },
    metrics: this.metrics,
    rowSelectionMetrics: this.metrics,
    selectedRowIds: [1, 3, 4],
    chartType: 'bar',
    chartTitle: 'Quarterly Sales by Product',
  };
}

Standalone chart widget (ngb-data-chart / sparkline)

      import {
  NgbDataChartComponent,
  NgbDataSparklineComponent,
  ngbBuildColumnSelectionChartData,
} from '@angular-bootstrap/ngbootstrap';

// Standalone chart widget
chartConfig = ngbBuildColumnSelectionChartData(this.products, {
  dimension: { key: 'product', label: 'Product', accessor: (row) => row.product },
  metrics: this.metrics,
  chartType: 'bar',
  title: 'Metrics by Product',
});

// Inline sparkline widget
<ngb-data-sparkline
  [values]="[row.q1Sales, row.q2Sales, row.q3Sales, row.q4Sales]"
  [width]="112"
  [height]="28"
></ngb-data-sparkline>