demo D269

Slope chart in Angular

Two points per line so the direction of change from one period to the next is the message

type: 'slope', x, series, y

This draws two points per line so the direction of change from one period to the next is the message. It makes rise and fall between two moments obvious across many items, so the slope of each line carries the story.

Building…

Loading a live grid…

This is the Angular version. A standalone component takes the whole configuration through one config input, surfaces grid events as outputs, and exposes the live grid on a getter for anything the inputs do not cover.

The configuration

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { createChart } from '@toclocoinc/lattice-grid/modules/charts';
import '@toclocoinc/lattice-grid/modules/chart-slope';  // opt in to the slope type
import { LatticeGridComponent, provideLattice } from '@toclocoinc/lattice-grid/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template:
    '<div id="chart" style="height:340px"></div>' +
    '<lattice-grid [config]="grid" style="display:block;height:320px;margin-top:14px"></lattice-grid>',
})
export class AppComponent implements AfterViewInit {
  @ViewChild(LatticeGridComponent) gridRef!: LatticeGridComponent;

  grid = {
    rowKey: 'id',
    columns: [
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'period', title: 'Year', filter: { type: 'set' } },
      { field: 'score', title: 'Score', type: 'number', total: 'avg' },
    ],
    rows: [/* two rows a region, one per year: region, period, score */],
  };

  ngAfterViewInit() {
    createChart({ grid: this.gridRef.grid, container: '#chart', type: 'slope', x: 'period', series: 'region', y: 'score', title: 'Score, year on year' });
  }
}

bootstrapApplication(AppComponent, {
  providers: [provideLattice({ createGrid })],
});