phoebe-labs-charting-tools

Angular standalone charting components powered by D3.js. Ships four chart components, their data models, and a tokenized (CSS-variable) theming system.

Published on the public npm registry: phoebe-labs-charting-tools.

Compatibility

| Peer dependency | Supported range | | ------------------- | --------------- | | @angular/core | ^17.3.0 | | @angular/common | ^17.3.0 | | d3 | ^7.9.0 |

All components are standalone — no NgModule import required.

Installing

It's a public package — no registry config or auth needed:

npm install phoebe-labs-charting-tools
npm install d3@^7.9.0    # peer dependency (Angular peers already present)

Alternative: local tarball

# In this workspace
npm run pack:lib    # -> dist/phoebe-labs-charting/phoebe-labs-charting-tools-<version>.tgz

# In the consuming project
npm install /abs/path/to/phoebe-labs-charting-tools-<version>.tgz
npm install d3@^7.9.0

Prefer the registry or tarball over npm link — link is unreliable with Angular peer-dep resolution and dual-package hazards.

Quick start

import { Component } from '@angular/core';
import {
  PlcBarChartComponent,
  PlcLineChartComponent,
  PlcPieChartComponent,
  PlcDiamondScatterChartComponent,
  BarChartDataPoint,
} from 'phoebe-labs-charting-tools';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [
    PlcBarChartComponent,
    PlcLineChartComponent,
    PlcPieChartComponent,
    PlcDiamondScatterChartComponent,
  ],
  template: `
    <plc-bar-chart  [data]="series" [width]="480" [height]="280"></plc-bar-chart>
    <plc-line-chart [data]="series"></plc-line-chart>
    <plc-pie-chart  [data]="series"></plc-pie-chart>
  `,
})
export class DashboardComponent {
  series: BarChartDataPoint[] = [
    { label: 'Q1', value: 42 },
    { label: 'Q2', value: 58 },
    { label: 'Q3', value: 35 },
  ];
}

Components

<plc-bar-chart> — PlcBarChartComponent

| Input | Type | Default | Description | | -------- | --------------------- | ------- | ------------------------ | | data | BarChartDataPoint[] | [] | Labelled values to plot. | | width | number | 360 | SVG width (px). | | height | number | 240 | SVG height (px). |

<plc-line-chart> — PlcLineChartComponent

| Input | Type | Default | Description | | -------- | --------------------- | ------- | ------------------------ | | data | BarChartDataPoint[] | [] | Labelled values to plot. | | width | number | 360 | SVG width (px). | | height | number | 240 | SVG height (px). |

<plc-pie-chart> — PlcPieChartComponent

| Input | Type | Default | Description | | -------- | --------------------- | ------- | ------------------------ | | data | BarChartDataPoint[] | [] | Labelled values to plot. | | width | number | 360 | SVG width (px). | | height | number | 260 | SVG height (px). |

<plc-diamond-scatter-chart> — PlcDiamondScatterChartComponent

A square XY scatterplot rotated -45° (the "diamond"), with an optional density contour over the population cloud and a highlighted apex point.

| Input | Type | Default | Description | | ------------------ | -------------------- | -------- | --------------------------------------------------------------------------- | | scatterPlotData | ScatterPoint[] | [] | Full point cloud (population + the highlighted point). | | highlightedPoints| HighlightedPoint[] | [] | Which point(s) are the apex dot, and the colour to paint it/its arms. | | domainMax | number \| undefined| auto | Pins the top of the shared axis domain (e.g. 125). Omitted = nice ceiling.| | externalLabels | boolean | false | Render the two titles + values as an HTML header row above the SVG. | | includeTransitions| boolean | false | Animate in place on data change (points slide, axes rescale, contour morphs).| | width | string | '100%' | Host width (CSS). | | height | string | '100%' | Host height (CSS). |

import {
  PlcDiamondScatterChartComponent,
  ScatterPoint,
  HighlightedPoint,
} from 'phoebe-labs-charting-tools';

const points: ScatterPoint[] = [
  { id: 'a', values: [80, 65], labels: ['vs RHP', 'vs LHP'] },
  { id: 'b', values: [55, 90], labels: ['vs RHP', 'vs LHP'] },
];
const highlight: HighlightedPoint = { id: 'a', color: '#0a3161' };

<plc-diamond-scatter-chart
  [scatterPlotData]="points"
  [highlightedPoints]="[highlight]"
  [domainMax]="125"
  [includeTransitions]="true">
</plc-diamond-scatter-chart>

Data models

Exported from the package entry point:

• BarChartDataPoint — { label: string; value: number }
• ScatterPoint — { id, values: [number, number], labels: [string, string], percentiles?, relationship? }
• HighlightedPoint — { id: string; color: string }
• DiamondAxis — resolved { min, ticks } for the shared diamond axis
• DiamondScatterModel — d3/Angular-free class owning axis/tick selection, geometry scale, and density-core partitioning (unit-testable)

Theming

Charts read their colours and typography from CSS custom properties. The type-safe map of those variable names is exported as D3_CHART_CSS_VARS.

Pull in the bundled token + theme definitions from your global stylesheet:

// styles.scss (consuming app)
@use 'phoebe-labs-charting-tools/src/lib/styles' as plc;

This defines defaults for variables such as --plc-d3-series-primary, --plc-d3-axis-text, the pie palette (--plc-d3-pie-1 … --plc-d3-pie-5), and density colours. Override any of them on :root (or a scoped selector) to retheme:

:root {
  --plc-d3-series-primary: #0a3161;
  --plc-d3-pie-1: #0a3161;
  --plc-d3-axis-text: #444;
}

License

MIT © Phoebe Labs