Plot Chart

Displays each series as standalone points, with no connecting line or fill.

Readings, zoomable along x

Point images

Set image on a data point to draw it in place of the dot, sized by the config's pointImage box. Points without an image keep their dot.

Weather by hour

Points that share a coordinate

Set pointFanOut to spread points that would be drawn on top of one another around their shared coordinate, so each stays visible and hoverable; {} takes every default. An anchor dot marks the true value. Whether or not it's on, a hovered point's tooltip context lists the others at its coordinate in coincident - hover a fanned-out point below. The pair at the bottom-left corner shows a ring at the edge of the domain: it's moved back inside the plot so neither point hangs over an axis by more than half its image, with the anchor still on the coordinate. The controls below edit the chart's pointFanOut live; each field is described in the table further down.

pointFanOutongap4pxradiusauto (from gap)showAnchorspokeColoranchorColor

Weather by hour, fanned out

Point ranges

When a point stands for the middle of a range, give it a range with an x and / or y{ min, max }, and set pointRange on the config to draw it; {} takes every default. Works the same on the plot, line and area charts. Ranges follow zoom, and a hovered point's range comes forward. The chart draws no numbers for them - the tooltip below reads point.range itself. Some points here have both ranges, some only one and some none.

chartstyleshowfaintOpacity0.2color

Readings with ranges

Markup

<pcac-plot-chart [config]="config" (dotClicked)="onClicked($event)"/>

API

import { PcacPlotChart, PcacTooltipDirective } from '@pioneer-code/pioneer-charts';

Configuration

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. Give the element you wrap the chart in a definite height — an explicit height, or a flex/grid track that resolves to one. The chart stretches itself to fill it. If that wrapper is auto-height, there is nothing to fill and the chart falls back to height. The chart keeps filling as the container resizes, so this works with collapsing sidebars, tabs and window resizes.
xAxis / yAxis	Per-axis settings, one `PcacAxisConfig` for each axis. Every field is optional; omit the whole object for a default axis. See the Axis Styling guide for a live demo. hide — if true, the axis isn't drawn at all and the margins it would have occupied go to the plot (left and top for the y axis, bottom and right for the x axis); the chart's overall size doesn't change. Default false. showGrid — draw grid lines from this axis's ticks (or, on a category axis, from each category) across the plot: horizontal lines for the y axis, vertical for the x. Left unset, each chart keeps the grid it has always drawn — the y axis's on vertical bar and line/area/plot charts, the x axis's on the horizontal bar chart — and no other. Set it to turn either grid on or off. gridColor — any CSS color for this axis's grid lines, in place of the theme's `$gray-200`. Only shows while that grid is drawn (it doesn't turn the grid on). Applied as the `--pcac-grid-color` custom property on the grid group; a stylesheet can set the same property on an ancestor instead. ticks — requested number of ticks (a hint to D3, so the exact count can differ), and the number of grid lines. Ignored by a category axis, which has one tick per category. Default 5. tickSize — length in pixels of the small tick marks. Marks are not drawn unless this is set, so setting a size is also what turns them on (6 is D3's usual length); `0` keeps them off but pulls the labels in to the axis. Labels follow the marks and the chart's margins grow or shrink by the same amount, so the plot area shrinks to make room rather than pushing labels off the edge. Stroked with the theme's `$gray-900` via `.pcac-axis-tick-marks .tick line`, unless tickColor is set. tickColor — any CSS color for the tick marks. Only shows once tickSize has turned the marks on. Applied as `--pcac-axis-tick-color` on the axis group. tickLabelColor — any CSS color for the tick labels (the values along the axis), which otherwise follow the page's text color (`currentColor`). Applied as `--pcac-axis-tick-label-color` on the axis group. showLine — if true, draw a solid line along the axis itself (with D3's short end-caps). Independent of the tick marks. Default false. Stroked with the theme's `$gray-900` via `.pcac-axis-line .domain`, unless lineColor is set. lineColor — any CSS color for the axis line. Only shows with showLine on. Applied as `--pcac-axis-line-color` on the axis group. label — a title for the axis, drawn centered along it just inside the chart's edge (below the tick labels for the x axis; rotated to read bottom-to-top, left of them, for the y axis). The margin grows by 18px to make room, shrinking the plot area. Not drawn on a hidden axis. Styled by the theme's `.pcac-axis-label` rule. labelColor — any CSS color for the label, in place of the theme's `$gray-700`. Applied as `--pcac-axis-label-color` on the axis group. subLabels — `{ min?, mid?, max? }`: up to three short labels placed by position along the axis, in their own row just outside the tick labels (and inside the label, if there is one). min is aligned to the axis's start, mid centered, max to its end, so they never spill past the axis; on the y axis they read bottom-to-top with min at the bottom. The margin grows by 16px when any is set. Not drawn on a hidden axis. Styled by the theme's `.pcac-axis-sub-label` rule. subLabelColor — any CSS color for all of the subLabels, in place of the theme's `$gray-600`. Applied as `--pcac-axis-sub-label-color` on the axis group. format — a `PcacFormatEnum`: how this axis's values are shown in its tick labels and in the default tooltip, and on the line/area/plot charts' x axis also how a point's key maps to an x position. What each value does is chart-specific; see the rows below. Default None. Ignored by a category axis. domainMin / domainMax — the axis's domain, independent of the data. Defaults 0 and 100. Which axes read them is chart-specific (see the rows below): a bar chart's value axis reads only domainMax, and the line/area/plot charts' x axis reads them only under the Decimal and DateTime formats.
yAxis.domainMin	Floor of the y-axis domain. Default is 0.
yAxis.domainMax	Ceiling of the y-axis domain. Default is 100.
yAxis.format	Formats the y-axis tick labels, the hover crosshair's value and the value shown in a point's tooltip. Percentage — values are fractions: `0.25` reads `25%` on the ticks and in the tooltip alike. Decimal — plain numbers with thousands separators (`1,500`, `0.05`), with as many decimals as the tick step needs. OneDayHours — a 12 hour clock, as described for the x axis below. Minutes — ticks get an `m` suffix. Fahrenheit — ticks and the tooltip get an `F` suffix. Anything else (the default) leaves the ticks and tooltip unformatted.
xAxis.format	Controls both how each point's `key` is mapped to an x position and how the x-axis tick labels are formatted. None / DatasetLength (the default, and the fallback for any value not listed here) — points are positioned by their index within their series, spaced evenly across the width; `key` is only used for the tooltip. The axis runs from 0 to the length of the first series minus one, with plain numeric tick labels. Decimal — each point's `key` is a number used directly as its x value, on an axis running from xAxis.domainMin to xAxis.domainMax. Tick labels are plain numbers with thousands separators (`1,500`, `0.05`), with as many decimals as the tick step needs — so zooming in adds precision rather than repeating labels. DateTime — each point's `key` is parsed with `new Date(key)` (an ISO string or a timestamp) and plotted on a time axis running from xAxis.domainMin to xAxis.domainMax, which are required. Tick labels use D3's default date/time formatting, and the tooltip shows the key as a localized date and time. OneDayHours — positions points by index like DatasetLength, but labels the ticks as a 12 hour clock: 0 = 12am, 1 = 1am, 13 = 1pm, 23 = 11pm, 24 = 12am. A tick between hours shows its minutes (2.5 = 2:30am). The data is expected to be one point per hour, in order from hour 0. Percentage, Minutes, Fahrenheit — position by index like DatasetLength, labelling the ticks the same way as on the y axis: Minutes and Fahrenheit add an `m` or `F` suffix, and Percentage reads each tick as a fraction, so it only suits an axis whose values run 0 – 1.
xAxis.domainMin	Start of the x-axis domain. Only used when xAxis.format is Decimal (a number, default 0) or DateTime (anything `new Date()` accepts; required). Ignored by the index-based formats, which size the axis from the data.
xAxis.domainMax	End of the x-axis domain. Same rules as xAxis.domainMin; the Decimal default is 100.
enableEffects	If true, hovering the chart shows a vertical crosshair with the interpolated value of every line or area at that x position. Default is true when the config is created with `new`; an object literal (or JSON) that omits it gets no effects.
enableZoomX	If true, the chart can be zoomed along the x-axis with the mouse wheel (1x to 10x) and panned by dragging, staying within the original domain; lines, areas, points, the x-axis and its grid all follow. Default is false.
enableZoomY	The same along the y-axis: zoom (1x to 10x) and pan within the y domain, with the y-axis and its grid following. Independent of `enableZoomX` — set either or both. With only one on, the other axis just stays put during a gesture. Default is false. A zoom survives the chart redrawing — a new config, a series toggled in a legend, a resize — and is dropped when zoom is turned off or the zoomable axes change.
colorOverride	Array of hex color codes, one per series in order, used instead of the theme palette for that series' line/area and dots. Series beyond the array's length get no color, so supply one entry per series when using it. Omitted or empty, the theme palette is used.
pointImage	Bounding box for point images: `{ maxWidth: number, maxHeight: number }`, both defaulting to 16. A data point with an `image` (a URL or data URI) is drawn as that image instead of a dot, scaled to fit inside this box with its aspect ratio preserved and centered on the point. It gets the same tooltip and `(dotClicked)` behavior as a dot (only the hover enlarge effect is dot-only).
pointRange	Draw each point's range (on the innermost data: `range: { x?: { min, max }, y?: { min, max } }`, where `x` is read like the point's key for the x axis' format — a number, a date, or an index for the index-based formats; a `min` above its `max` is read the other way round, and one equal to it as no range on that axis). Plot, line and area charts. Off when omitted; `{}` turns it on with the defaults below. Ranges sit above the lines and areas and below the points, on the point's true coordinate (a fanned-out point's range stays on its anchor), clipped to the plot and following zoom. Nothing is labeled; a custom tooltip gets the point, range included. There's a live demo of every option, on all three chart types, on the Plot Chart page. style — `whiskers` (error bars with caps, the default), `box` (a rectangle over the x range by the y range; a thin strip with only one) or `fade` (strongest at the value and fading to the range's edges: an oval glow with both ranges, a bar with one). show — `hover` (only the hovered point's range), `faint` (every range at faintOpacity, the hovered one at full strength; the default) or `always` (every range at full strength, the others dimmed while one is hovered). faintOpacity — resting opacity under `faint`, 0 – 1. Default 0.2. color — any CSS color for every range, in place of each series' own. Applied as the `--pcac-point-range-color` custom property on the chart's `.point-ranges` group, which a stylesheet can set on an ancestor instead.
pointFanOut	Plot chart only. Spread points that share a coordinate (same x position and value) around it instead of drawing them on top of one another, where only the last series' point shows and only it can be hovered. Off when omitted; `{}` turns it on with the defaults below. Each group is placed evenly around a ring on the shared coordinate — a pair straight up and down, larger groups clockwise from the top, in series order. A ring at the edge of the domain is shifted back inside the plot area so that no member hangs over an axis by more than half its image (or dot), the same as a lone point there; the anchor stays on the true coordinate and its spokes reach the moved members. Zoom moves a fanned-out group as one. Every point keeps its true key / value in the tooltip, whose context also lists the others at the coordinate in coincident (see Custom Tooltip). gap — space in pixels between neighboring points on the ring, measured between their image boxes (or hovered dots). Each group gets the smallest ring at which its members sit this far apart. Default 4. radius — a fixed ring radius in pixels for every group, instead of sizing each by gap. Unset by default. showAnchor — draw a dot on the shared coordinate with a spoke to each fanned-out point, so the true value stays marked. Default true. Styled by the theme's `.fan-out-anchor` and `.fan-out-spoke` rules. spokeColor / anchorColor — any CSS color for the spokes and the anchor dot, in place of the theme's `$gray-400` and `$gray-600`. Applied as the `--pcac-fan-out-spoke-color` / `--pcac-fan-out-anchor-color` custom properties on the chart's `.fan-outs` group, which a stylesheet can set on an ancestor instead. Nothing to color unless showAnchor is on.

Events

Binding	Description	Payload
(dotClicked)="onClicked($event)"	Emitted when a point (its dot, or its image) is clicked.	PcacData