Proximity chart component: one item in the middle and others around it, each closer in or further out by its value — how similar it is to the center, or how far from it. It answers "what's nearest to this?" at a glance, and any item, the center included, can be drawn as its own image.
Cities by how similar their climate is to Portland's, made-up scores from 0 to 1. The controls edit the chart's config live; each field is described in the Configuration table.
Change the settings above and it redraws.
const config: PcacProximityChartConfig = {
center: { key: 'Portland', value: null, hide: false, data: [] },
// Closest first: the first item sits at 12 o'clock, the rest clockwise.
data: [
{ key: 'Seattle', value: 0.96, hide: false, data: [] },
{ key: 'Vancouver', value: 0.94, hide: false, data: [] },
...
],
closeValue: 1, // identical: right up against the center
farValue: 0.5, // on the outer rim
format: PcacFormatEnum.Percentage,
showLabels: true,
rings: [0.9, 0.8, 0.7, 0.6],
itemSize: 28,
centerSize: 44,
};<pcac-proximity-chart [config]="config" (itemClicked)="onClicked($event)" />
import { PcacProximityChart, PcacProximityChartConfig } from '@pioneer-code/pioneer-charts';| Name | Description |
|---|---|
| data | Collection of PcacData objects. |
| height | Height of chart component. Default is 200px. |
| ariaLabel | What the chart shows, for screen readers — e.g. 'Sales by month, 2026'. The chart is announced as a group with this name, and each bar, slice or point inside it by its own key and value (see Accessibility). When omitted, its type is used: 'Bar chart', 'Pie chart', 'Line chart' and so on. |
| heightFull | If true, height is treated as a minimum height and the chart grows to fill its container whenever that container is taller. Default is false.
|
| center | The item the others are measured against, drawn in the middle: a key (its name) and optionally an image. Its value isn't used. |
| closeValue / farValue | The value that sits right up against the center, and the one on the outer rim; values in between are placed proportionally, and anything beyond either is held at it. Defaults 1 and 0, for a similarity from 0 to 1. For a distance, swap them: closeValue: 0, farValue: <largest distance>. |
| rings | Values to draw a faint dashed guide ring at, each labelled in format. None when omitted. |
| format | How values read on the ring labels, in the tooltip and to screen readers, as on an axis — e.g. Percentage. |
| showLabels | Write each item's key under it, and the center's under the center. Default false: names are in the tooltip either way. Keep it off for long names or a crowded ring. |
| showSpokes | Draw a faint line from the center to each item. Default true. |
| startAngle | Where the first item sits, in degrees clockwise from 12 o'clock. Default 0. Items go around clockwise in data order, evenly spaced, so put the closest first to have it at the top. |
| centerSize / itemSize | Size in pixels of the center's image (or twice its dot's radius) and of each item's. Defaults 64 and 40. Best with a handful to a dozen or so items; past that they crowd one another around the ring. |
| colorOverride | Dot colors, any CSS color, for items without an image: the center takes the first, then the items in data order. Repeated when there are more items than colors. |
| Binding | Description | Payload |
|---|---|---|
| (itemClicked)="onClicked($event)" | Emitted when an item or the center is clicked, or activated with Enter or Space. It emits a copy of the item; set its id to trace it back to your record (see Data Contract). | PcacData |