Grid to Chart Full Grid

Chart full DataGrid datasets with metric and grouping controls plus summary ranking tables.

Grid to Chart

Chart the entire dataset with metric and grouping controls

Metric:Group by:

Chart type:

Loading interactive example…

Full grid — chart entire dataset

Integration steps

Use mode: "full-grid"; configure fullGrid.metric, fullGrid.dimension (group-by), and aggregate.
Project a summary table or KPIs with ng-content select="[gridChartSummary]" beside the chart.
Standalone: call ngbBuildFullGridChartData with the same metric and dimension definitions.

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

      <ngb-grid-chart [config]="config">
  <div gridChartSummary>
    <!-- ranking table, totals, etc. -->
  </div>
</ngb-grid-chart>

config = {
  mode: 'full-grid',
  rows: this.products,
  dimension: { key: 'product', label: 'Product', accessor: (r) => r.product },
  metrics: this.salesMetrics,
  chartType: 'bar',
  fullGrid: {
    dimension: { key: 'category', label: 'Category', accessor: (r) => r.category },
    metric: this.revenueMetric,
    aggregate: 'sum',
    sort: 'desc',
  },
};

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

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

chartConfig = ngbBuildFullGridChartData(this.products, {
  dimension: { key: 'product', label: 'Product', accessor: (r) => r.product },
  metric: this.revenueMetric,
  aggregate: 'sum',
  chartType: 'bar',
  sort: 'desc',
});