Grid to Chart Column Selection

Toggle DataGrid metric columns and chart them across every row in the current dataset.

Grid to Chart

Toggle columns (metrics) to compare across all products

Toggle columns to choose which metrics are charted across all products.

Chart type:

Loading interactive example…

Column selection — metrics as chart series

Integration steps

Use mode: "column-selection" on ngb-grid-chart; users toggle metrics via selectedMetricKeys.
Define one NgbDataMetricDef per column you want chartable; inactive columns stay visible but muted in the grid.
For a custom grid layout, build chart data with ngbBuildColumnSelectionChartData and render ngb-data-chart beside your datagrid.

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

      @Component({
  imports: [NgbGridChartComponent],
  template: `<ngb-grid-chart [config]="config"></ngb-grid-chart>`,
})
export class ColumnChartDemo {
  config: NgbGridChartConfig<ProductRow> = {
    mode: 'column-selection',
    rows: this.products,
    dimension: { key: 'product', label: 'Product', accessor: (r) => r.product },
    metrics: this.salesMetrics,
    selectedMetricKeys: ['q1Sales', 'q2Sales', 'q3Sales', 'q4Sales'],
    chartType: 'bar',
    chartTitle: 'Metrics by Product',
  };
}

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

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

chartConfig = ngbBuildColumnSelectionChartData(this.products, {
  dimension: { key: 'product', label: 'Product', accessor: (r) => r.product },
  metrics: this.activeMetrics,
  chartType: 'bar',
  title: 'Metrics by Product',
});