Pioneer Charts

Pioneer Charts is an Angular library for building beautiful, customizable, and responsive data visualizations. It leverages D3.js for rendering and provides bar, line/area, plot, pie, donut, dot plot and proximity charts, plus a legend component.

Documentation

Guides, the API reference, live examples, and theming instructions all live on the docs site:

https://pioneercharts.com

Charts

Each chart has its own page with live examples, markup and its full configuration:

• Angular Bar Chart - vertical and horizontal; single, grouped and stacked, with thresholds
• Angular Line Chart - with zoom, hover effects, point images and ranges
• Angular Area Chart - with zoom, hover effects, point images and ranges
• Angular Scatter Plot Chart - with zoom and fan-out for overlapping points
• Angular Pie Chart - animated, with click events for each slice
• Angular Donut Chart - with a total or any label in its center
• Angular Dot Plot Chart - values stacked into columns along one axis
• Angular Proximity Chart - one item in the middle, its closest matches around it
• Legend - a chart's series, with click events

Or see them all together on the chart examples page.

Built with Pioneer Charts

• Down Lane Motion - a bowling ball catalog whose reaction, tech specs, look-alike, arsenal ladder and stats pages are all Pioneer Charts plot, proximity, dot plot, bar and donut charts.

Features

• Bar (vertical and horizontal), line, area, plot, pie, donut, dot plot and proximity charts, plus a legend.
• Beautiful default theme, customizable via CSS or by overriding the source Sass variables (theming guide).
• Strongly typed configuration contracts.
• Outputs for user interaction (bar, slice, dot, and legend clicks), plus the size a dot plot fitted its marks to.
• Custom tooltips via a projected template.
• Standalone components — no NgModules required.
• Charts automatically re-render when their container resizes.
• Zoneless-compatible.
• Open source and actively maintained.

Requirements

• Angular ^22.1.0 (with RxJS ^7.4.0, which Angular itself needs)

The D3 modules the charts use are installed with the package, so there's nothing else to add.

Installation

npm install --save @pioneer-code/pioneer-charts

Then follow Getting Started on the docs site to import the components and theme into your app.

Contributing

Bug reports, feature requests, and pull requests are welcome — see CONTRIBUTING.md for the guidelines.

This repository is an Angular workspace containing the library (projects/pioneer-charts) and the docs site (projects/pioneer-charts-docs). To work on it locally:

npm ci
npm run build:lib      # build the library into dist/pioneer-charts - the docs site uses that build
npm start              # serve the docs site
npm run lint
npm test               # unit tests for the library and the docs site (vitest)

The docs site imports the library from dist/pioneer-charts, not its source, so it needs build:lib before its first npm start. While working on both, run npm run start-components alongside npm start to rebuild the library on every change.

Every push and pull request to main is verified by GitHub Actions (lint, tests, and both builds).

Releasing

Releases are published to npm by the Publish workflow, never from a local machine. Merging a pull request that bumps version in projects/pioneer-charts/package.json into main runs the full test suite and then waits for a maintainer to approve the deployment; once approved, the tested build is published to npm, a matching v<version> tag and GitHub Release are created, and the docs site is deployed.

License

MIT © Chad Ramos & Pioneer Code