Grid to Chart Row Selection

Turn selected DataGrid rows into chart series for comparing product or entity metrics.

Grid to Chart

Select specific rows — each selected row becomes a series in the chart

Select rows to plot their quarterly sales as series on the chart.

3 selected

Chart type:

Loading interactive example…

Row selection — grid beside chart

Integration steps

Install Chart.js and register it once in your app (the library registers Chart.js when you import chart components).
Import standalone NgbGridChartComponent (or NgbDataChartComponent for chart-only).
Provide rows, dimension, metrics, and initial selectedRowIds; bind (selectionChange) to keep chart series in sync.

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

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

@Component({
  imports: [NgbGridChartComponent],
  template: `
    <ngb-grid-chart
      [config]="config"
      (selectionChange)="onSelection($event)"
    ></ngb-grid-chart>
  `,
})
export class SalesChartDemo {
  readonly config: NgbGridChartConfig<ProductRow> = {
    mode: 'row-selection',
    rows: this.products,
    dimension: { key: 'product', label: 'Product', accessor: (r) => r.product },
    subDimension: { key: 'category', label: 'Category', accessor: (r) => r.category },
    metrics: this.allMetrics,
    rowSelectionMetrics: this.quarterMetrics,
    selectedRowIds: [1, 3, 4],
    chartType: 'bar',
    chartTitle: 'Quarterly Sales by Product',
  };
}

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

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

@Component({
  imports: [NgbDataChartComponent],
  template: `<ngb-data-chart [config]="chartConfig"></ngb-data-chart>`,
})
export class StandaloneRowChart {
  chartConfig = ngbBuildRowSelectionChartData(this.selectedRows, {
    metrics: this.quarterMetrics,
    seriesLabel: (row) => row.product,
    chartType: 'bar',
    title: 'Quarterly Sales by Product',
  });
}