Grid to Chart Sparklines

Render inline sparkline charts in DataGrid cells to show row-level trends without leaving the table.

Grid to Chart

Inline mini-charts rendered directly inside table cells

Trend color

Loading interactive example…

Sparkline shows Q1→Q4 sales trend per product. Green = upward trend, red = downward.

Sparklines — inline trend in cells

Integration steps

Use mode: "sparklines" on ngb-grid-chart; the grid renders ngb-data-sparkline inside the trend column.
Provide sparkline.values(row) returning numeric series (e.g. quarterly sales).
For chart-only sparklines without the composite grid, import NgbDataSparklineComponent directly in your cell template.

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

      config = {
  mode: 'sparklines',
  rows: this.products,
  dimension: { key: 'product', label: 'Product', accessor: (r) => r.product },
  metrics: this.quarterMetrics,
  sparkline: {
    field: 'trend',
    values: (row) => [row.q1Sales, row.q2Sales, row.q3Sales, row.q4Sales],
    trendColor: true,
  },
  trailingColumns: [{ field: 'growthPct', header: 'Growth', type: 'number' }],
};

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

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

<ngb-data-sparkline
  [values]="[row.q1Sales, row.q2Sales, row.q3Sales, row.q4Sales]"
  [width]="112"
  [height]="30"
  [color]="trendColor(row)"
  ariaLabel="Quarterly trend"
></ngb-data-sparkline>