| 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.
|