Dot Plot Chart

Dot plot component: every point placed along one value axis, with points that share a value — or fall in the same binWidth bin — stacked into a column above it. It shows how values are spread out while keeping each item visible, hoverable and clickable, and a point can be drawn as its own image. Takes the same series-of-points data as the Plot Chart: a point's value is its position on the axis, its key its name, and its series its color. Points without a numeric value, and hidden series and points, are left out.

Try it

A month of daily highs, one mark per day, grouped by sky. The controls edit the chart's config live; each field is described in the Configuration table.

binWidthvalues within 2° stackimageseach day drawn as its weather

Daily highs in June

Change the settings above and it redraws.

const config: PcacDotPlotChartConfig = {
  // Series, each holding its points: value = position on the axis, key = its name.
  data: [
    { key: 'Sunny', value: null, hide: false, data: [
      { key: 'June 1', value: 81, hide: false, data: [], image: 'sun.svg' },
      ...
    ] },
    ...
  ],
  xAxis: { domainMin: 50, domainMax: 90, label: 'Daily high (°F)', showGrid: true },
  binWidth: 2,
  pointImage: { maxWidth: 22, maxHeight: 22 },
};

Markup

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

API

import { PcacDotPlotChart, PcacDotPlotChartConfig } 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.
value axis	On a dot plot `xAxis` is the value axis. domainMin / domainMax fix its span; without them it spans the data, rounded out to nice ticks. format formats its ticks and the tooltip's value, and every label, sub label, tick and grid setting applies. There is no y axis — a column's height is a count of marks, not a value — so yAxis is ignored.
binWidth	Group values into bins this wide, in the axis's units, and stack each bin at its center. Bins start at `xAxis.domainMin`, or 0 without one. Unset, only equal values stack.
dotRadius	Radius of a point's dot in pixels. Default 6. A hovered dot grows by 2 and fills with its series' color.
gap	Space between stacked marks in pixels. Default 2.
pointImage	Bounding box (maxWidth / maxHeight) for points with an image, drawn in place of their dot, as on the plot chart. When the tallest column wouldn't fit the chart's height, every mark shrinks evenly until it does, so nothing is cut off.
colorOverride	Series colors, any CSS color, in place of the theme palette, one per series in order. Repeated when there are more series than colors.

Events

Binding	Description	Payload
(dotClicked)="onClicked($event)"	Emitted when a dot or image 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