Aggregation Chart

The classic chart view of a facet: a bar, pie or doughnut over an aggregation's items, with a click on a slice or bar reporting its label back so it can become a filter.

npm i chart.js

Minimal example

import { Component, signal } from "@angular/core";
import { AggregationChartComponent } from "@sinequa/atomic-angular/charts";
import type { AggregationLike } from "@sinequa/atomic-angular";

@Component({
  selector: "sample-component",
  imports: [AggregationChartComponent],
  template: `
    <div class="h-64">
      <AggregationChart [aggregation]="formats()" label="Documents" (itemSelected)="onSelect($event)" />
    </div>
  `,
})
export class SampleComponent {
  readonly formats = signal<AggregationLike | undefined>(undefined);

  protected onSelect(label: string) {
    console.log("Filter on", label);
  }
}

How it works

<AggregationChart> does three things only: toSeries() turns the aggregation into two parallel arrays (pure, testable, no dependency of its own), a computed() builds a Chart.js ChartConfiguration from them, and <ChartCanvas> owns the actual canvas lifecycle. It never fetches and never touches the DOM directly.

<ChartCanvas> — the shared lifecycle

Every chart in this entry point renders through the same <ChartCanvas>, which enforces four rules no caller has to think about: create the Chart.js instance only after the first render (a canvas created earlier measures as 0×0); always destroy it on teardown; rebuild when the chart type changes (Chart.js cannot swap controllers on a live instance); and rebuild when the color theme flips (Chart.defaults is read once, at construction).

The host must have a resolved height — Chart.js measures the canvas' parent box, and a blank chart is almost always a container with no height (class="h-64" above).

Options

Pitfalls

What's next