# Options reference

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/docs/reference/options/ · Index for agents: https://westcoast-charts.com/llms.txt · Source: library guide, commit 95f093ba

Every option the type declarations know, grouped by top-level key. The same object is accepted as
`WestCoastChartsOptions` and, for code written against ApexCharts 4.x, as `ApexOptions`.

Notes:

- `a[]` in a path means "each entry of the array `a`".
- Included: the extra chart types of `west-coast-charts/types` (`plotOptions.sunburst`, ...) and the
  options of the features (`drilldown`, `trellis`, `highlightFilter`, `chart.link`, ...). The premium
  types (`plotOptions.sankey`, ...) are on the [Premium options](https://westcoast-charts.com/docs/reference/premium-options/index.md) page.
- Feature options are typed to their documented keys; each feature guide in `docs/features/` has the details.
- Descriptions come from the comments in the `.d.ts` files. Options without a comment show an empty
  description; their behaviour is the ApexCharts 4.7.0 behaviour.

## Top-level keys

- [`annotations`](#annotations)
- [`chart`](#chart)
- [`colors`](#colors)
- [`dataLabels`](#datalabels)
- [`fill`](#fill)
- [`forecastDataPoints`](#forecastdatapoints)
- [`grid`](#grid)
- [`labels`](#labels)
- [`legend`](#legend)
- [`markers`](#markers)
- [`noData`](#nodata)
- [`plotOptions`](#plotoptions)
- [`responsive`](#responsive)
- [`series`](#series)
- [`states`](#states)
- [`stroke`](#stroke)
- [`subtitle`](#subtitle)
- [`theme`](#theme)
- [`title`](#title)
- [`tooltip`](#tooltip)
- [`xaxis`](#xaxis)
- [`yaxis`](#yaxis)
- [`wcc`](#wcc)
- [`drilldown`](#drilldown)
- [`highlightFilter`](#highlightfilter)
- [`trellis`](#trellis)

## annotations

Lines, ranges, points, texts and images drawn on top of the plot at data coordinates.

Type: `ApexAnnotations`

| Option | Type | Description |
| --- | --- | --- |
| `annotations.yaxis` | <code>YAxisAnnotations[]</code> | Horizontal lines or bands at y values. |
| `annotations.yaxis[].scope` | <code>string \| number \| Array&lt;string \| number&gt; \| ((key: any) =&gt; boolean)</code> | trellis: panel key(s) or a function of the key; the annotation is drawn only on matching panels. |
| `annotations.yaxis[].wcc` | <code>object</code> | West Coast Charts: annotation extras. |
| `annotations.yaxis[].wcc.tooltip` | <code>string \| ((annotation: any) =&gt; string)</code> | Tooltip text shown on hover and focus, or a function of the annotation. |
| `annotations.yaxis[].id` | <code>number \| string</code> | Identifier added as a CSS class to the drawn elements; also the key for removing the annotation later. |
| `annotations.yaxis[].y` | <code>null \| number \| string</code> | Value on the y axis where the line is drawn. Default: `0`. |
| `annotations.yaxis[].y2` | <code>null \| number \| string</code> | End of a band: with y2 set the annotation fills the range from y to y2 instead of drawing a line. Default: `null`. |
| `annotations.yaxis[].strokeDashArray` | <code>number</code> | Dash length of the line; 0 draws it solid. Default: `1`. |
| `annotations.yaxis[].fillColor` | <code>string</code> | Fill colour of the band (used with y2). Default: `'#c2c2c2'`. |
| `annotations.yaxis[].borderColor` | <code>string</code> | Colour of the line, or the band outline. Default: `'#c2c2c2'`. |
| `annotations.yaxis[].borderWidth` | <code>number</code> | Line width in pixels. Default: `1`. |
| `annotations.yaxis[].opacity` | <code>number</code> | Opacity of the band fill (0 to 1). Default: `0.3`. |
| `annotations.yaxis[].offsetX` | <code>number</code> | Horizontal shift in pixels; it also extends the line width. Default: `0`. |
| `annotations.yaxis[].offsetY` | <code>number</code> | Vertical shift of the line or band in pixels. Default: `0`. |
| `annotations.yaxis[].width` | <code>number \| string</code> | Length of the line: a percentage of the plot width or a pixel value. Default: `'100%'`. |
| `annotations.yaxis[].yAxisIndex` | <code>number</code> | Index of the y axis whose scale positions the annotation. Default: `0`. |
| `annotations.yaxis[].label` | <code>AnnotationLabel</code> | Text label attached to the annotation. |
| `annotations.yaxis[].label.borderColor` | <code>string</code> | Border colour of the label box. Default: `'#c2c2c2'`. |
| `annotations.yaxis[].label.borderWidth` | <code>number</code> | Border width of the label box in pixels. Default: `1`. |
| `annotations.yaxis[].label.borderRadius` | <code>number</code> | Corner radius of the label box in pixels. Default: `2`. |
| `annotations.yaxis[].label.text` | <code>string \| string[]</code> | Label text; without text no label is drawn. |
| `annotations.yaxis[].label.textAnchor` | <code>string</code> | Horizontal anchor of the text: 'start', 'middle' or 'end'. Default: `'middle'` on x-axis annotations, `'end'` on y-axis annotations. |
| `annotations.yaxis[].label.offsetX` | <code>number</code> | Horizontal shift of the label in pixels. Default: `0`. |
| `annotations.yaxis[].label.offsetY` | <code>number</code> | Vertical shift of the label in pixels. Default: `0`. |
| `annotations.yaxis[].label.style` | <code>AnnotationStyle</code> | Text and box style of the label. |
| `annotations.yaxis[].label.style.background` | <code>string</code> | Fill colour of the label box. Default: `'#fff'`. |
| `annotations.yaxis[].label.style.color` | <code>string</code> | Text colour of the label. |
| `annotations.yaxis[].label.style.fontFamily` | <code>string</code> | Font family of the label; not set uses the chart font. |
| `annotations.yaxis[].label.style.fontWeight` | <code>string \| number</code> | Font weight of the label. Default: `400`. |
| `annotations.yaxis[].label.style.fontSize` | <code>string</code> | Font size of the label. Default: `'11px'`. |
| `annotations.yaxis[].label.style.cssClass` | <code>string</code> | Extra CSS class added to the label text. Default: `''`. |
| `annotations.yaxis[].label.style.padding` | <code>object</code> | Space between the text and the box edge, in pixels. |
| `annotations.yaxis[].label.style.padding.left` | <code>number</code> | Left padding in pixels. Default: `5`. |
| `annotations.yaxis[].label.style.padding.right` | <code>number</code> | Right padding in pixels. Default: `5`. |
| `annotations.yaxis[].label.style.padding.top` | <code>number</code> | Top padding in pixels. Default: `2`. |
| `annotations.yaxis[].label.style.padding.bottom` | <code>number</code> | Bottom padding in pixels. Default: `2`. |
| `annotations.yaxis[].label.position` | <code>string</code> | Where the label sits along the line: 'top', 'center' or 'bottom' on x-axis annotations; 'left', 'center' or 'right' on y-axis annotations. Default: `'top'` on x-axis annotations, `'right'` on y-axis annotations. |
| `annotations.yaxis[].label.orientation` | <code>string</code> | 'vertical' rotates an x-axis annotation label along the line; 'horizontal' keeps it level. Default: `'vertical'`. |
| `annotations.yaxis[].label.mouseEnter` | <code>Function</code> | Called with the annotation object when the pointer enters the label. |
| `annotations.yaxis[].label.mouseLeave` | <code>Function</code> | Called with the annotation object when the pointer leaves the label. |
| `annotations.yaxis[].label.click` | <code>Function</code> | Called with the annotation object when the label is clicked. |
| `annotations.xaxis` | <code>XAxisAnnotations[]</code> | Vertical lines or bands at x values. |
| `annotations.xaxis[].scope` | <code>string \| number \| Array&lt;string \| number&gt; \| ((key: any) =&gt; boolean)</code> | trellis: panel key(s) or a function of the key; the annotation is drawn only on matching panels. |
| `annotations.xaxis[].wcc` | <code>object</code> | West Coast Charts: annotation extras. |
| `annotations.xaxis[].wcc.tooltip` | <code>string \| ((annotation: any) =&gt; string)</code> | Tooltip text shown on hover and focus, or a function of the annotation. |
| `annotations.xaxis[].id` | <code>number \| string</code> | Identifier added as a CSS class to the drawn elements; also the key for removing the annotation later. |
| `annotations.xaxis[].x` | <code>null \| number \| string</code> | Position on the x axis: a category, number or timestamp matching `xaxis.type`. Default: `0`. |
| `annotations.xaxis[].x2` | <code>null \| number \| string</code> | End of a band: with x2 set the annotation fills the range from x to x2 instead of drawing a line. Default: `null`. |
| `annotations.xaxis[].strokeDashArray` | <code>number</code> | Dash length of the line; 0 draws it solid. Default: `1`. |
| `annotations.xaxis[].fillColor` | <code>string</code> | Fill colour of the band (used with x2). Default: `'#c2c2c2'`. |
| `annotations.xaxis[].borderColor` | <code>string</code> | Colour of the line, or the band outline. Default: `'#c2c2c2'`. |
| `annotations.xaxis[].borderWidth` | <code>number</code> | Line width in pixels. Default: `1`. |
| `annotations.xaxis[].opacity` | <code>number</code> | Opacity of the band fill (0 to 1). Default: `0.3`. |
| `annotations.xaxis[].offsetX` | <code>number</code> | Horizontal shift of the line or band in pixels. Default: `0`. |
| `annotations.xaxis[].offsetY` | <code>number</code> | Vertical shift of the line or band in pixels. Default: `0`. |
| `annotations.xaxis[].label` | <code>AnnotationLabel</code> | Text label attached to the annotation. |
| `annotations.xaxis[].label.borderColor` | <code>string</code> | Border colour of the label box. Default: `'#c2c2c2'`. |
| `annotations.xaxis[].label.borderWidth` | <code>number</code> | Border width of the label box in pixels. Default: `1`. |
| `annotations.xaxis[].label.borderRadius` | <code>number</code> | Corner radius of the label box in pixels. Default: `2`. |
| `annotations.xaxis[].label.text` | <code>string \| string[]</code> | Label text; without text no label is drawn. |
| `annotations.xaxis[].label.textAnchor` | <code>string</code> | Horizontal anchor of the text: 'start', 'middle' or 'end'. Default: `'middle'` on x-axis annotations, `'end'` on y-axis annotations. |
| `annotations.xaxis[].label.offsetX` | <code>number</code> | Horizontal shift of the label in pixels. Default: `0`. |
| `annotations.xaxis[].label.offsetY` | <code>number</code> | Vertical shift of the label in pixels. Default: `0`. |
| `annotations.xaxis[].label.style` | <code>AnnotationStyle</code> | Text and box style of the label. |
| `annotations.xaxis[].label.style.background` | <code>string</code> | Fill colour of the label box. Default: `'#fff'`. |
| `annotations.xaxis[].label.style.color` | <code>string</code> | Text colour of the label. |
| `annotations.xaxis[].label.style.fontFamily` | <code>string</code> | Font family of the label; not set uses the chart font. |
| `annotations.xaxis[].label.style.fontWeight` | <code>string \| number</code> | Font weight of the label. Default: `400`. |
| `annotations.xaxis[].label.style.fontSize` | <code>string</code> | Font size of the label. Default: `'11px'`. |
| `annotations.xaxis[].label.style.cssClass` | <code>string</code> | Extra CSS class added to the label text. Default: `''`. |
| `annotations.xaxis[].label.style.padding` | <code>object</code> | Space between the text and the box edge, in pixels. |
| `annotations.xaxis[].label.style.padding.left` | <code>number</code> | Left padding in pixels. Default: `5`. |
| `annotations.xaxis[].label.style.padding.right` | <code>number</code> | Right padding in pixels. Default: `5`. |
| `annotations.xaxis[].label.style.padding.top` | <code>number</code> | Top padding in pixels. Default: `2`. |
| `annotations.xaxis[].label.style.padding.bottom` | <code>number</code> | Bottom padding in pixels. Default: `2`. |
| `annotations.xaxis[].label.position` | <code>string</code> | Where the label sits along the line: 'top', 'center' or 'bottom' on x-axis annotations; 'left', 'center' or 'right' on y-axis annotations. Default: `'top'` on x-axis annotations, `'right'` on y-axis annotations. |
| `annotations.xaxis[].label.orientation` | <code>string</code> | 'vertical' rotates an x-axis annotation label along the line; 'horizontal' keeps it level. Default: `'vertical'`. |
| `annotations.xaxis[].label.mouseEnter` | <code>Function</code> | Called with the annotation object when the pointer enters the label. |
| `annotations.xaxis[].label.mouseLeave` | <code>Function</code> | Called with the annotation object when the pointer leaves the label. |
| `annotations.xaxis[].label.click` | <code>Function</code> | Called with the annotation object when the label is clicked. |
| `annotations.points` | <code>PointAnnotations[]</code> | Markers, labels or images at single (x, y) data positions. |
| `annotations.points[].scope` | <code>string \| number \| Array&lt;string \| number&gt; \| ((key: any) =&gt; boolean)</code> | trellis: panel key(s) or a function of the key; the annotation is drawn only on matching panels. |
| `annotations.points[].wcc` | <code>object</code> | West Coast Charts: annotation extras. |
| `annotations.points[].wcc.tooltip` | <code>string \| ((annotation: any) =&gt; string)</code> | Tooltip text shown on hover and focus, or a function of the annotation. |
| `annotations.points[].id` | <code>number \| string</code> | Identifier added as a CSS class to the marker and label; also the key for removing the annotation later. |
| `annotations.points[].x` | <code>number \| string</code> | X position of the point: a category, number or timestamp matching `xaxis.type`. Default: `0`. |
| `annotations.points[].y` | <code>null \| number</code> | Y value of the point. Default: `null`. |
| `annotations.points[].yAxisIndex` | <code>number</code> | Index of the y axis whose scale positions the point. Default: `0`. |
| `annotations.points[].seriesIndex` | <code>number</code> | Series the point belongs to; on horizontal bar charts it moves the point onto that series' bar. |
| `annotations.points[].mouseEnter` | <code>Function</code> | Called with the annotation object when the pointer enters the marker. |
| `annotations.points[].mouseLeave` | <code>Function</code> | Called with the annotation object when the pointer leaves the marker. |
| `annotations.points[].click` | <code>Function</code> | Called with the annotation object when the marker is clicked. |
| `annotations.points[].marker` | <code>object</code> | Marker drawn at the point. |
| `annotations.points[].marker.size` | <code>number</code> | Marker radius in pixels; 0 hides the marker. Default: `4`. |
| `annotations.points[].marker.fillColor` | <code>string</code> | Fill colour of the marker. Default: `'#fff'`. |
| `annotations.points[].marker.strokeColor` | <code>string</code> | Outline colour of the marker. Default: `'#333'`. |
| `annotations.points[].marker.strokeWidth` | <code>number</code> | Outline width of the marker in pixels. Default: `2`. |
| `annotations.points[].marker.shape` | <code>string</code> | Marker shape, as in `markers.shape`. Default: `'circle'`. |
| `annotations.points[].marker.offsetX` | <code>number</code> | Horizontal shift of the marker in pixels. Default: `0`. |
| `annotations.points[].marker.offsetY` | <code>number</code> | Vertical shift of the marker in pixels. Default: `0`. |
| `annotations.points[].marker.cssClass` | <code>string</code> | Extra CSS class added to the marker. Default: `''`. |
| `annotations.points[].label` | <code>AnnotationLabel</code> | Text label attached to the point. |
| `annotations.points[].label.borderColor` | <code>string</code> | Border colour of the label box. Default: `'#c2c2c2'`. |
| `annotations.points[].label.borderWidth` | <code>number</code> | Border width of the label box in pixels. Default: `1`. |
| `annotations.points[].label.borderRadius` | <code>number</code> | Corner radius of the label box in pixels. Default: `2`. |
| `annotations.points[].label.text` | <code>string \| string[]</code> | Label text; without text no label is drawn. |
| `annotations.points[].label.textAnchor` | <code>string</code> | Horizontal anchor of the text: 'start', 'middle' or 'end'. Default: `'middle'` on x-axis annotations, `'end'` on y-axis annotations. |
| `annotations.points[].label.offsetX` | <code>number</code> | Horizontal shift of the label in pixels. Default: `0`. |
| `annotations.points[].label.offsetY` | <code>number</code> | Vertical shift of the label in pixels. Default: `0`. |
| `annotations.points[].label.style` | <code>AnnotationStyle</code> | Text and box style of the label. |
| `annotations.points[].label.style.background` | <code>string</code> | Fill colour of the label box. Default: `'#fff'`. |
| `annotations.points[].label.style.color` | <code>string</code> | Text colour of the label. |
| `annotations.points[].label.style.fontFamily` | <code>string</code> | Font family of the label; not set uses the chart font. |
| `annotations.points[].label.style.fontWeight` | <code>string \| number</code> | Font weight of the label. Default: `400`. |
| `annotations.points[].label.style.fontSize` | <code>string</code> | Font size of the label. Default: `'11px'`. |
| `annotations.points[].label.style.cssClass` | <code>string</code> | Extra CSS class added to the label text. Default: `''`. |
| `annotations.points[].label.style.padding` | <code>object</code> | Space between the text and the box edge, in pixels. |
| `annotations.points[].label.style.padding.left` | <code>number</code> | Left padding in pixels. Default: `5`. |
| `annotations.points[].label.style.padding.right` | <code>number</code> | Right padding in pixels. Default: `5`. |
| `annotations.points[].label.style.padding.top` | <code>number</code> | Top padding in pixels. Default: `2`. |
| `annotations.points[].label.style.padding.bottom` | <code>number</code> | Bottom padding in pixels. Default: `2`. |
| `annotations.points[].label.position` | <code>string</code> | Where the label sits along the line: 'top', 'center' or 'bottom' on x-axis annotations; 'left', 'center' or 'right' on y-axis annotations. Default: `'top'` on x-axis annotations, `'right'` on y-axis annotations. |
| `annotations.points[].label.orientation` | <code>string</code> | 'vertical' rotates an x-axis annotation label along the line; 'horizontal' keeps it level. Default: `'vertical'`. |
| `annotations.points[].label.mouseEnter` | <code>Function</code> | Called with the annotation object when the pointer enters the label. |
| `annotations.points[].label.mouseLeave` | <code>Function</code> | Called with the annotation object when the pointer leaves the label. |
| `annotations.points[].label.click` | <code>Function</code> | Called with the annotation object when the label is clicked. |
| `annotations.points[].image` | <code>object</code> | Image drawn at the point. |
| `annotations.points[].image.path` | <code>string</code> | Image URL: http(s), a relative path or a data:image URI; other schemes are dropped. |
| `annotations.points[].image.width` | <code>number</code> | Image width in pixels. Default: `20`. |
| `annotations.points[].image.height` | <code>number</code> | Image height in pixels. Default: `20`. |
| `annotations.points[].image.offsetX` | <code>number</code> | Horizontal shift of the image in pixels. Default: `0`. |
| `annotations.points[].image.offsetY` | <code>number</code> | Vertical shift of the image in pixels. Default: `0`. |
| `annotations.texts` | <code>TextAnnotations[]</code> | Free text placed at pixel positions inside the chart SVG. Default: `[]`. |
| `annotations.texts[].x` | <code>number</code> | Horizontal position in pixels from the left of the chart SVG. Default: `0`. |
| `annotations.texts[].y` | <code>number</code> | Vertical position in pixels from the top of the chart SVG. Default: `0`. |
| `annotations.texts[].text` | <code>string</code> | The text to draw. Default: `''`. |
| `annotations.texts[].textAnchor` | <code>string</code> | Horizontal anchor of the text at x: 'start', 'middle' or 'end'. Default: `'start'`. |
| `annotations.texts[].foreColor` | <code>string</code> | Text colour; not set uses the chart text colour. |
| `annotations.texts[].fontSize` | <code>string \| number</code> | Font size of the text. Default: `'13px'`. |
| `annotations.texts[].fontFamily` | <code>undefined \| string</code> | Font family; not set uses the chart font. |
| `annotations.texts[].fontWeight` | <code>string \| number</code> | Font weight of the text. Default: `400`. |
| `annotations.texts[].backgroundColor` | <code>string</code> | Fill colour of the box behind the text. Default: `'transparent'`. |
| `annotations.texts[].borderColor` | <code>string</code> | Border colour of the box. Default: `'#c2c2c2'`. |
| `annotations.texts[].borderRadius` | <code>number</code> | Corner radius of the box in pixels. Default: `0`. |
| `annotations.texts[].borderWidth` | <code>number</code> | Border width of the box in pixels; 0 draws no border. Default: `0`. |
| `annotations.texts[].paddingLeft` | <code>number</code> | Left padding of the box in pixels. Default: `4`. |
| `annotations.texts[].paddingRight` | <code>number</code> | Right padding of the box in pixels. Default: `4`. |
| `annotations.texts[].paddingTop` | <code>number</code> | Top padding of the box in pixels. Default: `2`. |
| `annotations.texts[].paddingBottom` | <code>number</code> | Bottom padding of the box in pixels. Default: `2`. |
| `annotations.images` | <code>ImageAnnotations[]</code> | Images placed at pixel positions inside the chart SVG. Default: `[]`. |
| `annotations.images[].path` | <code>string</code> | Image URL: http(s), a relative path or a data:image URI; other schemes are dropped. |
| `annotations.images[].x` | <code>number</code> | Horizontal position in pixels from the left of the chart SVG. Default: `0`. |
| `annotations.images[].y` | <code>number</code> | Vertical position in pixels from the top of the chart SVG. Default: `0`. |
| `annotations.images[].width` | <code>number</code> | Image width in pixels. Default: `20`. |
| `annotations.images[].height` | <code>number</code> | Image height in pixels. Default: `20`. |

## chart

Chart type, size, toolbar, zoom, animations, events and other chart-wide settings.

Type: `ApexChart & WccChartFeatureOptions`

| Option | Type | Description |
| --- | --- | --- |
| `chart.licenseKey` | <code>string</code> | West Coast Charts premium: licence key of this chart (overrides WestCoastCharts.setLicenseKey) |
| `chart.readability` | <code>WccReadability</code> | West Coast Charts: default readability of every label kind (dataLabels, axis labels, premium scales) |
| `chart.readability.mode` | <code>'none' \| 'halo' \| 'pill' \| 'auto' \| 'hide'</code> | 'auto' (default where on): nothing for labels off the marks, a contrasting text colour over one fill, a pill over mixed fills; 'hide' = skip labels that sit on marks |
| `chart.readability.fallback` | <code>'pill' \| 'halo' \| 'hide'</code> | what 'auto' escalates to over mixed fills or when no text colour reaches minRatio. Default 'pill' |
| `chart.readability.enabled` | <code>boolean</code> | false switches the treatment off for this label kind |
| `chart.readability.contrast` | <code>boolean</code> | swap the text to `light`/`dark` when it misses minRatio against what is under it (any mode) |
| `chart.readability.minRatio` | <code>number</code> | WCAG 2 contrast ratio to reach. Default 4.5 |
| `chart.readability.light` | <code>string</code> | text/backdrop colour pair used by contrast and 'auto' fills. Defaults '#ffffff' / '#111827' |
| `chart.readability.dark` | <code>string</code> | Dark colour of the pair. Default: `'#111827'`. |
| `chart.readability.background` | <code>'auto' \| string</code> | colour under the chart; 'auto' = chart.background, else the first opaque ancestor |
| `chart.readability.halo` | <code>object</code> | outline behind the glyphs; blur &gt; 0 makes it a soft glow. Defaults width 3, color 'auto' (chart background), opacity 0.92 |
| `chart.readability.halo.width` | <code>number</code> | Outline width in pixels. Default: `3`. |
| `chart.readability.halo.color` | <code>'auto' \| string</code> | Outline colour; 'auto' uses the colour under the label or a contrasting one. Default: `'auto'`. |
| `chart.readability.halo.opacity` | <code>number</code> | Outline opacity (0 to 1). Default: `0.92`. |
| `chart.readability.halo.blur` | <code>number</code> | Blur in pixels; above 0 the outline becomes a soft glow. Default: `0`. |
| `chart.readability.pill` | <code>object</code> | backdrop box. padding = [vertical, horizontal]; offset = [dx, dy] px. Defaults fill 'auto', opacity 0.9, radius 4, padding [1, 4] |
| `chart.readability.pill.fill` | <code>'auto' \| string</code> | Box colour; 'auto' uses the colour under the label or a contrasting one. Default: `'auto'`. |
| `chart.readability.pill.opacity` | <code>number</code> | Box opacity (0 to 1). Default: `0.9`. |
| `chart.readability.pill.radius` | <code>number</code> | Corner radius in pixels. Default: `4`. |
| `chart.readability.pill.padding` | <code>number \| [number, number]</code> | Space around the text in pixels: one number, or [vertical, horizontal]. Default: `[1, 4]`. |
| `chart.readability.pill.stroke` | <code>string</code> | Outline colour of the box. Default: `'none'`. |
| `chart.readability.pill.strokeWidth` | <code>number</code> | Outline width in pixels. Default: `1`. |
| `chart.readability.pill.offset` | <code>[number, number]</code> | Shift of the box as [dx, dy] in pixels. Default: `[0, 0]`. |
| `chart.readability.shadow` | <code>object \| boolean</code> | drop shadow on the pill (on the text in halo mode) |
| `chart.readability.shadow.dx` | <code>number</code> | Horizontal shadow offset in pixels. Default: `0`. |
| `chart.readability.shadow.dy` | <code>number</code> | Vertical shadow offset in pixels. Default: `1`. |
| `chart.readability.shadow.blur` | <code>number</code> | Shadow blur in pixels. Default: `2`. |
| `chart.readability.shadow.color` | <code>string</code> | Shadow colour. Default: `'#000000'`. |
| `chart.readability.shadow.opacity` | <code>number</code> | Shadow opacity (0 to 1). Default: `0.35`. |
| `chart.readability.raise` | <code>boolean</code> | axis labels sitting on marks are moved above the series (default true) |
| `chart.readability.each` | <code>(info: WccReadabilityInfo) =&gt; WccReadability \| null \| undefined</code> | per label: return an override (or 'none') for this one label; called only when set |
| `chart.accessibility` | <code>WccChartAccessibility</code> | West Coast Charts: WCAG 2.2 AA features (all on by default) |
| `chart.accessibility.enabled` | <code>boolean</code> | false switches off the description, keyboard access and announcements. Default: `true`. |
| `chart.accessibility.description` | <code>string</code> | Text of the chart description for screen readers; not set generates one from the chart type and data. |
| `chart.accessibility.announcements` | <code>object</code> | Live-region announcements for screen readers. |
| `chart.accessibility.announcements.enabled` | <code>boolean</code> | Announces the focused point and zoom, pan and reset changes in a live region when true. Default: `true`. |
| `chart.accessibility.keyboard` | <code>object</code> | Keyboard access to the chart. |
| `chart.accessibility.keyboard.enabled` | <code>boolean</code> | Makes the chart SVG focusable (tabindex 0) and keyboard operable. Default: `true`. |
| `chart.accessibility.keyboard.navigation` | <code>object</code> | Arrow-key navigation between data points. |
| `chart.accessibility.keyboard.navigation.enabled` | <code>boolean</code> | Lets the arrow keys move between points. Default: `true`. |
| `chart.accessibility.keyboard.navigation.wrapAround` | <code>boolean</code> | Moving past the last point continues at the first (and back). Default: `false`. |
| `chart.width` | <code>string \| number</code> | Chart width: a number is pixels, a string is any CSS length such as a percentage of the container. Default: `'100%'`. |
| `chart.height` | <code>string \| number</code> | Chart height: a number is pixels, a percentage is relative to the container's height; 'auto' uses the width divided by 1.61 for axis charts and by 1.2 for the others. Default: `'auto'`. |
| `chart.type` | <code>\| 'line' \| 'area' \| 'bar' \| 'pie' \| 'donut' \| 'radialBar' \| 'scatter' \| 'bubble' \| 'heatmap' \| 'candlestick' \| 'boxPlot' \| 'radar' \| 'polarArea' \| 'rangeBar'…</code> | The chart type. The West Coast Charts types (gauge ... calendar) need 'west-coast-charts/types' (included in 'west-coast-charts/full'), the premium types (sankey ... radialColumn) need 'west-coast-charts/premium'. |
| `chart.foreColor` | <code>string</code> | Text colour used for axis labels, titles and legend text unless their own colour option is set. Default: `'#373d3f'`. |
| `chart.fontFamily` | <code>string</code> | Font family applied to all chart text that has no own fontFamily. Default: `'Helvetica, Arial, sans-serif'`. |
| `chart.background` | <code>string</code> | Background colour of the chart area; an empty string leaves it transparent. Default: `''`. |
| `chart.offsetX` | <code>number</code> | Moves the whole drawing horizontally by this many pixels. Default: `0`. |
| `chart.offsetY` | <code>number</code> | Moves the whole drawing vertically by this many pixels. Default: `0`. |
| `chart.dropShadow` | <code>ApexDropShadow</code> | Shadow drawn behind series paths (lines, areas, bars). |
| `chart.dropShadow.enabled` | <code>boolean</code> | Draws the shadow. Default: `false`. |
| `chart.dropShadow.top` | <code>number</code> | Vertical shadow distance in pixels. Default: `2`. |
| `chart.dropShadow.left` | <code>number</code> | Horizontal shadow distance in pixels. Default: `2`. |
| `chart.dropShadow.blur` | <code>number</code> | Blur radius in pixels. Default: `4`. |
| `chart.dropShadow.opacity` | <code>number</code> | Shadow opacity (0 to 1). Default: `0.7`. |
| `chart.dropShadow.color` | <code>string</code> | Shadow colour. Default: `'#000'`. |
| `chart.dropShadow.enabledOnSeries` | <code>undefined \| number[]</code> | Indexes of the series that get the shadow; not set means all series. |
| `chart.nonce` | <code>string</code> | CSP nonce copied onto every `&lt;style&gt;` element the library adds (also in exported SVGs), so a strict `style-src` policy accepts them. |
| `chart.sanitizeHtml` | <code>\| boolean \| ((html: string, opts: { svg: boolean }) =&gt; string \| Node)</code> | West Coast Charts: how HTML returned by formatters / custom functions is inserted. true (default) = built-in sanitizer, function = custom sanitizer, false = raw innerHTML (ApexCharts 4.7.0 behaviour, trusted input only). Plain data strings (series names, categories, labels) are always text. |
| `chart.eventSignature` | <code>'legacy' \| 'standard'</code> | Premium/feature convention: legacy (default) retains family signatures; standard uses (eventOrNull, chart, payload). Core lifecycle callbacks are unchanged. |
| `chart.events` | <code>object</code> | Lifecycle/core callbacks plus premium/feature events. Named precise handler types are in premium-events.d.ts; inline callbacks remain permissive for compatibility. |
| `chart.events.animationEnd()` | <code>(chart: any, options?: any): void</code> | Called once the initial (or update) animation of the series has finished. |
| `chart.events.beforeMount()` | <code>(chart: any, options?: any): void</code> | Called after the options are processed and before the SVG is put into the page. |
| `chart.events.mounted()` | <code>(chart: any, options?: any): void</code> | Called after the first render is in the page. |
| `chart.events.updated()` | <code>(chart: any, options?: any): void</code> | Called after each re-render caused by updateOptions, updateSeries, appendData, a resize and similar. |
| `chart.events.mouseMove()` | <code>(e: any, chart?: any, options?: any): void</code> | Called on mouse movement over the plot area with the pointer event and the hovered series and data indexes. |
| `chart.events.mouseLeave()` | <code>(e: any, chart?: any, options?: any): void</code> | Called when the pointer leaves the plot area. |
| `chart.events.click()` | <code>(e: any, chart?: any, options?: any): void</code> | Called on a click anywhere in the chart, with the hovered series and data indexes when there is one. |
| `chart.events.xAxisLabelClick()` | <code>(e: any, chart?: any, options?: any): void</code> | Called when an x-axis label is clicked, with the label index. |
| `chart.events.legendClick()` | <code>(chart: any, seriesIndex?: number, options?: any): void</code> | Called when a legend entry is clicked, with the series index; runs before the default show/hide toggle. |
| `chart.events.markerClick()` | <code>(e: any, chart?: any, options?: any): void</code> | Called when a point marker is clicked, with the series and data indexes. |
| `chart.events.selection()` | <code>(chart: any, options?: any): void</code> | Called while a selection range is drawn or moved, with the selected x (and y) range. |
| `chart.events.dataPointSelection()` | <code>(e: any, chart?: any, options?: any): void</code> | Called when a data point (bar, slice, marker) is clicked and becomes selected or unselected. |
| `chart.events.dataPointMouseEnter()` | <code>(e: any, chart?: any, options?: any): void</code> | Called when the pointer enters a data point shape. |
| `chart.events.dataPointMouseLeave()` | <code>(e: any, chart?: any, options?: any): void</code> | Called when the pointer leaves a data point shape. |
| `chart.events.beforeZoom()` | <code>(chart: any, options?: any): void</code> | Called before a zoom is applied, with the new x range; return `{ xaxis: { min, max } }` to change the range that is used. |
| `chart.events.beforeResetZoom()` | <code>(chart: any, options?: any): void</code> | Called before the zoom is reset; return `{ xaxis: { min, max } }` to reset to a different range. |
| `chart.events.zoomed()` | <code>(chart: any, options?: any): void</code> | Called after a zoom (selection zoom, zoom buttons, wheel or reset), with the new x and y ranges. |
| `chart.events.scrolled()` | <code>(chart: any, options?: any): void</code> | Called while the chart is panned, with the new x range. |
| `chart.events.brushScrolled()` | <code>(chart: any, options?: any): void</code> | Called on a brush chart when its selection moves the target chart, with the new range. |
| `chart.events.keyDown()` | <code>(e: KeyboardEvent, chart?: any, options?: any): void</code> | West Coast Charts: key pressed / released while the chart has focus |
| `chart.events.keyUp()` | <code>(e: KeyboardEvent, chart?: any, options?: any): void</code> | Called on keyup while the chart has keyboard focus, with the keyboard event. |
| `chart.brush` | <code>object</code> | Turns this chart into a navigator for other charts: its selection sets their x range. |
| `chart.brush.enabled` | <code>boolean</code> | Enables the brush behaviour. When `chart.events.selection` is your own function, the targets are not wired up automatically. Default: `false`. |
| `chart.brush.autoScaleYaxis` | <code>boolean</code> | Rescales the target chart's y axis to the data inside the brushed range. Default: `true`. |
| `chart.brush.target` | <code>string</code> | `chart.id` of the single chart this brush controls. |
| `chart.brush.targets` | <code>string[]</code> | `chart.id`s of several charts this brush controls; used instead of `target`. |
| `chart.id` | <code>string</code> | Name of the chart, used by `ApexCharts.exec`, brush targets and as the default download file name. |
| `chart.group` | <code>string</code> | Charts with the same group share tooltip and crosshair position and zoom/pan; each needs its own `chart.id`. |
| `chart.locales` | <code>ApexLocale[]</code> | Locale definitions available to this chart (names of months and days, toolbar texts). |
| `chart.locales[].name` | <code>string</code> | Locale name, selected with `chart.defaultLocale` or `setLocale()`. |
| `chart.locales[].options` | <code>object</code> | Translated strings of the locale. |
| `chart.locales[].options.months` | <code>string[]</code> | Full month names, January first; used by datetime labels and formats. |
| `chart.locales[].options.shortMonths` | <code>string[]</code> | Abbreviated month names, January first. |
| `chart.locales[].options.days` | <code>string[]</code> | Full weekday names, Sunday first. |
| `chart.locales[].options.shortDays` | <code>string[]</code> | Abbreviated weekday names, Sunday first. |
| `chart.locales[].options.toolbar` | <code>object</code> | Titles of the toolbar buttons and export menu items. |
| `chart.locales[].options.toolbar.selection` | <code>string</code> | Title of the selection button. English: 'Selection'. |
| `chart.locales[].options.toolbar.selectionZoom` | <code>string</code> | Title of the selection-zoom button. English: 'Selection Zoom'. |
| `chart.locales[].options.toolbar.zoomIn` | <code>string</code> | Title of the zoom-in button. English: 'Zoom In'. |
| `chart.locales[].options.toolbar.zoomOut` | <code>string</code> | Title of the zoom-out button. English: 'Zoom Out'. |
| `chart.locales[].options.toolbar.pan` | <code>string</code> | Title of the pan button. English: 'Panning'. |
| `chart.locales[].options.toolbar.reset` | <code>string</code> | Title of the reset-zoom button. |
| `chart.locales[].options.toolbar.exportToSVG` | <code>string</code> | Label of the SVG export menu item. English: 'Download SVG'. |
| `chart.locales[].options.toolbar.exportToPNG` | <code>string</code> | Label of the PNG export menu item. English: 'Download PNG'. |
| `chart.locales[].options.toolbar.exportToCSV` | <code>string</code> | Label of the CSV export menu item. English: 'Download CSV'. |
| `chart.defaultLocale` | <code>string</code> | `name` of the locale (from `chart.locales` or the registered ones) that is used. Default: `'en'`. |
| `chart.parentHeightOffset` | <code>number</code> | Extra pixels added below the SVG in the wrapper's minimum height for axis charts with a pixel height. Default: `15`. |
| `chart.redrawOnParentResize` | <code>boolean</code> | Re-renders the chart when its container changes size (observed with ResizeObserver). Default: `true`. |
| `chart.redrawOnWindowResize` | <code>boolean \| Function</code> | Re-renders on window resize; a function is called on each resize and its return value decides. Default: `true`. |
| `chart.sparkline` | <code>object</code> | Minimal mode for small inline charts: hides axes, grid, legend and labels and removes the padding. |
| `chart.sparkline.enabled` | <code>boolean</code> | Enables sparkline mode. Default: `false`. |
| `chart.stacked` | <code>boolean</code> | Stacks the series of bar, column and area charts on top of each other. Default: `false`. |
| `chart.stackType` | <code>'normal' \| '100%'</code> | 'normal' adds the values; '100%' scales every stack to 100 percent. Default: `'normal'`. |
| `chart.stackOnlyBar` | <code>boolean</code> | In combined charts, stack only the bar/column series and draw the others unstacked. Default: `true`. |
| `chart.toolbar` | <code>object</code> | The tool buttons and download menu in the top right corner. |
| `chart.toolbar.show` | <code>boolean</code> | Shows the toolbar. Default: `true`. |
| `chart.toolbar.offsetX` | <code>number</code> | Moves the toolbar horizontally by this many pixels. Default: `0`. |
| `chart.toolbar.offsetY` | <code>number</code> | Moves the toolbar vertically by this many pixels. Default: `0`. |
| `chart.toolbar.tools` | <code>object</code> | Which buttons the toolbar shows. `true` shows the built-in icon, `false` hides it, a string is used as the icon markup. |
| `chart.toolbar.tools.download` | <code>boolean \| string</code> | Download menu (SVG, PNG, CSV). Default: `true`. |
| `chart.toolbar.tools.selection` | <code>boolean \| string</code> | Button for the selection (brush) tool. Default: `true`. |
| `chart.toolbar.tools.zoom` | <code>boolean \| string</code> | Button for drag-to-zoom. Default: `true`. |
| `chart.toolbar.tools.zoomin` | <code>boolean \| string</code> | Zoom-in button. Default: `true`. |
| `chart.toolbar.tools.zoomout` | <code>boolean \| string</code> | Zoom-out button. Default: `true`. |
| `chart.toolbar.tools.pan` | <code>boolean \| string</code> | Button for the pan tool. Default: `true`. |
| `chart.toolbar.tools.reset` | <code>boolean \| string</code> | Button that resets zoom and pan to the original range. Default: `true`. |
| `chart.toolbar.tools.customIcons` | <code>object[]</code> | Extra buttons added to the toolbar. Default: `[]`. |
| `chart.toolbar.tools.customIcons[].icon` | <code>string</code> | Markup (usually SVG) of the button. |
| `chart.toolbar.tools.customIcons[].title` | <code>string</code> | Tooltip text and accessible name of the button. |
| `chart.toolbar.tools.customIcons[].index` | <code>number</code> | Position among the toolbar buttons (0-based); without an index the button is appended. |
| `chart.toolbar.tools.customIcons[].class` | <code>string</code> | CSS class added to the button. |
| `chart.toolbar.tools.customIcons[].click()` | <code>(chart?: any, options?: any, e?: any): any</code> | Called when the button is pressed, with the chart, its options and the event. |
| `chart.toolbar.export` | <code>object</code> | Settings for the downloads offered in the toolbar menu. |
| `chart.toolbar.export.csv` | <code>object</code> | CSV download settings. |
| `chart.toolbar.export.csv.filename` | <code>undefined \| string</code> | File name without extension; not set uses `chart.id` or a generated id. |
| `chart.toolbar.export.csv.columnDelimiter` | <code>string</code> | Separator written between columns. Default: `','`. |
| `chart.toolbar.export.csv.headerCategory` | <code>string</code> | Header of the category / x column. Default: `'category'`. |
| `chart.toolbar.export.csv.headerValue` | <code>string</code> | Header of the value column for charts without axes (pie, donut, radialBar ...). Default: `'value'`. |
| `chart.toolbar.export.csv.categoryFormatter()` | <code>(value?: number): any</code> | Function that turns each x value into the text written in the CSV. |
| `chart.toolbar.export.csv.valueFormatter()` | <code>(value?: number): any</code> | Function that turns each y value into the text written in the CSV. |
| `chart.toolbar.export.svg` | <code>object</code> | SVG download settings. |
| `chart.toolbar.export.svg.filename` | <code>undefined \| string</code> | File name without extension; not set uses `chart.id` or a generated id. |
| `chart.toolbar.export.png` | <code>object</code> | PNG download settings. |
| `chart.toolbar.export.png.filename` | <code>undefined \| string</code> | File name without extension; not set uses `chart.id` or a generated id. |
| `chart.toolbar.export.width` | <code>number</code> | Pixel width of the exported PNG; the scale factor is derived from it. Ignored when `scale` is set. |
| `chart.toolbar.export.scale` | <code>number</code> | Scale factor for the exported PNG (2 = twice the on-screen size). |
| `chart.toolbar.autoSelected` | <code>'zoom' \| 'selection' \| 'pan'</code> | Tool that is active when the chart loads. Default: `'zoom'`. |
| `chart.zoom` | <code>object</code> | Zooming of axis charts by dragging, buttons or the mouse wheel. |
| `chart.zoom.enabled` | <code>boolean</code> | Enables zooming. Default: `true`. |
| `chart.zoom.type` | <code>'x' \| 'y' \| 'xy'</code> | Axis that is zoomed: 'x', 'y' or both ('xy'). Default: `'x'`. |
| `chart.zoom.autoScaleYaxis` | <code>boolean</code> | After an x zoom, fits the y axis to the visible data. Default: `false`. |
| `chart.zoom.allowMouseWheelZoom` | <code>boolean</code> | Zooms with the mouse wheel while the pointer is over the plot. Default: `true`. |
| `chart.zoom.zoomedArea` | <code>object</code> | Look of the rectangle drawn while dragging a zoom area. |
| `chart.zoom.zoomedArea.fill` | <code>object</code> | Fill of the zoom rectangle. |
| `chart.zoom.zoomedArea.fill.color` | <code>string</code> | Fill colour of the zoom rectangle. Default: `'#90CAF9'`. |
| `chart.zoom.zoomedArea.fill.opacity` | <code>number</code> | Fill opacity of the zoom rectangle (0 to 1). Default: `0.4`. |
| `chart.zoom.zoomedArea.stroke` | <code>object</code> | Border of the zoom rectangle. |
| `chart.zoom.zoomedArea.stroke.color` | <code>string</code> | Border colour of the zoom rectangle. Default: `'#0D47A1'`. |
| `chart.zoom.zoomedArea.stroke.opacity` | <code>number</code> | Border opacity of the zoom rectangle (0 to 1). Default: `0.4`. |
| `chart.zoom.zoomedArea.stroke.width` | <code>number</code> | Border width of the zoom rectangle in pixels. Default: `1`. |
| `chart.selection` | <code>object</code> | A draggable range on the plot; on a brush chart it controls the targets. |
| `chart.selection.enabled` | <code>boolean</code> | Enables the selection tool. Default: `false`. |
| `chart.selection.type` | <code>string</code> | Axis of the selection: 'x', 'y' or 'xy'. Default: `'x'`. |
| `chart.selection.fill` | <code>object</code> | Fill of the selection rectangle. |
| `chart.selection.fill.color` | <code>string</code> | Fill colour of the selection rectangle. Default: `'#24292e'`. |
| `chart.selection.fill.opacity` | <code>number</code> | Fill opacity of the selection rectangle (0 to 1). Default: `0.1`. |
| `chart.selection.stroke` | <code>object</code> | Border of the selection rectangle. |
| `chart.selection.stroke.width` | <code>number</code> | Border width in pixels. Default: `1`. |
| `chart.selection.stroke.color` | <code>string</code> | Border colour. Default: `'#24292e'`. |
| `chart.selection.stroke.opacity` | <code>number</code> | Border opacity (0 to 1). Default: `0.4`. |
| `chart.selection.stroke.dashArray` | <code>number</code> | Dash length of the border in pixels; 0 draws a solid line. Default: `3`. |
| `chart.selection.xaxis` | <code>object</code> | Initial selected x range. |
| `chart.selection.xaxis.min` | <code>number</code> | Start of the initial selection (x value). |
| `chart.selection.xaxis.max` | <code>number</code> | End of the initial selection (x value). |
| `chart.selection.yaxis` | <code>object</code> | Initial selected y range (for 'y' / 'xy' selections). |
| `chart.selection.yaxis.min` | <code>number</code> | Lower end of the initial selection (y value). |
| `chart.selection.yaxis.max` | <code>number</code> | Upper end of the initial selection (y value). |
| `chart.animations` | <code>object</code> | Motion settings for the first render, data updates and resizes. |
| `chart.animations.enabled` | <code>boolean</code> | Master switch for all animations. Default: `true`. |
| `chart.animations.respectReducedMotion` | <code>boolean</code> | West Coast Charts: no motion when the OS asks for reduced motion (default true) |
| `chart.animations.largeDatasetThreshold` | <code>number</code> | West Coast Charts: above this many points (all series) path animations become a short fade; 0 = never. Default 2000 |
| `chart.animations.chartTypeMorph` | <code>object</code> | West Coast Charts: tween between chart types on updateOptions({ chart: { type } }) (treemap / sunburst / icicle, violin / beeswarm) |
| `chart.animations.chartTypeMorph.enabled` | <code>boolean</code> | Set to false so a type switch draws the new type without the tween. Default: `true`. |
| `chart.animations.chartTypeMorph.speed` | <code>number</code> | Duration of the type tween in milliseconds. Default: `600`. |
| `chart.animations.easing` | <code>\| 'linear' \| 'easein' \| 'easeout' \| 'easeinout' \| 'easeOutQuad' \| 'easeOutCubic' \| 'easeOutQuint' \| 'easeInOutCubic' \| string \| [number, number, number, numb…</code> | West Coast Charts: easing curve name or function |
| `chart.animations.speed` | <code>number</code> | Duration of the first-render animation in milliseconds. Default: `800`. |
| `chart.animations.animateGradually` | <code>object</code> | Starts the series (and points) one after another instead of all at once. |
| `chart.animations.animateGradually.enabled` | <code>boolean</code> | Enables the staggered start. Default: `true`. |
| `chart.animations.animateGradually.delay` | <code>number</code> | Delay between two consecutive items in milliseconds. Default: `150`. |
| `chart.animations.dynamicAnimation` | <code>object</code> | Animation of data changes (updateSeries, updateOptions, appendData). |
| `chart.animations.dynamicAnimation.enabled` | <code>boolean</code> | Animates data changes from the old to the new values. Default: `true`. |
| `chart.animations.dynamicAnimation.easing` | <code>string \| [number, number, number, number] \| ((t: number) =&gt; number)</code> | West Coast Charts: easing for data-change animations |
| `chart.animations.dynamicAnimation.speed` | <code>number</code> | Duration of a data-change animation in milliseconds. Default: `350`. |
| `chart.animations.dynamicAnimation.matchBy` | <code>'index' \| 'x' \| ((point: any, seriesIndex: number, dataIndex: number) =&gt; string \| number)</code> | West Coast Charts: how the points of an update pair with the previous ones. 'index' (default, 4.7.0), 'x' (category or x value), or a key function. Markers, data labels and bar/column/box shapes then move with their own point when data is reordered, added or removed. |
| `chart.animations.resize` | <code>object</code> | West Coast Charts: animate the redraw after a container/window resize (paths morph, markers and axis ticks glide to the new size). Opt-in; off = the 4.7.0 static redraw. A resize that arrives while an animation runs is held until it finished either way. |
| `chart.animations.resize.enabled` | <code>boolean</code> | Animates the redraw after a resize. Default: `false`. |
| `chart.animations.resize.speed` | <code>number</code> | Duration of the resize animation in milliseconds. Default: `300`. |
| `chart.renderer` | <code>'svg' \| 'canvas' \| 'auto'</code> | renderer-canvas feature |
| `chart.rendererThreshold` | <code>number</code> | total points from which renderer 'auto' paints on canvas |
| `chart.wcc` | <code>object</code> | West Coast Charts chart-level extensions. |
| `chart.wcc.canvas` | <code>object</code> | Canvas renderer tuning. |
| `chart.wcc.canvas.pixelRatio` | <code>'device' \| number</code> | Backing-store scale; `'device'` uses the device pixel ratio capped at 2, a number forces it. Default: `'device'`. |
| `chart.wcc.canvas.cellCap` | <code>number</code> | Most scatter cells handed to the SVG layer as hover and tooltip proxy. Default: `20000`. |
| `chart.wcc.canvas.settleMs` | <code>number</code> | Time after the last pan or zoom input before the full update (tooltips, `zoomed` events), in milliseconds. Default: `140`. |
| `chart.wcc.canvas.axisStride` | <code>number</code> | During a gesture, the axes and grid update every Nth frame; `0` picks it from the measured frame cost (at most 4). Default: `0`. |
| `chart.link` | <code>WccLinkOptions</code> | Linked charts (highlight or crossfilter mode). |
| `chart.link.id` | <code>string \| number</code> | Id of the link group: charts with the same id share one set of records and filters; not set uses `chart.group`. |
| `chart.link.group` | <code>string</code> | Not read by the link feature; use `id` (or `chart.group`). Kept for type compatibility. |
| `chart.link.dimension` | <code>(record: any) =&gt; string \| number \| [any, any] \| any[] \| null</code> | Key of a record: a string (category), a number (range, binned), `[x, y]` (matrix, for heatmaps) or `[stage1, stage2, ...]` (path, for sankey: the record's flow through the stages; `null` leaves it out). |
| `chart.link.type` | <code>'category' \| 'range' \| 'matrix' \| 'path'</code> | Kind of dimension; not set is `'range'` when `bins` is set, `'matrix'` on heatmaps, `'path'` on sankey, else `'category'`. |
| `chart.link.reduce` | <code>object \| 'count' \| ((records: any[]) =&gt; number)</code> | Aggregate of a bucket: `'count'`, `{ sum \| avg \| min \| max: field }` (a property path or a function of the record) or a function of the bucket's records. Default: `'count'`. |
| `chart.link.reduce.sum` | <code>string \| WccCallback</code> | Field summed over the bucket. |
| `chart.link.reduce.avg` | <code>string \| WccCallback</code> | Field averaged over the bucket. |
| `chart.link.reduce.min` | <code>string \| WccCallback</code> | Field whose minimum is taken over the bucket. |
| `chart.link.reduce.max` | <code>string \| WccCallback</code> | Field whose maximum is taken over the bucket. |
| `chart.link.bins` | <code>object</code> | Binning of a range dimension; makes the chart brushable. |
| `chart.link.bins.width` | <code>number</code> | Width of a bin in dimension units. |
| `chart.link.bins.count` | <code>number</code> | Number of bins. |
| `chart.link.order` | <code>'first-seen' \| 'asc' \| 'desc' \| 'value-asc' \| 'value-desc' \| ((a: any, b: any) =&gt; number)</code> | Order of the buckets: `'first-seen'`, `'asc'` / `'desc'` (by key, natural sort), `'value-asc'` / `'value-desc'` (by the reduced value over all records, stable while other charts filter) or a comparator. |
| `chart.link.seriesName` | <code>string</code> | Name of the series injected from the aggregate. Default: `'Count'`. |
| `chart.link.dimOpacity` | <code>number</code> | Opacity of marks outside the selection. Default: `0.2`. |
| `chart.link.wcc` | <code>object</code> | West Coast Charts link extensions. |
| `chart.link.wcc.label` | <code>string</code> | Name of this chart's filter in the summary and announcements; not set uses `title.text` or the chart id. |
| `chart.link.wcc.selectMode` | <code>'toggle' \| 'single' \| 'additive-shift'</code> | Click behaviour: `'toggle'` adds or removes a bucket, `'single'` keeps one bucket, `'additive-shift'` adds only with Shift. Default: `'toggle'`. |
| `chart.link.wcc.summary` | <code>boolean \| string \| Element</code> | `true` draws a summary bar (record count, filter chips, Clear all) above the plot; a selector or element places it elsewhere. Default: `false`. |
| `chart.link.wcc.emptyBuckets` | <code>'show' \| 'hide'</code> | `'hide'` drops buckets left empty by other filters (selected ones stay). Default: `'show'`. |
| `chart.link.wcc.display` | <code>'filtered' \| 'parts'</code> | `'parts'` keeps the unfiltered totals as data and draws the filtered aggregate as the highlight part. Default: `'filtered'`. |
| `chart.link.wcc.throttle` | <code>'frame' \| 'end' \| number</code> | Live brush updates: `'frame'` once per animation frame, `'end'` only on release, or a minimum interval in milliseconds. Default: `'frame'`. |
| `chart.link.wcc.centre` | <code>boolean</code> | Linked donuts: `false` leaves the centre label alone instead of showing the selection. Default: `true`. |
| `chart.link.wcc.centreLabel` | <code>string</code> | Donut centre label while the chart has no selection of its own; not set uses the locale string `link.total`. |
| `chart.link.wcc.heatScale` | <code>boolean</code> | Linked heatmaps: `false` keeps the default heatmap shading instead of the link colour scale. Default: `true`. |
| `chart.history` | <code>WccHistoryOptions</code> | Undo and redo of view changes. |
| `chart.history.enabled` | <code>boolean</code> | Records view changes (zoom, pan, legend toggles, selection, drilldown, filters) for undo and redo. Default: `false`. |
| `chart.history.maxDepth` | <code>number</code> | Most entries kept; older ones are dropped. Default: `100`. |
| `chart.history.coalesceMs` | <code>number</code> | changes closer than this many ms become one entry |
| `chart.history.keyboard` | <code>boolean</code> | Ctrl/Cmd+Z undoes, Ctrl/Cmd+Shift+Z or Ctrl/Cmd+Y redoes while the chart has focus; text fields are left alone. Default: `true`. |
| `chart.history.wcc` | <code>object</code> | West Coast Charts history extensions. |
| `chart.history.wcc.toolbar` | <code>boolean</code> | Adds undo and redo buttons to the toolbar. Default: `false`. |
| `chart.history.wcc.recordData` | <code>boolean</code> | Also records data updates; alias `chart.wcc.history.recordData`. Default: `false`. |
| `chart.orient` | <code>WccOrientOptions \| boolean</code> | Orient feature ("Ansicht ausrichten"): turn radialColumn (with all its layers), chord, pie, donut, polarArea and radialBar charts; `true` = `{ enabled: true }`. |
| `chart.orient.enabled` | <code>boolean</code> | Toolbar buttons (rotate left / right, reset), the `[` `]` and Home keys and picking a segment (double-click, Shift+Enter on a focused item). The `chart.orient` API works without it. Default: `false`; `chart.orient: true` turns it on. |
| `chart.orient.angle` | <code>number</code> | Turn in degrees, clockwise from the default orientation (negative = counter-clockwise). Set on create or in `updateOptions`; the turn then stays across updates. Default: `0`. |
| `chart.orient.toolbar` | <code>boolean</code> | Rotate-left, rotate-right and reset buttons (the toolbar, or a small bar of their own). Default: `true`. |
| `chart.orient.keyboard` | <code>boolean</code> | `[` / `]` turn by one step, Home resets a turned chart, Shift+Enter turns the focused item to `target`. Default: `true`. |
| `chart.orient.pick` | <code>boolean</code> | Double-click a segment (or Shift+Enter on a focused one) to turn it to `target`. Default: `true`. |
| `chart.orient.step` | <code>'auto' \| number</code> | One step of the buttons, keys and `rotateBy({ steps })` in degrees; `'auto'` = a time window of whole segments close to 45° (3 h on a 24 h clock, a day on a week). Default: `'auto'`. |
| `chart.orient.snap` | <code>boolean</code> | `rotateBy(degrees)` moves by whole segments. Default: `true`. |
| `chart.orient.target` | <code>'top' \| 'right' \| 'bottom' \| 'left' \| number</code> | Where a picked segment goes: `'top'`, `'right'`, `'bottom'`, `'left'` or degrees clockwise from 12 o'clock. Default: `'top'`. |
| `chart.deterministic` | <code>boolean</code> | Deterministic rendering (agents, CLI, snapshot tests): no animation (the final frame only), no wall clock (see `now`), a seeded PRNG and stable ids, so the same options give byte-identical SVG in the same engine. On by itself in headless mode (`WestCoastCharts.headless = true` or `globalThis.WCC_HEADLESS = true`) unless set to `false`. Several deterministic charts on one page need distinct `chart.id`s (or seeds). Default: `false`. |
| `chart.seed` | <code>number</code> | Seed of the PRNG used for ids and random layouts. Default: a hash of `chart.id`. |
| `chart.now` | <code>number \| Date \| string \| (() =&gt; number \| Date)</code> | The current time as the chart sees it ("today" in Gantt): ms since the epoch, a Date, a date string or a function returning one of those. In deterministic mode without it there is no clock (no today marker). Default: `Date.now()`. |
| `chart.requestedType` | <code>string</code> | the type asked for ('gauge', 'funnel', ...); set by the library, chart.type holds the base renderer |
| `chart.validate` | <code>'warn' \| 'error' \| 'off'</code> | Option check when the validator module is loaded ('west-coast-charts/agent/validate'): `'warn'` logs unknown options, wrong types and invalid values with a suggestion (console.warn, once per chart), `'error'` also makes `render()` reject, `'off'` skips the check. Without the module nothing is checked. Default: `'warn'`. |

## colors

Series colours in order (CSS colours, or functions returning one); not set uses the theme palette.

Type: `any[]`

## dataLabels

Value labels drawn on the data points.

Type: `ApexDataLabels`

| Option | Type | Description |
| --- | --- | --- |
| `dataLabels.readability` | <code>WccReadability</code> | West Coast Charts: halo / pill / auto-contrast over the marks (features/readability) |
| `dataLabels.readability.mode` | <code>'none' \| 'halo' \| 'pill' \| 'auto' \| 'hide'</code> | 'auto' (default where on): nothing for labels off the marks, a contrasting text colour over one fill, a pill over mixed fills; 'hide' = skip labels that sit on marks |
| `dataLabels.readability.fallback` | <code>'pill' \| 'halo' \| 'hide'</code> | what 'auto' escalates to over mixed fills or when no text colour reaches minRatio. Default 'pill' |
| `dataLabels.readability.enabled` | <code>boolean</code> | false switches the treatment off for this label kind |
| `dataLabels.readability.contrast` | <code>boolean</code> | swap the text to `light`/`dark` when it misses minRatio against what is under it (any mode) |
| `dataLabels.readability.minRatio` | <code>number</code> | WCAG 2 contrast ratio to reach. Default 4.5 |
| `dataLabels.readability.light` | <code>string</code> | text/backdrop colour pair used by contrast and 'auto' fills. Defaults '#ffffff' / '#111827' |
| `dataLabels.readability.dark` | <code>string</code> | Dark colour of the pair. Default: `'#111827'`. |
| `dataLabels.readability.background` | <code>'auto' \| string</code> | colour under the chart; 'auto' = chart.background, else the first opaque ancestor |
| `dataLabels.readability.halo` | <code>object</code> | outline behind the glyphs; blur &gt; 0 makes it a soft glow. Defaults width 3, color 'auto' (chart background), opacity 0.92 |
| `dataLabels.readability.halo.width` | <code>number</code> | Outline width in pixels. Default: `3`. |
| `dataLabels.readability.halo.color` | <code>'auto' \| string</code> | Outline colour; 'auto' uses the colour under the label or a contrasting one. Default: `'auto'`. |
| `dataLabels.readability.halo.opacity` | <code>number</code> | Outline opacity (0 to 1). Default: `0.92`. |
| `dataLabels.readability.halo.blur` | <code>number</code> | Blur in pixels; above 0 the outline becomes a soft glow. Default: `0`. |
| `dataLabels.readability.pill` | <code>object</code> | backdrop box. padding = [vertical, horizontal]; offset = [dx, dy] px. Defaults fill 'auto', opacity 0.9, radius 4, padding [1, 4] |
| `dataLabels.readability.pill.fill` | <code>'auto' \| string</code> | Box colour; 'auto' uses the colour under the label or a contrasting one. Default: `'auto'`. |
| `dataLabels.readability.pill.opacity` | <code>number</code> | Box opacity (0 to 1). Default: `0.9`. |
| `dataLabels.readability.pill.radius` | <code>number</code> | Corner radius in pixels. Default: `4`. |
| `dataLabels.readability.pill.padding` | <code>number \| [number, number]</code> | Space around the text in pixels: one number, or [vertical, horizontal]. Default: `[1, 4]`. |
| `dataLabels.readability.pill.stroke` | <code>string</code> | Outline colour of the box. Default: `'none'`. |
| `dataLabels.readability.pill.strokeWidth` | <code>number</code> | Outline width in pixels. Default: `1`. |
| `dataLabels.readability.pill.offset` | <code>[number, number]</code> | Shift of the box as [dx, dy] in pixels. Default: `[0, 0]`. |
| `dataLabels.readability.shadow` | <code>object \| boolean</code> | drop shadow on the pill (on the text in halo mode) |
| `dataLabels.readability.shadow.dx` | <code>number</code> | Horizontal shadow offset in pixels. Default: `0`. |
| `dataLabels.readability.shadow.dy` | <code>number</code> | Vertical shadow offset in pixels. Default: `1`. |
| `dataLabels.readability.shadow.blur` | <code>number</code> | Shadow blur in pixels. Default: `2`. |
| `dataLabels.readability.shadow.color` | <code>string</code> | Shadow colour. Default: `'#000000'`. |
| `dataLabels.readability.shadow.opacity` | <code>number</code> | Shadow opacity (0 to 1). Default: `0.35`. |
| `dataLabels.readability.raise` | <code>boolean</code> | axis labels sitting on marks are moved above the series (default true) |
| `dataLabels.readability.each` | <code>(info: WccReadabilityInfo) =&gt; WccReadability \| null \| undefined</code> | per label: return an override (or 'none') for this one label; called only when set |
| `dataLabels.enabled` | <code>boolean</code> | Draws the value next to (or inside) each data point. Default: `true`. |
| `dataLabels.enabledOnSeries` | <code>undefined \| number[]</code> | Indexes of the series that get labels; not set means all series. |
| `dataLabels.textAnchor` | <code>'start' \| 'middle' \| 'end'</code> | Horizontal anchor of the label text: 'start', 'middle' or 'end'. Default: `'middle'`. |
| `dataLabels.distributed` | <code>boolean</code> | Colours each label with the colour of its own point instead of its series. Default: `false`. |
| `dataLabels.offsetX` | <code>number</code> | Moves the labels horizontally. Default: `0`. |
| `dataLabels.offsetY` | <code>number</code> | Moves the labels vertically. Default: `0`. |
| `dataLabels.style` | <code>object</code> | Text style of the labels. |
| `dataLabels.style.fontSize` | <code>string</code> | Font size of the labels. Default: `'12px'`. |
| `dataLabels.style.fontFamily` | <code>string</code> | Font family of the labels; not set uses `chart.fontFamily`. |
| `dataLabels.style.fontWeight` | <code>string \| number</code> | Font weight of the labels. Default: `600`. |
| `dataLabels.style.colors` | <code>any[]</code> | Label colours; not set uses the series colours (or white inside bars and slices). |
| `dataLabels.background` | <code>object</code> | Box drawn behind each label (not on bubble charts). |
| `dataLabels.background.enabled` | <code>boolean</code> | Draws the box. Default: `true`. |
| `dataLabels.background.foreColor` | <code>string</code> | Text colour used when the box is drawn. Default: `'#fff'`. |
| `dataLabels.background.backgroundColor` | <code>string</code> | Box colour; not set uses the series colour. |
| `dataLabels.background.borderRadius` | <code>number</code> | Corner radius of the box in pixels. Default: `2`. |
| `dataLabels.background.padding` | <code>number</code> | Space in pixels between text and box border. Default: `4`. |
| `dataLabels.background.opacity` | <code>number</code> | Opacity of the box (0 to 1). Default: `0.9`. |
| `dataLabels.background.borderWidth` | <code>number</code> | Border width of the box in pixels. Default: `1`. |
| `dataLabels.background.borderColor` | <code>string</code> | Border colour of the box. Default: `'#fff'`. |
| `dataLabels.background.dropShadow` | <code>ApexDropShadow</code> | Shadow behind the box. |
| `dataLabels.background.dropShadow.enabled` | <code>boolean</code> | Draws the shadow. Default: `false`. |
| `dataLabels.background.dropShadow.top` | <code>number</code> | Vertical shadow distance in pixels. Default: `2`. |
| `dataLabels.background.dropShadow.left` | <code>number</code> | Horizontal shadow distance in pixels. Default: `2`. |
| `dataLabels.background.dropShadow.blur` | <code>number</code> | Blur radius in pixels. Default: `4`. |
| `dataLabels.background.dropShadow.opacity` | <code>number</code> | Shadow opacity (0 to 1). Default: `0.7`. |
| `dataLabels.background.dropShadow.color` | <code>string</code> | Shadow colour. Default: `'#000'`. |
| `dataLabels.dropShadow` | <code>ApexDropShadow</code> | Shadow behind the label text. |
| `dataLabels.dropShadow.enabled` | <code>boolean</code> | Draws the shadow. Default: `false`. |
| `dataLabels.dropShadow.top` | <code>number</code> | Vertical shadow distance in pixels. Default: `2`. |
| `dataLabels.dropShadow.left` | <code>number</code> | Horizontal shadow distance in pixels. Default: `2`. |
| `dataLabels.dropShadow.blur` | <code>number</code> | Blur radius in pixels. Default: `4`. |
| `dataLabels.dropShadow.opacity` | <code>number</code> | Shadow opacity (0 to 1). Default: `0.7`. |
| `dataLabels.dropShadow.color` | <code>string</code> | Shadow colour. Default: `'#000'`. |
| `dataLabels.formatter()` | <code>(val: string \| number \| number[], opts?: any): string \| number \| (string \| number)[]</code> | Function that returns the label text from the value and `{ seriesIndex, dataPointIndex, w }`. The built-in one prints the value (percentages on pie and donut). |

## fill

How series areas, bars and slices are filled (solid, gradient, pattern, image).

Type: `ApexFill`

| Option | Type | Description |
| --- | --- | --- |
| `fill.colors` | <code>any[]</code> | Fill colours; not set uses the series colours. |
| `fill.opacity` | <code>number \| number[]</code> | Fill opacity (0 to 1); an array gives one per series. Default: `0.85`. |
| `fill.type` | <code>string \| string[]</code> | 'solid', 'gradient', 'pattern' or 'image'; an array gives one per series. Default: `'solid'`. |
| `fill.gradient` | <code>object</code> | Settings for `type: 'gradient'`. |
| `fill.gradient.shade` | <code>string</code> | 'light' or 'dark': direction in which the series colour is shaded. Default: `'dark'`. |
| `fill.gradient.type` | <code>string</code> | Direction: 'horizontal', 'vertical', 'diagonal1', 'diagonal2' or 'radial'. Default: `'horizontal'`. |
| `fill.gradient.shadeIntensity` | <code>number</code> | Strength of the shading (0 to 1). Default: `0.5`. |
| `fill.gradient.gradientToColors` | <code>string[]</code> | End colours of the gradient per series; not set shades the series colour. |
| `fill.gradient.inverseColors` | <code>boolean</code> | Swaps start and end colour for horizontal bars and similar shapes. Default: `true`. |
| `fill.gradient.opacityFrom` | <code>number \| number[]</code> | Opacity at the start of the gradient. Default: `1`. |
| `fill.gradient.opacityTo` | <code>number \| number[]</code> | Opacity at the end of the gradient. Default: `1`. |
| `fill.gradient.stops` | <code>number[]</code> | Positions in percent where the gradient changes. Default: `[0,50,100]`. |
| `fill.gradient.colorStops` | <code>ApexColorStop[]</code> | Explicit stops; when set they replace the generated gradient. An array of arrays gives stops per series. Default: `[]`. |
| `fill.gradient.colorStops[].offset` | <code>number</code> | Position of the stop along the gradient, in percent (0 to 100). |
| `fill.gradient.colorStops[].color` | <code>string</code> | Colour at this stop. |
| `fill.gradient.colorStops[].opacity` | <code>number</code> | Opacity at this stop (0 to 1). |
| `fill.gradient.colorStops[].offset` | <code>number</code> | Position of the stop along the gradient, in percent (0 to 100). |
| `fill.image` | <code>object</code> | Settings for `type: 'image'`. |
| `fill.image.src` | <code>string \| string[]</code> | Image URL, or one URL per series. Default: `[]`. |
| `fill.image.width` | <code>number</code> | Width of the image tile in pixels; set together with `height`, otherwise the image is stretched to the shape. |
| `fill.image.height` | <code>number</code> | Height of the image tile in pixels; set together with `width`. |
| `fill.pattern` | <code>object</code> | Settings for `type: 'pattern'`. |
| `fill.pattern.style` | <code>string \| string[]</code> | 'verticalLines', 'horizontalLines', 'slantedLines', 'squares' or 'circles'; an array gives one per series. Default: `'squares'`. |
| `fill.pattern.width` | <code>number</code> | Width of the pattern tile in pixels. Default: `6`. |
| `fill.pattern.height` | <code>number</code> | Height of the pattern tile in pixels. Default: `6`. |
| `fill.pattern.strokeWidth` | <code>number</code> | Line width inside the pattern in pixels. Default: `2`. |

## forecastDataPoints

Draws the last points of line series dashed, to mark them as a forecast.

Type: `ApexForecastDataPoints`

| Option | Type | Description |
| --- | --- | --- |
| `forecastDataPoints.count` | <code>number</code> | Number of points at the end of each line series drawn as forecast; 0 turns it off. Default: `0`. |
| `forecastDataPoints.fillOpacity` | <code>number</code> | Opacity of the forecast part (0 to 1). Default: `0.5`. |
| `forecastDataPoints.strokeWidth` | <code>undefined \| number</code> | Line width of the forecast part; not set keeps the series width. |
| `forecastDataPoints.dashArray` | <code>number</code> | Dash length of the forecast part in pixels. Default: `4`. |

## grid

Grid lines, background bands and the padding around the plot.

Type: `ApexGrid`

| Option | Type | Description |
| --- | --- | --- |
| `grid.show` | <code>boolean</code> | Draws the grid lines. Default: `true`. |
| `grid.borderColor` | <code>string</code> | Colour of the grid lines. Default: `'#e0e0e0'`. |
| `grid.strokeDashArray` | <code>number</code> | Dash length of the grid lines; 0 draws solid lines. Default: `0`. |
| `grid.position` | <code>'front' \| 'back'</code> | 'back' draws the grid behind the series, 'front' above them. Default: `'back'`. |
| `grid.xaxis` | <code>object</code> | Vertical grid lines (at the x ticks). |
| `grid.xaxis.lines` | <code>object</code> | Vertical grid lines. |
| `grid.xaxis.lines.show` | <code>boolean</code> | Draws the vertical grid lines. Default: `false`. |
| `grid.xaxis.lines.offsetX` | <code>number</code> | Moves the vertical lines horizontally. |
| `grid.xaxis.lines.offsetY` | <code>number</code> | Moves the vertical lines vertically. |
| `grid.yaxis` | <code>object</code> | Horizontal grid lines (at the y ticks). |
| `grid.yaxis.lines` | <code>object</code> | Horizontal grid lines. |
| `grid.yaxis.lines.show` | <code>boolean</code> | Draws the horizontal grid lines. Default: `true`. |
| `grid.yaxis.lines.offsetX` | <code>number</code> | Moves the horizontal lines horizontally. |
| `grid.yaxis.lines.offsetY` | <code>number</code> | Moves the horizontal lines vertically. |
| `grid.row` | <code>object</code> | Alternating background bands between horizontal grid lines. |
| `grid.row.colors` | <code>string[]</code> | Colours of the bands, repeated in order; not set draws no bands. |
| `grid.row.opacity` | <code>number</code> | Opacity of the bands (0 to 1). Default: `0.5`. |
| `grid.column` | <code>object</code> | Alternating background bands between vertical grid lines. |
| `grid.column.colors` | <code>string[]</code> | Colours of the bands, repeated in order; not set draws no bands. |
| `grid.column.opacity` | <code>number</code> | Opacity of the bands (0 to 1). Default: `0.5`. |
| `grid.padding` | <code>object</code> | Space in pixels between the grid area and the chart edges. |
| `grid.padding.top` | <code>number</code> | Space above the grid. Default: `0`. |
| `grid.padding.right` | <code>number</code> | Space right of the grid. Default: `10`. |
| `grid.padding.bottom` | <code>number</code> | Space below the grid. Default: `0`. |
| `grid.padding.left` | <code>number</code> | Space left of the grid. Default: `12`. |

## labels

Names of the slices for pie, donut, polar area and radial bar charts, or x categories for axis charts. Default: `[]`.

Type: `Array&lt;string \| number&gt;`

## legend

The list of series names with their colours.

Type: `ApexLegend`

| Option | Type | Description |
| --- | --- | --- |
| `legend.show` | <code>boolean</code> | Shows the legend. Default: `true`. |
| `legend.showForSingleSeries` | <code>boolean</code> | Shows the legend even when there is only one series. Default: `false`. |
| `legend.showForNullSeries` | <code>boolean</code> | Lists series that contain only null values. Default: `true`. |
| `legend.showForZeroSeries` | <code>boolean</code> | Lists series whose values are all zero. Default: `true`. |
| `legend.floating` | <code>boolean</code> | Takes the legend out of the layout so it overlaps the plot instead of taking space. Default: `false`. |
| `legend.inverseOrder` | <code>boolean</code> | Lists the series in reverse order. Default: `false`. |
| `legend.position` | <code>'top' \| 'right' \| 'bottom' \| 'left'</code> | Side of the chart: 'top', 'right', 'bottom' or 'left'. Default: `'bottom'`. |
| `legend.horizontalAlign` | <code>'left' \| 'center' \| 'right'</code> | Alignment of a top/bottom legend: 'left', 'center' or 'right'. Default: `'center'`. |
| `legend.fontSize` | <code>string</code> | Font size of the legend texts. Default: `'12px'`. |
| `legend.fontFamily` | <code>string</code> | Font family of the legend texts; not set uses `chart.fontFamily`. |
| `legend.fontWeight` | <code>string \| number</code> | Font weight of the legend texts. Default: `400`. |
| `legend.width` | <code>number</code> | Fixed width of the legend in pixels. |
| `legend.height` | <code>number</code> | Fixed height of the legend in pixels. |
| `legend.offsetX` | <code>number</code> | Moves the legend horizontally. Default: `-20`. |
| `legend.offsetY` | <code>number</code> | Moves the legend vertically. Default: `4`. |
| `legend.formatter()` | <code>(legendName: string, opts?: any): string</code> | Function that returns the text of an entry from the series name and `{ seriesIndex, w }`. |
| `legend.tooltipHoverFormatter()` | <code>(legendName: string, opts?: any): string</code> | Function that returns the entry text while the tooltip hovers a data point, so the legend can show the hovered value. |
| `legend.customLegendItems` | <code>string[]</code> | Texts that replace the series names as legend entries. Default: `[]`. |
| `legend.clusterGroupedSeries` | <code>boolean</code> | With `series[].group`, puts the entries of each group into its own block. Default: `true`. |
| `legend.clusterGroupedSeriesOrientation` | <code>string</code> | Direction in which the group blocks are laid out: 'vertical' or 'horizontal'. Default: `'vertical'`. |
| `legend.labels` | <code>object</code> | Colours of the entry texts. |
| `legend.labels.colors` | <code>string \| string[]</code> | Text colour; an array gives one colour per entry. |
| `legend.labels.useSeriesColors` | <code>boolean</code> | Colours each entry text with its series colour. Default: `false`. |
| `legend.markers` | <code>object</code> | The coloured symbols in front of the entries. |
| `legend.markers.size` | <code>number</code> | Size of the symbol in pixels. Default: `7`. |
| `legend.markers.strokeWidth` | <code>number \| number[]</code> | Outline width of the symbol in pixels, or one per series. Default: `1`. |
| `legend.markers.fillColors` | <code>string[]</code> | Symbol colours; not set uses the series colours. |
| `legend.markers.shape` | <code>ApexMarkerShape</code> | Symbol shape ('circle', 'square', 'line', 'plus', 'cross' ...); not set follows the series marker shape. |
| `legend.markers.offsetX` | <code>number</code> | Moves the symbols horizontally. Default: `0`. |
| `legend.markers.offsetY` | <code>number</code> | Moves the symbols vertically. Default: `0`. |
| `legend.markers.customHTML` | <code>(() =&gt; any) \| Array&lt;() =&gt; any&gt;</code> | Function (or one per series) returning markup that replaces the symbol. |
| `legend.markers.onClick()` | <code>(): void</code> | Called when a legend symbol is clicked. |
| `legend.itemMargin` | <code>object</code> | Space around each entry. |
| `legend.itemMargin.horizontal` | <code>number</code> | Space in pixels left and right of each entry. Default: `5`. |
| `legend.itemMargin.vertical` | <code>number</code> | Space in pixels above and below each entry. Default: `4`. |
| `legend.onItemClick` | <code>object</code> | What a click on an entry does. |
| `legend.onItemClick.toggleDataSeries` | <code>boolean</code> | Hides or shows the series of the clicked entry. Default: `true`. |
| `legend.onItemHover` | <code>object</code> | What hovering an entry does. |
| `legend.onItemHover.highlightDataSeries` | <code>boolean</code> | Dims the other series while an entry is hovered. Default: `true`. |

## markers

Point markers of line, area and scatter series.

Type: `ApexMarkers`

| Option | Type | Description |
| --- | --- | --- |
| `markers.size` | <code>number \| number[]</code> | Marker radius in pixels; 0 hides markers until a point is hovered. An array gives one per series. Default: `0`. |
| `markers.colors` | <code>string \| string[]</code> | Marker fill colours; not set uses the series colours. |
| `markers.strokeColors` | <code>string \| string[]</code> | Marker outline colour (or one per series). Default: `'#fff'`. |
| `markers.strokeWidth` | <code>number \| number[]</code> | Marker outline width in pixels. Default: `2`. |
| `markers.strokeOpacity` | <code>number \| number[]</code> | Marker outline opacity (0 to 1). Default: `0.9`. |
| `markers.strokeDashArray` | <code>number \| number[]</code> | Dash length of the outline; 0 draws a solid outline. Default: `0`. |
| `markers.fillOpacity` | <code>number \| number[]</code> | Marker fill opacity (0 to 1). Default: `1`. |
| `markers.discrete` | <code>ApexDiscretePoint[]</code> | Individual markers with their own look, addressed by series and data index. Default: `[]`. |
| `markers.discrete[].seriesIndex` | <code>number</code> | Series of the point. |
| `markers.discrete[].dataPointIndex` | <code>number</code> | Index of the point in its series. |
| `markers.discrete[].fillColor` | <code>string</code> | Fill colour of this marker. |
| `markers.discrete[].strokeColor` | <code>string</code> | Outline colour of this marker. |
| `markers.discrete[].size` | <code>number</code> | Size of this marker in pixels. |
| `markers.discrete[].shape` | <code>ApexMarkerShape</code> | Shape of this marker. |
| `markers.shape` | <code>ApexMarkerShape</code> | 'circle', 'square', 'rect', 'diamond', 'triangle', 'cross', 'plus', 'star' or 'sparkle'; an array gives one per series. Default: `'circle'`. |
| `markers.offsetX` | <code>number</code> | Moves the markers horizontally. Default: `0`. |
| `markers.offsetY` | <code>number</code> | Moves the markers vertically. Default: `0`. |
| `markers.showNullDataPoints` | <code>boolean</code> | After a null value, draws a marker on the next point so values that stand alone between gaps stay visible. Default: `true`. |
| `markers.onClick()` | <code>(e?: any): void</code> | Called when a marker is clicked. |
| `markers.onDblClick()` | <code>(e?: any): void</code> | Called when a marker is double-clicked. |
| `markers.hover` | <code>object</code> | Marker size while hovered. |
| `markers.hover.size` | <code>number</code> | Fixed hover radius in pixels; when set it replaces `sizeOffset`. |
| `markers.hover.sizeOffset` | <code>number</code> | Pixels added to the radius while hovered. Default: `3`. |

## noData

Text shown when there is no data to draw.

Type: `ApexNoData`

| Option | Type | Description |
| --- | --- | --- |
| `noData.text` | <code>string</code> | The text; not set shows nothing for empty charts. |
| `noData.align` | <code>'left' \| 'right' \| 'center'</code> | 'left', 'center' or 'right'. Default: `'center'`. |
| `noData.verticalAlign` | <code>'top' \| 'middle' \| 'bottom'</code> | 'top', 'middle' or 'bottom'. Default: `'middle'`. |
| `noData.offsetX` | <code>number</code> | Moves the text horizontally. Default: `0`. |
| `noData.offsetY` | <code>number</code> | Moves the text vertically. Default: `0`. |
| `noData.style` | <code>object</code> | Text style. |
| `noData.style.color` | <code>string</code> | Text colour; not set uses `chart.foreColor`. |
| `noData.style.fontSize` | <code>string</code> | Font size. Default: `'14px'`. |
| `noData.style.fontFamily` | <code>string</code> | Font family; not set uses `chart.fontFamily`. |

## plotOptions

Settings that belong to one chart type, grouped by type name.

Type: `ApexPlotOptions & WccCorePlotOptionAdditions & WccTypePlotOptions & WccPremiumPlotOptions`

| Option | Type | Description |
| --- | --- | --- |
| `plotOptions.line` | <code>object</code> | Settings of line series. |
| `plotOptions.line.isSlopeChart` | <code>boolean</code> | Draws a slope chart: each series connects its first and last value, with labels at both ends. Default: `false`. |
| `plotOptions.line.colors` | <code>object</code> | Colours a line by value relative to a threshold. |
| `plotOptions.line.colors.threshold` | <code>number</code> | The value at which the line changes colour. Default: `0`. |
| `plotOptions.line.colors.colorAboveThreshold` | <code>string</code> | Line colour above the threshold. |
| `plotOptions.line.colors.colorBelowThreshold` | <code>string</code> | Line colour below the threshold. |
| `plotOptions.area` | <code>object</code> | Settings of area series. |
| `plotOptions.area.fillTo` | <code>'origin' \| 'end'</code> | 'origin' fills down to the zero line; 'end' fills to the bottom of the plot. Default: `'origin'`. |
| `plotOptions.bar` | <code>object</code> | Settings of bar, column and range bar series. Dumbbell settings of bar charts. |
| `plotOptions.bar.wcc` | <code>object</code> | West Coast Charts: opt-in bar marks. |
| `plotOptions.bar.wcc.mark` | <code>'lollipop' \| 'ringStem'</code> | `'lollipop'` (stem and dot) or `'ringStem'` (stem and ring) instead of the bar. |
| `plotOptions.bar.wcc.stemWidth` | <code>number</code> | Stem width in pixels. Default: `2`. |
| `plotOptions.bar.wcc.headRadius` | <code>number</code> | Head radius in pixels. Default: `6`. |
| `plotOptions.bar.horizontal` | <code>boolean</code> | Draws horizontal bars instead of vertical columns. Default: `false`. |
| `plotOptions.bar.columnWidth` | <code>string \| number</code> | Width of a column as a percentage of its category slot (or pixels as a number); vertical bars only. Default: `'70%'`. |
| `plotOptions.bar.barHeight` | <code>string \| number</code> | Height of a bar as a percentage of its category slot (or pixels as a number); horizontal bars only. Default: `'70%'`. |
| `plotOptions.bar.distributed` | <code>boolean</code> | Gives every bar of a single series its own palette colour (and its own legend entry). Default: `false`. |
| `plotOptions.bar.borderRadius` | <code>number</code> | Corner radius of the bars in pixels. Default: `0`. |
| `plotOptions.bar.borderRadiusApplication` | <code>'around' \| 'end'</code> | 'around' rounds both ends of a bar; 'end' rounds only the end away from the axis (for stacks: only the outer end of the stack). Default: `'around'`. |
| `plotOptions.bar.borderRadiusWhenStacked` | <code>'all' \| 'last'</code> | Accepted for ApexCharts 4.x compatibility; stacked rounding follows `borderRadiusApplication`. Default: `'last'`. |
| `plotOptions.bar.hideZeroBarsWhenGrouped` | <code>boolean</code> | In grouped bars, leaves no gap for zero values: the remaining bars of the category share its slot. Default: `false`. |
| `plotOptions.bar.rangeBarOverlap` | <code>boolean</code> | With `rangeBarGroupRows`, false moves overlapping ranges in a row into separate lanes; true lets them overlap. Default: `true`. |
| `plotOptions.bar.rangeBarGroupRows` | <code>boolean</code> | Puts the ranges of all series with the same x label into one row (timeline view). Default: `false`. |
| `plotOptions.bar.isDumbbell` | <code>boolean</code> | Draws range bars as dumbbells: a thin bar with a dot at each end. Default: `false`. |
| `plotOptions.bar.dumbbellColors` | <code>string[][]</code> | Colours of the two dumbbell ends per series (`[[start, end], ...]`); not set uses the series colours. |
| `plotOptions.bar.isFunnel` | <code>boolean</code> | Draws a horizontal bar series as a centred funnel. Default: `false`. |
| `plotOptions.bar.isFunnel3d` | <code>boolean</code> | Adds the shaded connecting faces between funnel steps. Default: `true`. |
| `plotOptions.bar.colors` | <code>object</code> | Colouring of bars by value and the background bars. |
| `plotOptions.bar.colors.ranges` | <code>object[]</code> | Value ranges with their own bar colour. Default: `[]`. |
| `plotOptions.bar.colors.ranges[].from` | <code>number</code> | Lower end of the range (inclusive). |
| `plotOptions.bar.colors.ranges[].to` | <code>number</code> | Upper end of the range (inclusive). |
| `plotOptions.bar.colors.ranges[].color` | <code>string</code> | Bar colour for values in the range. |
| `plotOptions.bar.colors.backgroundBarColors` | <code>string[]</code> | Colours of full-length bars drawn behind each category, repeated in order; empty draws none. Default: `[]`. |
| `plotOptions.bar.colors.backgroundBarOpacity` | <code>number</code> | Opacity of the background bars (0 to 1). Default: `1`. |
| `plotOptions.bar.colors.backgroundBarRadius` | <code>number</code> | Corner radius of the background bars in pixels. Default: `0`. |
| `plotOptions.bar.dataLabels` | <code>object</code> | Placement of the value labels on bars. |
| `plotOptions.bar.dataLabels.maxItems` | <code>number</code> | Above this many bars with labels enabled, a performance warning is logged. Default: `100`. |
| `plotOptions.bar.dataLabels.hideOverflowingLabels` | <code>boolean</code> | Hides a label that does not fit inside its bar. Default: `true`. |
| `plotOptions.bar.dataLabels.position` | <code>string</code> | 'top', 'center' or 'bottom' of the bar (for horizontal bars: end, centre, start). Default: `'top'`. |
| `plotOptions.bar.dataLabels.orientation` | <code>'horizontal' \| 'vertical'</code> | 'horizontal' or 'vertical' text. Default: `'horizontal'`. |
| `plotOptions.bar.dataLabels.total` | <code>object</code> | Sum label at the end of each stack. |
| `plotOptions.bar.dataLabels.total.enabled` | <code>boolean</code> | Shows the stack totals (stacked bars only). Default: `false`. |
| `plotOptions.bar.dataLabels.total.formatter()` | <code>(val?: string, opts?: any): string,</code> | Function that returns the total text from the sum. |
| `plotOptions.bar.dataLabels.total.offsetX` | <code>number</code> | Moves the totals horizontally. Default: `0`. |
| `plotOptions.bar.dataLabels.total.offsetY` | <code>number</code> | Moves the totals vertically. Default: `0`. |
| `plotOptions.bar.dataLabels.total.style` | <code>object</code> | Text style of the totals. |
| `plotOptions.bar.dataLabels.total.style.color` | <code>string</code> | Text colour of the totals; unset inherits `chart.foreColor`. An explicit colour overrides the theme. |
| `plotOptions.bar.dataLabels.total.style.fontSize` | <code>string</code> | Font size of the totals. Default: `'12px'`. |
| `plotOptions.bar.dataLabels.total.style.fontFamily` | <code>string</code> | Font family of the totals; not set uses `chart.fontFamily`. |
| `plotOptions.bar.dataLabels.total.style.fontWeight` | <code>number \| string</code> | Font weight of the totals. Default: `600`. |
| `plotOptions.bar.dumbbell` | <code>object</code> | Settings of dumbbell bars. |
| `plotOptions.bar.dumbbell.connector` | <code>object</code> | Line joining the two ends of a dumbbell. |
| `plotOptions.bar.dumbbell.connector.color` | <code>WccColor</code> | Connector colour; not set draws a gradient between the two end colours. |
| `plotOptions.bar.dumbbell.connector.opacity` | <code>number</code> | Connector opacity. Default: `0.55`. |
| `plotOptions.bar.dumbbell.dataLabels` | <code>object</code> | Value labels at both ends. |
| `plotOptions.bar.dumbbell.dataLabels.enabled` | <code>boolean</code> | Draws the end labels. Default: `false`. |
| `plotOptions.bar.dumbbell.dataLabels.offset` | <code>number</code> | Distance of a label from its end marker in pixels. Default: `6`. |
| `plotOptions.bar.dumbbell.dataLabels.colorFromMarker` | <code>boolean</code> | Colours each label like its end marker. Default: `true`. |
| `plotOptions.bar.dumbbell.dataLabels.formatter` | <code>WccCallback</code> | Returns the label text. |
| `plotOptions.bar.dumbbell.dataLabels.style` | <code>WccTextStyle</code> | Text style of the labels (fontSize default '12px', fontWeight 600). |
| `plotOptions.bar.dumbbell.dataLabels.style.fontSize` | <code>string \| number</code> | Font size. |
| `plotOptions.bar.dumbbell.dataLabels.style.fontFamily` | <code>string</code> | Font family; not set uses the chart font. |
| `plotOptions.bar.dumbbell.dataLabels.style.fontWeight` | <code>string \| number</code> | Font weight. |
| `plotOptions.bar.dumbbell.dataLabels.style.colors` | <code>string[]</code> | Text colours; an array gives one per series or item. |
| `plotOptions.bar.dumbbell.tooltip` | <code>object</code> | Tooltip additions of dumbbells. |
| `plotOptions.bar.dumbbell.tooltip.differenceLabel` | <code>string</code> | Label of the difference row in the tooltip. Default: `'Difference'`. |
| `plotOptions.bubble` | <code>object</code> | Settings of bubble series. |
| `plotOptions.bubble.zScaling` | <code>boolean</code> | Scales the z values to the plot size; false uses z directly as the radius in pixels. Default: `true`. |
| `plotOptions.bubble.minBubbleRadius` | <code>number</code> | Smallest radius in pixels; smaller bubbles are enlarged to it. |
| `plotOptions.bubble.maxBubbleRadius` | <code>number</code> | Largest radius in pixels; bigger bubbles are reduced to it. |
| `plotOptions.bubble.minZ` | <code>number</code> | z values mapped to the smallest / largest bubble (default: the data range) |
| `plotOptions.bubble.maxZ` | <code>number</code> | Fixes the top of the z range instead of taking the data maximum, so several charts size bubbles alike. |
| `plotOptions.candlestick` | <code>object</code> | Settings of candlestick series. |
| `plotOptions.candlestick.type` | <code>string</code> | 'candlestick' (boxes) or 'ohlc' (open/close ticks on a line). |
| `plotOptions.candlestick.colors` | <code>object</code> | Colours of rising and falling candles. |
| `plotOptions.candlestick.colors.upward` | <code>string \| string[]</code> | Colour when close is above open. Default: `'#00B746'`. |
| `plotOptions.candlestick.colors.downward` | <code>string \| string[]</code> | Colour when close is below open. Default: `'#EF403C'`. |
| `plotOptions.candlestick.wick` | <code>object</code> | The high/low lines. |
| `plotOptions.candlestick.wick.useFillColor` | <code>boolean</code> | Draws the wick in the candle colour; false uses the stroke colour. Default: `true`. |
| `plotOptions.boxPlot` | <code>object</code> | Settings of box plot series. Raw-sample settings of box plots. |
| `plotOptions.boxPlot.wcc` | <code>object</code> | West Coast Charts: box plot extras. |
| `plotOptions.boxPlot.wcc.jitter` | <code>number</code> | Spread (0 to 1 of the box width) of scatter series drawn over the boxes; same on every render. Default: `0`. |
| `plotOptions.boxPlot.colors` | <code>object</code> | Colours of the two box halves. |
| `plotOptions.boxPlot.colors.upper` | <code>string \| string[]</code> | Colour of the part between median and upper quartile. Default: `'#00E396'`. |
| `plotOptions.boxPlot.colors.lower` | <code>string \| string[]</code> | Colour of the part between lower quartile and median. Default: `'#008FFB'`. |
| `plotOptions.boxPlot.whiskers` | <code>'minmax' \| 'tukey' \| 'percentile'</code> | raw-sample boxes (data[].points): whisker rule; needs west-coast-charts/types |
| `plotOptions.boxPlot.whiskerPercentiles` | <code>[number, number]</code> | quantiles (percent) for whiskers: 'percentile'; default [5, 95] |
| `plotOptions.boxPlot.points` | <code>WccSamplePoints</code> | observation dots over raw-sample boxes Raw samples drawn over the boxes. |
| `plotOptions.boxPlot.points.show` | <code>boolean \| 'all' \| 'outliers'</code> | true or 'all' draws every sample, 'outliers' only those beyond the whiskers; false draws none. Needs `west-coast-charts/types`. |
| `plotOptions.boxPlot.points.shape` | <code>'circle' \| 'square'</code> | Dot shape. Default: `'circle'`. |
| `plotOptions.boxPlot.points.size` | <code>number</code> | Dot radius in pixels. Default: `2.5`. |
| `plotOptions.boxPlot.points.jitter` | <code>number</code> | Horizontal spread of the dots as a share of the box width (0 to 1). Default: `0.5`. |
| `plotOptions.boxPlot.points.maxPoints` | <code>number</code> | Upper limit of drawn dots per chart. Default: `3000`. |
| `plotOptions.boxPlot.points.opacity` | <code>number</code> | Dot opacity (0 to 1). |
| `plotOptions.boxPlot.points.fillColor` | <code>'series-dark' \| 'series' \| string</code> | 'series-dark' (a darker series colour), 'series' or any CSS colour. |
| `plotOptions.boxPlot.points.strokeColor` | <code>string</code> | Dot outline colour; white or not set uses the theme surface colour. |
| `plotOptions.boxPlot.points.strokeWidth` | <code>number</code> | Dot outline width in pixels. |
| `plotOptions.boxPlot.points.colorScale` | <code>WccColorScale</code> | Colours the dots by value instead of a fixed colour. Colours the points by value instead of by series (violin default: 24 steps). |
| `plotOptions.boxPlot.points.colorScale.colors` | <code>string[]</code> | Colours from the lowest to the highest value. |
| `plotOptions.boxPlot.points.colorScale.min` | <code>number</code> | Value mapped to the first colour; not set uses the smallest sample. |
| `plotOptions.boxPlot.points.colorScale.max` | <code>number</code> | Value mapped to the last colour; not set uses the largest sample. |
| `plotOptions.boxPlot.points.colorScale.steps` | <code>number</code> | Number of discrete colour steps; not set gives a continuous scale. |
| `plotOptions.boxPlot.points.colorScale.colors` | <code>string[]</code> | Colours from the lowest to the highest value. |
| `plotOptions.boxPlot.points.show` | <code>boolean \| 'all' \| 'outliers'</code> | false: none; true or 'all': every sample; 'outliers': only those outside the whiskers |
| `plotOptions.heatmap` | <code>object</code> | Settings of heatmap series. Cell shape settings of heatmaps. |
| `plotOptions.heatmap.wcc` | <code>object</code> | West Coast Charts: heatmap extras. |
| `plotOptions.heatmap.wcc.centerTimeLabels` | <code>boolean</code> | Datetime x axis: centres the time labels on the equal-width cells. Default: `false`. |
| `plotOptions.heatmap.radius` | <code>number</code> | Corner radius of the cells in pixels. Default: `2`. |
| `plotOptions.heatmap.enableShades` | <code>boolean</code> | Shades each cell from its series colour by value; false uses the flat colour. Default: `true`. |
| `plotOptions.heatmap.shadeIntensity` | <code>number</code> | Strength of the value shading (0 to 1). Default: `0.5`. |
| `plotOptions.heatmap.reverseNegativeShade` | <code>boolean</code> | With negative values, shades by distance from zero so large negative values are dark too. Default: `false`. |
| `plotOptions.heatmap.distributed` | <code>boolean</code> | Shades each row by its own minimum and maximum instead of the whole chart. Default: `false`. |
| `plotOptions.heatmap.useFillColorAsStroke` | <code>boolean</code> | Draws the cell border in the cell colour instead of the stroke colour. Default: `false`. |
| `plotOptions.heatmap.colorScale` | <code>object</code> | Fixed colours for value ranges. |
| `plotOptions.heatmap.colorScale.ranges` | <code>object[]</code> | Value ranges with their own colour; cells outside every range keep the series colour. Default: `[]`. |
| `plotOptions.heatmap.colorScale.ranges[].from` | <code>number</code> | Lower end of the range. |
| `plotOptions.heatmap.colorScale.ranges[].to` | <code>number</code> | Upper end of the range. |
| `plotOptions.heatmap.colorScale.ranges[].color` | <code>string</code> | Cell colour for values in the range. |
| `plotOptions.heatmap.colorScale.ranges[].foreColor` | <code>string</code> | Data label colour on cells in the range. |
| `plotOptions.heatmap.colorScale.ranges[].name` | <code>string</code> | Legend text for the range. |
| `plotOptions.heatmap.colorScale.inverse` | <code>boolean</code> | Reverses the shading direction (high values light). Default: `false`. |
| `plotOptions.heatmap.colorScale.min` | <code>number</code> | Value treated as the minimum for shading; not set uses the data minimum. |
| `plotOptions.heatmap.colorScale.max` | <code>number</code> | Value treated as the maximum for shading; not set uses the data maximum. |
| `plotOptions.heatmap.shape` | <code>'rect' \| 'hexagon' \| 'circle' \| 'diamond'</code> | Cell shape: 'rect', 'hexagon', 'circle' or 'diamond'. Default: `'rect'`. |
| `plotOptions.heatmap.shapeAspect` | <code>'regular' \| 'fill'</code> | hexagons: 'regular' (letterboxed) or 'fill' (stretched) |
| `plotOptions.heatmap.empty` | <code>object \| boolean</code> | Cells without a value (null) as their own state, such as closed hours: a neutral hatch instead of a colour of the scale, a legend entry after the colour ranges, and the label in the tooltip, the data table and `describe()`. `true` uses the label 'No value'. Needs the chart types bundle. Default: not set (null cells keep the 4.7.0 behaviour). |
| `plotOptions.heatmap.empty.label` | <code>string</code> | Name of the state, such as 'closed'. Default: `'No value'`. |
| `plotOptions.heatmap.empty.color` | <code>WccColor</code> | Hatch colour; not set uses a neutral grey of the theme. |
| `plotOptions.heatmap.empty.legend` | <code>boolean</code> | Legend entry after the colour ranges (only with `colorScale.ranges`). Default: `true`. |
| `plotOptions.treemap` | <code>object</code> | Settings of treemap series. Zoom settings of nested treemaps. |
| `plotOptions.treemap.enableShades` | <code>boolean</code> | Shades each tile from its series colour by value. Default: `true`. |
| `plotOptions.treemap.shadeIntensity` | <code>number</code> | Strength of the value shading (0 to 1). Default: `0.5`. |
| `plotOptions.treemap.distributed` | <code>boolean</code> | Gives every tile its own palette colour. Default: `false`. |
| `plotOptions.treemap.reverseNegativeShade` | <code>boolean</code> | With negative values, shades by distance from zero. Default: `false`. |
| `plotOptions.treemap.useFillColorAsStroke` | <code>boolean</code> | Draws the tile border in the tile colour. Default: `false`. |
| `plotOptions.treemap.dataLabels` | <code>object</code> | Text of the tile labels. Nested treemaps: labels of the leaf tiles. |
| `plotOptions.treemap.dataLabels.format` | <code>'scale' \| 'truncate'</code> | 'scale' shrinks the font to fit the tile; 'truncate' keeps the size and cuts the text. Default: `'scale'`. |
| `plotOptions.treemap.dataLabels.showValue` | <code>boolean</code> | Shows the value under the name. Default: `true`. |
| `plotOptions.treemap.dataLabels.minFontSize` | <code>number</code> | Smallest font size in pixels before a label is dropped. |
| `plotOptions.treemap.dataLabels.align` | <code>'left' \| 'center'</code> | Horizontal label position: `'left'` or `'center'`. Default: `'left'`. |
| `plotOptions.treemap.borderRadius` | <code>number</code> | Corner radius of the tiles in pixels. Default: `4`. |
| `plotOptions.treemap.colorScale` | <code>object</code> | Fixed colours for value ranges. Nested treemaps: continuous colour by a second metric. |
| `plotOptions.treemap.colorScale.inverse` | <code>boolean</code> | Reverses the shading direction. Default: `false`. |
| `plotOptions.treemap.colorScale.ranges` | <code>object[]</code> | Value ranges with their own colour. Default: `[]`. |
| `plotOptions.treemap.colorScale.ranges[].from` | <code>number</code> | Lower end of the range. |
| `plotOptions.treemap.colorScale.ranges[].to` | <code>number</code> | Upper end of the range. |
| `plotOptions.treemap.colorScale.ranges[].color` | <code>string</code> | Tile colour for values in the range. |
| `plotOptions.treemap.colorScale.ranges[].foreColor` | <code>string</code> | Label colour on tiles in the range. |
| `plotOptions.treemap.colorScale.ranges[].name` | <code>string</code> | Legend text for the range. |
| `plotOptions.treemap.colorScale.min` | <code>number</code> | Value treated as the minimum for shading. |
| `plotOptions.treemap.colorScale.max` | <code>number</code> | Value treated as the maximum for shading. |
| `plotOptions.treemap.colorScale.colorValue` | <code>string \| ((point: any, ctx: { node: any, w: any }) =&gt; number)</code> | Field of the data points (or function of the raw point and `{ node, w }`) that colours the tiles on a gradient. |
| `plotOptions.treemap.colorScale.gradient` | <code>object</code> | The colour gradient of `colorValue`. |
| `plotOptions.treemap.colorScale.gradient.enabled` | <code>boolean</code> | `false` keeps the series colours. Default: `true`. |
| `plotOptions.treemap.colorScale.gradient.min` | <code>number</code> | Lower end of the domain; not set uses the data minimum. |
| `plotOptions.treemap.colorScale.gradient.max` | <code>number</code> | Upper end of the domain; not set uses the data maximum. |
| `plotOptions.treemap.colorScale.gradient.midpoint` | <code>number</code> | Value of the middle colour; defaults to 0 when the domain spans 0. |
| `plotOptions.treemap.colorScale.gradient.symmetric` | <code>boolean</code> | Balances the domain around `midpoint`. Default: `false`. |
| `plotOptions.treemap.colorScale.gradient.stops` | <code>object[]</code> | Own colour stops. |
| `plotOptions.treemap.colorScale.gradient.stops[].value` | <code>number</code> |  |
| `plotOptions.treemap.colorScale.gradient.stops[].color` | <code>string</code> |  |
| `plotOptions.treemap.colorScale.gradientLegend` | <code>object</code> | Gradient strip that replaces the categorical legend. |
| `plotOptions.treemap.colorScale.gradientLegend.enabled` | <code>boolean</code> | Draws the strip. Default: `true`. |
| `plotOptions.treemap.colorScale.gradientLegend.width` | <code>number \| string</code> | Strip length in pixels or as a `'60%'` string. Default: `min(320, 60% of the width)`. |
| `plotOptions.treemap.colorScale.gradientLegend.thickness` | <code>number</code> | Strip thickness in pixels. Default: `10`. |
| `plotOptions.treemap.colorScale.gradientLegend.align` | <code>'left' \| 'center' \| 'right'</code> | Strip position: `'left'`, `'center'` or `'right'`. Default: `'center'`. |
| `plotOptions.treemap.colorScale.gradientLegend.stops` | <code>number</code> | Gradient steps drawn (2 to 64). Default: `16`. |
| `plotOptions.treemap.colorScale.gradientLegend.showLabels` | <code>boolean</code> | Shows the min and max labels. Default: `true`. |
| `plotOptions.treemap.colorScale.gradientLegend.showHoverValue` | <code>boolean</code> | Moves an arrow to the value of the hovered tile. Default: `true`. |
| `plotOptions.treemap.colorScale.gradientLegend.labelStyle` | <code>object</code> | Style of the labels. |
| `plotOptions.treemap.colorScale.gradientLegend.labelStyle.fontSize` | <code>number \| string</code> |  |
| `plotOptions.treemap.colorScale.gradientLegend.labelStyle.color` | <code>string</code> |  |
| `plotOptions.treemap.colorScale.gradientLegend.labelStyle.fontFamily` | <code>string</code> |  |
| `plotOptions.treemap.colorScale.gradientLegend.arrow` | <code>object</code> | Hover arrow. |
| `plotOptions.treemap.colorScale.gradientLegend.arrow.size` | <code>number</code> |  |
| `plotOptions.treemap.colorScale.gradientLegend.arrow.color` | <code>string</code> |  |
| `plotOptions.treemap.colorScale.gradientLegend.formatter` | <code>(value: number) =&gt; string</code> | Formats the labels and hover value. |
| `plotOptions.treemap.seriesTitle` | <code>object</code> | Name badge drawn on each series block when there are several series. |
| `plotOptions.treemap.seriesTitle.show` | <code>boolean</code> | Shows the badges. Default: `true`. |
| `plotOptions.treemap.seriesTitle.offsetY` | <code>number</code> | Moves the badge vertically. Default: `1`. |
| `plotOptions.treemap.seriesTitle.offsetX` | <code>number</code> | Moves the badge horizontally. Default: `1`. |
| `plotOptions.treemap.seriesTitle.borderColor` | <code>string</code> | Badge border colour. Default: `'#000'`. |
| `plotOptions.treemap.seriesTitle.borderWidth` | <code>number</code> | Badge border width in pixels. Default: `1`. |
| `plotOptions.treemap.seriesTitle.borderRadius` | <code>number</code> | Badge corner radius in pixels. Default: `2`. |
| `plotOptions.treemap.seriesTitle.style` | <code>object</code> | Text and box style of the badge. |
| `plotOptions.treemap.seriesTitle.style.background` | <code>string</code> | Badge background colour. Default: `'rgba(0, 0, 0, 0.6)'`. |
| `plotOptions.treemap.seriesTitle.style.color` | <code>string</code> | Badge text colour. Default: `'#fff'`. |
| `plotOptions.treemap.seriesTitle.style.fontSize` | <code>string</code> | Badge font size. Default: `'12px'`. |
| `plotOptions.treemap.seriesTitle.style.fontFamily` | <code>string</code> | Badge font family. |
| `plotOptions.treemap.seriesTitle.style.fontWeight` | <code>number \| string</code> | Badge font weight. Default: `400`. |
| `plotOptions.treemap.seriesTitle.style.cssClass` | <code>string</code> | CSS class added to the badge. Default: `''`. |
| `plotOptions.treemap.seriesTitle.style.padding` | <code>object</code> | Space between badge text and border. |
| `plotOptions.treemap.seriesTitle.style.padding.left` | <code>number</code> | Left padding in pixels. Default: `6`. |
| `plotOptions.treemap.seriesTitle.style.padding.right` | <code>number</code> | Right padding in pixels. Default: `6`. |
| `plotOptions.treemap.seriesTitle.style.padding.top` | <code>number</code> | Top padding in pixels. Default: `2`. |
| `plotOptions.treemap.seriesTitle.style.padding.bottom` | <code>number</code> | Bottom padding in pixels. Default: `2`. |
| `plotOptions.treemap.zoomOnClick` | <code>boolean</code> | nested treemaps (series data with children): click a parent to zoom into it |
| `plotOptions.treemap.zoom` | <code>object</code> | Zoom into nested treemaps. |
| `plotOptions.treemap.zoom.enabled` | <code>boolean</code> | false turns zooming off; it is on unless this or `zoomOnClick` is false. |
| `plotOptions.treemap.zoom.breadcrumb` | <code>object \| false</code> | Breadcrumb path shown while zoomed; false hides it. |
| `plotOptions.treemap.zoom.breadcrumb.rootLabel` | <code>string</code> | Text of the first breadcrumb. Default: `'All'`. |
| `plotOptions.treemap.zoom.breadcrumb.separator` | <code>string</code> | Text between breadcrumbs. Default: `'›'`. |
| `plotOptions.treemap.zoom.breadcrumb.position` | <code>'top-left' \| 'top-right'</code> | Corner of the breadcrumb: `'top-left'` or `'top-right'`. Default: `'top-left'`. |
| `plotOptions.treemap.nested` | <code>object</code> | Nested treemaps (data with `children`). |
| `plotOptions.treemap.nested.enabled` | <code>boolean</code> | Turns nesting on; data with `children` nests on its own. |
| `plotOptions.treemap.nested.drilldownAsLevels` | <code>boolean</code> | Treats the `drilldown.series` levels as children of the points that reference them. Default: `false`. |
| `plotOptions.treemap.tint` | <code>number</code> | Nested treemaps: lightens (positive) or darkens (negative) child tiles per depth, 0 to 1. Default: `0`. |
| `plotOptions.treemap.parents` | <code>WccTreemapLevel</code> | Style of parent (group) tiles, applied to every depth. |
| `plotOptions.treemap.parents.header` | <code>object</code> | Header strip of the parent tiles. |
| `plotOptions.treemap.parents.header.show` | <code>boolean</code> | Draws the header. Default: `true`. |
| `plotOptions.treemap.parents.header.showValue` | <code>boolean</code> | Shows the value next to the name. Default: `false`. |
| `plotOptions.treemap.parents.header.align` | <code>'left' \| 'center' \| 'right'</code> | Text position: `'left'`, `'center'` or `'right'`. Default: `'left'`. |
| `plotOptions.treemap.parents.header.offsetX` | <code>number</code> | Moves the text horizontally in pixels. |
| `plotOptions.treemap.parents.header.offsetY` | <code>number</code> | Moves the text vertically in pixels. |
| `plotOptions.treemap.parents.header.formatter` | <code>(name: string, ctx: any) =&gt; string</code> | Header text from the name and `{ value, depth, seriesIndex, node, w }`. |
| `plotOptions.treemap.parents.header.style` | <code>object</code> | Text and background style (fontSize, fontWeight, fontFamily, color, background, cssClass). |
| `plotOptions.treemap.parents.borderColor` | <code>string</code> | Border colour of the parent tiles. |
| `plotOptions.treemap.parents.borderWidth` | <code>number</code> | Border width in pixels. |
| `plotOptions.treemap.parents.borderRadius` | <code>number</code> | Corner radius in pixels. |
| `plotOptions.treemap.parents.fillOpacity` | <code>number</code> | Fill opacity of the parent tiles. |
| `plotOptions.treemap.levels` | <code>WccTreemapLevel[]</code> | Per-depth overrides merged over `parents`; index 0 is the top level. |
| `plotOptions.treemap.levels[].header` | <code>object</code> | Header strip of the parent tiles. |
| `plotOptions.treemap.levels[].header.show` | <code>boolean</code> | Draws the header. Default: `true`. |
| `plotOptions.treemap.levels[].header.showValue` | <code>boolean</code> | Shows the value next to the name. Default: `false`. |
| `plotOptions.treemap.levels[].header.align` | <code>'left' \| 'center' \| 'right'</code> | Text position: `'left'`, `'center'` or `'right'`. Default: `'left'`. |
| `plotOptions.treemap.levels[].header.offsetX` | <code>number</code> | Moves the text horizontally in pixels. |
| `plotOptions.treemap.levels[].header.offsetY` | <code>number</code> | Moves the text vertically in pixels. |
| `plotOptions.treemap.levels[].header.formatter` | <code>(name: string, ctx: any) =&gt; string</code> | Header text from the name and `{ value, depth, seriesIndex, node, w }`. |
| `plotOptions.treemap.levels[].header.style` | <code>object</code> | Text and background style (fontSize, fontWeight, fontFamily, color, background, cssClass). |
| `plotOptions.treemap.levels[].borderColor` | <code>string</code> | Border colour of the parent tiles. |
| `plotOptions.treemap.levels[].borderWidth` | <code>number</code> | Border width in pixels. |
| `plotOptions.treemap.levels[].borderRadius` | <code>number</code> | Corner radius in pixels. |
| `plotOptions.treemap.levels[].fillOpacity` | <code>number</code> | Fill opacity of the parent tiles. |
| `plotOptions.pie` | <code>object</code> | Settings of pie and donut charts. |
| `plotOptions.pie.wcc` | <code>object</code> | West Coast Charts: opt-in segment styling (pie and donut, not polarArea). |
| `plotOptions.pie.wcc.segmentGap` | <code>number</code> | Gap between segments in pixels. |
| `plotOptions.pie.wcc.segmentRadius` | <code>number</code> | Corner radius of the segments in pixels. |
| `plotOptions.pie.startAngle` | <code>number</code> | Angle in degrees where the first slice starts (0 = 12 o'clock, clockwise). Default: `0`. |
| `plotOptions.pie.endAngle` | <code>number</code> | Angle in degrees where the last slice ends; 180 with startAngle -90 gives a half circle. Default: `360`. |
| `plotOptions.pie.customScale` | <code>number</code> | Scale factor applied to the whole pie (1 = fit). Default: `1`. |
| `plotOptions.pie.offsetX` | <code>number</code> | Moves the pie horizontally. Default: `0`. |
| `plotOptions.pie.offsetY` | <code>number</code> | Moves the pie vertically. Default: `0`. |
| `plotOptions.pie.expandOnClick` | <code>boolean</code> | Pulls a clicked slice out of the pie. Default: `true`. |
| `plotOptions.pie.dataLabels` | <code>object</code> | Placement of the slice labels. |
| `plotOptions.pie.dataLabels.offset` | <code>number</code> | Moves the labels outward (positive) or inward (negative), in pixels. Default: `0`. |
| `plotOptions.pie.dataLabels.minAngleToShowLabel` | <code>number</code> | Slices smaller than this angle in degrees get no label. Default: `10`. |
| `plotOptions.pie.donut` | <code>object</code> | Settings of the donut hole. |
| `plotOptions.pie.donut.size` | <code>string</code> | Diameter of the hole as a percentage of the pie. Default: `'65%'`. |
| `plotOptions.pie.donut.background` | <code>string</code> | Fill colour of the hole. Default: `'transparent'`. |
| `plotOptions.pie.donut.labels` | <code>object</code> | Texts in the middle of the donut. |
| `plotOptions.pie.donut.labels.readability` | <code>WccReadability</code> | West Coast Charts: readability of the centre labels (features/readability) |
| `plotOptions.pie.donut.labels.readability.mode` | <code>'none' \| 'halo' \| 'pill' \| 'auto' \| 'hide'</code> | 'auto' (default where on): nothing for labels off the marks, a contrasting text colour over one fill, a pill over mixed fills; 'hide' = skip labels that sit on marks |
| `plotOptions.pie.donut.labels.readability.fallback` | <code>'pill' \| 'halo' \| 'hide'</code> | what 'auto' escalates to over mixed fills or when no text colour reaches minRatio. Default 'pill' |
| `plotOptions.pie.donut.labels.readability.enabled` | <code>boolean</code> | false switches the treatment off for this label kind |
| `plotOptions.pie.donut.labels.readability.contrast` | <code>boolean</code> | swap the text to `light`/`dark` when it misses minRatio against what is under it (any mode) |
| `plotOptions.pie.donut.labels.readability.minRatio` | <code>number</code> | WCAG 2 contrast ratio to reach. Default 4.5 |
| `plotOptions.pie.donut.labels.readability.light` | <code>string</code> | text/backdrop colour pair used by contrast and 'auto' fills. Defaults '#ffffff' / '#111827' |
| `plotOptions.pie.donut.labels.readability.dark` | <code>string</code> | Dark colour of the pair. Default: `'#111827'`. |
| `plotOptions.pie.donut.labels.readability.background` | <code>'auto' \| string</code> | colour under the chart; 'auto' = chart.background, else the first opaque ancestor |
| `plotOptions.pie.donut.labels.readability.halo` | <code>object</code> | outline behind the glyphs; blur &gt; 0 makes it a soft glow. Defaults width 3, color 'auto' (chart background), opacity 0.92 |
| `plotOptions.pie.donut.labels.readability.halo.width` | <code>number</code> | Outline width in pixels. Default: `3`. |
| `plotOptions.pie.donut.labels.readability.halo.color` | <code>'auto' \| string</code> | Outline colour; 'auto' uses the colour under the label or a contrasting one. Default: `'auto'`. |
| `plotOptions.pie.donut.labels.readability.halo.opacity` | <code>number</code> | Outline opacity (0 to 1). Default: `0.92`. |
| `plotOptions.pie.donut.labels.readability.halo.blur` | <code>number</code> | Blur in pixels; above 0 the outline becomes a soft glow. Default: `0`. |
| `plotOptions.pie.donut.labels.readability.pill` | <code>object</code> | backdrop box. padding = [vertical, horizontal]; offset = [dx, dy] px. Defaults fill 'auto', opacity 0.9, radius 4, padding [1, 4] |
| `plotOptions.pie.donut.labels.readability.pill.fill` | <code>'auto' \| string</code> | Box colour; 'auto' uses the colour under the label or a contrasting one. Default: `'auto'`. |
| `plotOptions.pie.donut.labels.readability.pill.opacity` | <code>number</code> | Box opacity (0 to 1). Default: `0.9`. |
| `plotOptions.pie.donut.labels.readability.pill.radius` | <code>number</code> | Corner radius in pixels. Default: `4`. |
| `plotOptions.pie.donut.labels.readability.pill.padding` | <code>number \| [number, number]</code> | Space around the text in pixels: one number, or [vertical, horizontal]. Default: `[1, 4]`. |
| `plotOptions.pie.donut.labels.readability.pill.stroke` | <code>string</code> | Outline colour of the box. Default: `'none'`. |
| `plotOptions.pie.donut.labels.readability.pill.strokeWidth` | <code>number</code> | Outline width in pixels. Default: `1`. |
| `plotOptions.pie.donut.labels.readability.pill.offset` | <code>[number, number]</code> | Shift of the box as [dx, dy] in pixels. Default: `[0, 0]`. |
| `plotOptions.pie.donut.labels.readability.shadow` | <code>object \| boolean</code> | drop shadow on the pill (on the text in halo mode) |
| `plotOptions.pie.donut.labels.readability.shadow.dx` | <code>number</code> | Horizontal shadow offset in pixels. Default: `0`. |
| `plotOptions.pie.donut.labels.readability.shadow.dy` | <code>number</code> | Vertical shadow offset in pixels. Default: `1`. |
| `plotOptions.pie.donut.labels.readability.shadow.blur` | <code>number</code> | Shadow blur in pixels. Default: `2`. |
| `plotOptions.pie.donut.labels.readability.shadow.color` | <code>string</code> | Shadow colour. Default: `'#000000'`. |
| `plotOptions.pie.donut.labels.readability.shadow.opacity` | <code>number</code> | Shadow opacity (0 to 1). Default: `0.35`. |
| `plotOptions.pie.donut.labels.readability.raise` | <code>boolean</code> | axis labels sitting on marks are moved above the series (default true) |
| `plotOptions.pie.donut.labels.readability.each` | <code>(info: WccReadabilityInfo) =&gt; WccReadability \| null \| undefined</code> | per label: return an override (or 'none') for this one label; called only when set |
| `plotOptions.pie.donut.labels.show` | <code>boolean</code> | Shows the middle texts. Default: `false`. |
| `plotOptions.pie.donut.labels.name` | <code>object</code> | The upper text: name of the hovered slice. |
| `plotOptions.pie.donut.labels.name.show` | <code>boolean</code> | Shows the name. Default: `true`. |
| `plotOptions.pie.donut.labels.name.fontSize` | <code>string</code> | Font size of the name. Default: `'16px'`. |
| `plotOptions.pie.donut.labels.name.fontFamily` | <code>string</code> | Font family of the name. |
| `plotOptions.pie.donut.labels.name.fontWeight` | <code>string \| number</code> | Font weight of the name. Default: `600`. |
| `plotOptions.pie.donut.labels.name.color` | <code>string</code> | Colour of the name; not set uses the slice colour. |
| `plotOptions.pie.donut.labels.name.offsetY` | <code>number</code> | Moves the name vertically. Default: `-10`. |
| `plotOptions.pie.donut.labels.name.formatter()` | <code>(val: string): string</code> | Function that returns the name text. The built-in one returns the slice name. |
| `plotOptions.pie.donut.labels.value` | <code>object</code> | The lower text: value of the hovered slice. |
| `plotOptions.pie.donut.labels.value.show` | <code>boolean</code> | Shows the value. Default: `true`. |
| `plotOptions.pie.donut.labels.value.fontSize` | <code>string</code> | Font size of the value. Default: `'20px'`. |
| `plotOptions.pie.donut.labels.value.fontFamily` | <code>string</code> | Font family of the value. |
| `plotOptions.pie.donut.labels.value.fontWeight` | <code>string \| number</code> | Font weight of the value. Default: `400`. |
| `plotOptions.pie.donut.labels.value.color` | <code>string</code> | Colour of the value; not set uses `chart.foreColor`. |
| `plotOptions.pie.donut.labels.value.offsetY` | <code>number</code> | Moves the value vertically. Default: `10`. |
| `plotOptions.pie.donut.labels.value.formatter()` | <code>(val: string): string</code> | Function that returns the value text. The built-in one returns the value. |
| `plotOptions.pie.donut.labels.total` | <code>object</code> | Total shown while no slice is hovered. |
| `plotOptions.pie.donut.labels.total.show` | <code>boolean</code> | Shows the total when nothing is hovered. Default: `false`. |
| `plotOptions.pie.donut.labels.total.showAlways` | <code>boolean</code> | Keeps the total even while a slice is hovered. Default: `false`. |
| `plotOptions.pie.donut.labels.total.fontFamily` | <code>string</code> | Font family of the total label. |
| `plotOptions.pie.donut.labels.total.fontWeight` | <code>string \| number</code> | Font weight of the total label. Default: `400`. |
| `plotOptions.pie.donut.labels.total.fontSize` | <code>string</code> | Font size of the total label. Default: `'16px'`. |
| `plotOptions.pie.donut.labels.total.label` | <code>string</code> | Text shown in place of a slice name. Default: `'Total'`. |
| `plotOptions.pie.donut.labels.total.color` | <code>string</code> | Colour of the total label. |
| `plotOptions.pie.donut.labels.total.formatter()` | <code>(w: any): string</code> | Function that returns the total value text. The built-in one returns the sum of the slice values. |
| `plotOptions.polarArea` | <code>object</code> | Settings of polar area charts. |
| `plotOptions.polarArea.rings` | <code>object</code> | Concentric guide circles. |
| `plotOptions.polarArea.rings.strokeWidth` | <code>number</code> | Line width of the rings; 0 hides them. Default: `1`. |
| `plotOptions.polarArea.rings.strokeColor` | <code>string</code> | Colour of the rings. Default: `'#e8e8e8'`. |
| `plotOptions.polarArea.spokes` | <code>object</code> | Lines from the centre to each slice border. |
| `plotOptions.polarArea.spokes.strokeWidth` | <code>number</code> | Line width of the spokes; 0 hides them. Default: `1`. |
| `plotOptions.polarArea.spokes.connectorColors` | <code>string \| string[]</code> | Colour of the spokes (or one per spoke). Default: `'#e8e8e8'`. |
| `plotOptions.radar` | <code>object</code> | Settings of radar charts. |
| `plotOptions.radar.size` | <code>number</code> | Radius in pixels; not set fits the plot. |
| `plotOptions.radar.offsetX` | <code>number</code> | Moves the radar horizontally. Default: `0`. |
| `plotOptions.radar.offsetY` | <code>number</code> | Moves the radar vertically. Default: `0`. |
| `plotOptions.radar.polygons` | <code>object</code> | The web of guide polygons. |
| `plotOptions.radar.polygons.strokeColors` | <code>string \| string[]</code> | Colour of the polygon lines (or one per ring). Default: `'#e8e8e8'`. |
| `plotOptions.radar.polygons.strokeWidth` | <code>string \| string[]</code> | Width of the polygon lines. Default: `1`. |
| `plotOptions.radar.polygons.connectorColors` | <code>string \| string[]</code> | Colour of the lines from the centre to each corner. Default: `'#e8e8e8'`. |
| `plotOptions.radar.polygons.fill` | <code>object</code> | Fill between the polygons. |
| `plotOptions.radar.polygons.fill.colors` | <code>string[]</code> | Fill colours of the rings, repeated in order; not set leaves them empty. |
| `plotOptions.radialBar` | <code>WccGaugeOptions</code> | Settings of radial bar (circular progress) charts. Gauge settings (chart.type 'gauge'). |
| `plotOptions.radialBar.inverseOrder` | <code>boolean</code> | Draws the first series on the outside instead of the inside. Default: `false`. |
| `plotOptions.radialBar.startAngle` | <code>number</code> | Start angle of the bars in degrees (0 = 12 o'clock). Default: `0`. |
| `plotOptions.radialBar.endAngle` | <code>number</code> | End angle of the bars in degrees; 360 is a full circle. Default: `360`. |
| `plotOptions.radialBar.offsetX` | <code>number</code> | Moves the chart horizontally. Default: `0`. |
| `plotOptions.radialBar.offsetY` | <code>number</code> | Moves the chart vertically. Default: `0`. |
| `plotOptions.radialBar.hollow` | <code>object</code> | The empty centre. |
| `plotOptions.radialBar.hollow.margin` | <code>number</code> | Space in pixels between the hollow and the innermost bar. Default: `5`. |
| `plotOptions.radialBar.hollow.size` | <code>string</code> | Diameter of the hollow as a percentage. Default: `'50%'`. |
| `plotOptions.radialBar.hollow.background` | <code>string</code> | Fill colour of the hollow. Default: `'transparent'`. |
| `plotOptions.radialBar.hollow.image` | <code>string</code> | URL of an image drawn in the hollow. |
| `plotOptions.radialBar.hollow.imageWidth` | <code>number</code> | Width of the image in pixels. Default: `150`. |
| `plotOptions.radialBar.hollow.imageHeight` | <code>number</code> | Height of the image in pixels. Default: `150`. |
| `plotOptions.radialBar.hollow.imageOffsetX` | <code>number</code> | Moves the image horizontally. Default: `0`. |
| `plotOptions.radialBar.hollow.imageOffsetY` | <code>number</code> | Moves the image vertically. Default: `0`. |
| `plotOptions.radialBar.hollow.imageClipped` | <code>boolean</code> | Clips the image to the circle of the hollow. Default: `true`. |
| `plotOptions.radialBar.hollow.position` | <code>'front' \| 'back'</code> | 'front' draws the hollow above the tracks, 'back' below them. Default: `'front'`. |
| `plotOptions.radialBar.hollow.dropShadow` | <code>ApexDropShadow</code> | Shadow of the hollow. |
| `plotOptions.radialBar.hollow.dropShadow.enabled` | <code>boolean</code> | Draws the shadow. Default: `false`. |
| `plotOptions.radialBar.hollow.dropShadow.top` | <code>number</code> | Vertical shadow distance in pixels. Default: `2`. |
| `plotOptions.radialBar.hollow.dropShadow.left` | <code>number</code> | Horizontal shadow distance in pixels. Default: `2`. |
| `plotOptions.radialBar.hollow.dropShadow.blur` | <code>number</code> | Blur radius in pixels. Default: `4`. |
| `plotOptions.radialBar.hollow.dropShadow.opacity` | <code>number</code> | Shadow opacity (0 to 1). Default: `0.7`. |
| `plotOptions.radialBar.hollow.dropShadow.color` | <code>string</code> | Shadow colour. Default: `'#000'`. |
| `plotOptions.radialBar.track` | <code>object</code> | The background ring behind each bar. |
| `plotOptions.radialBar.track.show` | <code>boolean</code> | Draws the tracks. Default: `true`. |
| `plotOptions.radialBar.track.startAngle` | <code>number</code> | Start angle of the track; not set uses `radialBar.startAngle`. |
| `plotOptions.radialBar.track.endAngle` | <code>number</code> | End angle of the track; not set uses `radialBar.endAngle`. |
| `plotOptions.radialBar.track.background` | <code>string \| string[]</code> | Track colour (or one per series). Default: `'#f2f2f2'`. |
| `plotOptions.radialBar.track.strokeWidth` | <code>string</code> | Track thickness as a percentage of the bar thickness. Default: `'97%'`. |
| `plotOptions.radialBar.track.opacity` | <code>number</code> | Track opacity (0 to 1). Default: `1`. |
| `plotOptions.radialBar.track.margin` | <code>number</code> | Space in pixels between neighbouring tracks. Default: `5`. |
| `plotOptions.radialBar.track.dropShadow` | <code>ApexDropShadow</code> | Shadow of the tracks. |
| `plotOptions.radialBar.track.dropShadow.enabled` | <code>boolean</code> | Draws the shadow. Default: `false`. |
| `plotOptions.radialBar.track.dropShadow.top` | <code>number</code> | Vertical shadow distance in pixels. Default: `2`. |
| `plotOptions.radialBar.track.dropShadow.left` | <code>number</code> | Horizontal shadow distance in pixels. Default: `2`. |
| `plotOptions.radialBar.track.dropShadow.blur` | <code>number</code> | Blur radius in pixels. Default: `4`. |
| `plotOptions.radialBar.track.dropShadow.opacity` | <code>number</code> | Shadow opacity (0 to 1). Default: `0.7`. |
| `plotOptions.radialBar.track.dropShadow.color` | <code>string</code> | Shadow colour. Default: `'#000'`. |
| `plotOptions.radialBar.dataLabels` | <code>object</code> | Texts in the centre. |
| `plotOptions.radialBar.dataLabels.readability` | <code>WccReadability</code> | West Coast Charts: readability of the centre labels (features/readability) |
| `plotOptions.radialBar.dataLabels.readability.mode` | <code>'none' \| 'halo' \| 'pill' \| 'auto' \| 'hide'</code> | 'auto' (default where on): nothing for labels off the marks, a contrasting text colour over one fill, a pill over mixed fills; 'hide' = skip labels that sit on marks |
| `plotOptions.radialBar.dataLabels.readability.fallback` | <code>'pill' \| 'halo' \| 'hide'</code> | what 'auto' escalates to over mixed fills or when no text colour reaches minRatio. Default 'pill' |
| `plotOptions.radialBar.dataLabels.readability.enabled` | <code>boolean</code> | false switches the treatment off for this label kind |
| `plotOptions.radialBar.dataLabels.readability.contrast` | <code>boolean</code> | swap the text to `light`/`dark` when it misses minRatio against what is under it (any mode) |
| `plotOptions.radialBar.dataLabels.readability.minRatio` | <code>number</code> | WCAG 2 contrast ratio to reach. Default 4.5 |
| `plotOptions.radialBar.dataLabels.readability.light` | <code>string</code> | text/backdrop colour pair used by contrast and 'auto' fills. Defaults '#ffffff' / '#111827' |
| `plotOptions.radialBar.dataLabels.readability.dark` | <code>string</code> | Dark colour of the pair. Default: `'#111827'`. |
| `plotOptions.radialBar.dataLabels.readability.background` | <code>'auto' \| string</code> | colour under the chart; 'auto' = chart.background, else the first opaque ancestor |
| `plotOptions.radialBar.dataLabels.readability.halo` | <code>object</code> | outline behind the glyphs; blur &gt; 0 makes it a soft glow. Defaults width 3, color 'auto' (chart background), opacity 0.92 |
| `plotOptions.radialBar.dataLabels.readability.halo.width` | <code>number</code> | Outline width in pixels. Default: `3`. |
| `plotOptions.radialBar.dataLabels.readability.halo.color` | <code>'auto' \| string</code> | Outline colour; 'auto' uses the colour under the label or a contrasting one. Default: `'auto'`. |
| `plotOptions.radialBar.dataLabels.readability.halo.opacity` | <code>number</code> | Outline opacity (0 to 1). Default: `0.92`. |
| `plotOptions.radialBar.dataLabels.readability.halo.blur` | <code>number</code> | Blur in pixels; above 0 the outline becomes a soft glow. Default: `0`. |
| `plotOptions.radialBar.dataLabels.readability.pill` | <code>object</code> | backdrop box. padding = [vertical, horizontal]; offset = [dx, dy] px. Defaults fill 'auto', opacity 0.9, radius 4, padding [1, 4] |
| `plotOptions.radialBar.dataLabels.readability.pill.fill` | <code>'auto' \| string</code> | Box colour; 'auto' uses the colour under the label or a contrasting one. Default: `'auto'`. |
| `plotOptions.radialBar.dataLabels.readability.pill.opacity` | <code>number</code> | Box opacity (0 to 1). Default: `0.9`. |
| `plotOptions.radialBar.dataLabels.readability.pill.radius` | <code>number</code> | Corner radius in pixels. Default: `4`. |
| `plotOptions.radialBar.dataLabels.readability.pill.padding` | <code>number \| [number, number]</code> | Space around the text in pixels: one number, or [vertical, horizontal]. Default: `[1, 4]`. |
| `plotOptions.radialBar.dataLabels.readability.pill.stroke` | <code>string</code> | Outline colour of the box. Default: `'none'`. |
| `plotOptions.radialBar.dataLabels.readability.pill.strokeWidth` | <code>number</code> | Outline width in pixels. Default: `1`. |
| `plotOptions.radialBar.dataLabels.readability.pill.offset` | <code>[number, number]</code> | Shift of the box as [dx, dy] in pixels. Default: `[0, 0]`. |
| `plotOptions.radialBar.dataLabels.readability.shadow` | <code>object \| boolean</code> | drop shadow on the pill (on the text in halo mode) |
| `plotOptions.radialBar.dataLabels.readability.shadow.dx` | <code>number</code> | Horizontal shadow offset in pixels. Default: `0`. |
| `plotOptions.radialBar.dataLabels.readability.shadow.dy` | <code>number</code> | Vertical shadow offset in pixels. Default: `1`. |
| `plotOptions.radialBar.dataLabels.readability.shadow.blur` | <code>number</code> | Shadow blur in pixels. Default: `2`. |
| `plotOptions.radialBar.dataLabels.readability.shadow.color` | <code>string</code> | Shadow colour. Default: `'#000000'`. |
| `plotOptions.radialBar.dataLabels.readability.shadow.opacity` | <code>number</code> | Shadow opacity (0 to 1). Default: `0.35`. |
| `plotOptions.radialBar.dataLabels.readability.raise` | <code>boolean</code> | axis labels sitting on marks are moved above the series (default true) |
| `plotOptions.radialBar.dataLabels.readability.each` | <code>(info: WccReadabilityInfo) =&gt; WccReadability \| null \| undefined</code> | per label: return an override (or 'none') for this one label; called only when set |
| `plotOptions.radialBar.dataLabels.show` | <code>boolean</code> | Shows the centre texts. Default: `true`. |
| `plotOptions.radialBar.dataLabels.name` | <code>object</code> | Upper text: name of the series. |
| `plotOptions.radialBar.dataLabels.name.show` | <code>boolean</code> | Shows the name. Default: `true`. |
| `plotOptions.radialBar.dataLabels.name.fontFamily` | <code>string</code> | Font family of the name. |
| `plotOptions.radialBar.dataLabels.name.fontWeight` | <code>string \| number</code> | Font weight of the name. Default: `600`. |
| `plotOptions.radialBar.dataLabels.name.fontSize` | <code>string</code> | Font size of the name. Default: `'16px'`. |
| `plotOptions.radialBar.dataLabels.name.color` | <code>string</code> | Colour of the name; not set uses the series colour. |
| `plotOptions.radialBar.dataLabels.name.offsetY` | <code>number</code> | Moves the name vertically. Default: `0`. |
| `plotOptions.radialBar.dataLabels.value` | <code>object</code> | Lower text: the value. |
| `plotOptions.radialBar.dataLabels.value.show` | <code>boolean</code> | Shows the value. Default: `true`. |
| `plotOptions.radialBar.dataLabels.value.fontFamily` | <code>string</code> | Font family of the value. |
| `plotOptions.radialBar.dataLabels.value.fontSize` | <code>string</code> | Font size of the value. Default: `'14px'`. |
| `plotOptions.radialBar.dataLabels.value.fontWeight` | <code>string \| number</code> | Font weight of the value. Default: `400`. |
| `plotOptions.radialBar.dataLabels.value.color` | <code>string</code> | Colour of the value; not set uses `chart.foreColor`. |
| `plotOptions.radialBar.dataLabels.value.offsetY` | <code>number</code> | Moves the value vertically. Default: `16`. |
| `plotOptions.radialBar.dataLabels.value.formatter()` | <code>(val: number): string</code> | Function that returns the value text. The built-in one appends '%'. |
| `plotOptions.radialBar.dataLabels.total` | <code>object</code> | Combined text for several series, shown while none is hovered. |
| `plotOptions.radialBar.dataLabels.total.show` | <code>boolean</code> | Shows the total. Default: `false`. |
| `plotOptions.radialBar.dataLabels.total.label` | <code>string</code> | Text shown in place of a series name. Default: `'Total'`. |
| `plotOptions.radialBar.dataLabels.total.color` | <code>string</code> | Colour of the total label. |
| `plotOptions.radialBar.dataLabels.total.fontFamily` | <code>string</code> | Font family of the total label. |
| `plotOptions.radialBar.dataLabels.total.fontWeight` | <code>string \| number</code> | Font weight of the total label. Default: `600`. |
| `plotOptions.radialBar.dataLabels.total.fontSize` | <code>string</code> | Font size of the total label. Default: `'16px'`. |
| `plotOptions.radialBar.dataLabels.total.formatter()` | <code>(opts: any): string</code> | Function that returns the total value text. The built-in one averages the series values and appends '%'. |
| `plotOptions.radialBar.barLabels` | <code>object</code> | Series names written at the start of each bar. |
| `plotOptions.radialBar.barLabels.enabled` | <code>boolean</code> | Shows the bar labels. Default: `false`. |
| `plotOptions.radialBar.barLabels.offsetX` | <code>number</code> | Moves the bar labels horizontally. Default: `0`. |
| `plotOptions.radialBar.barLabels.offsetY` | <code>number</code> | Moves the bar labels vertically. Default: `0`. |
| `plotOptions.radialBar.barLabels.useSeriesColors` | <code>boolean</code> | Colours each bar label with its series colour. Default: `true`. |
| `plotOptions.radialBar.barLabels.fontFamily` | <code>string</code> | Font family of the bar labels. |
| `plotOptions.radialBar.barLabels.fontWeight` | <code>string \| number</code> | Font weight of the bar labels. Default: `600`. |
| `plotOptions.radialBar.barLabels.fontSize` | <code>string</code> | Font size of the bar labels. Default: `'16px'`. |
| `plotOptions.radialBar.barLabels.formatter` | <code>(barName: string, opts?: any) =&gt; string</code> | Function that returns the bar label text. The built-in one returns the series name. |
| `plotOptions.radialBar.barLabels.onClick` | <code>(barName: string, opts?: any) =&gt; void</code> | Called when a bar label is clicked. |
| `plotOptions.radialBar.shape` | <code>'arc' \| 'needle'</code> | 'arc' fills the ring up to the value; 'needle' points a needle at it. Default: `'arc'`. |
| `plotOptions.radialBar.min` | <code>number</code> | Value at the start of the gauge. Default: `0`. |
| `plotOptions.radialBar.max` | <code>number</code> | Value at the end of the gauge. Default: `100`. |
| `plotOptions.radialBar.bands` | <code>object[]</code> | coloured value ranges along the track |
| `plotOptions.radialBar.bands[].from` | <code>number</code> | Start value of the band. |
| `plotOptions.radialBar.bands[].to` | <code>number</code> | End value of the band. |
| `plotOptions.radialBar.bands[].color` | <code>WccColor</code> | Band colour. |
| `plotOptions.radialBar.bands[].label` | <code>string</code> | Band name, shown as the band's SVG title and added to the accessible value text. |
| `plotOptions.radialBar.bandsStyle` | <code>object</code> | Look of the bands ring. |
| `plotOptions.radialBar.bandsStyle.strokeWidth` | <code>string \| number</code> | Band thickness as a share of the track thickness or in pixels. Default: `'40%'`. |
| `plotOptions.radialBar.bandsStyle.gap` | <code>number</code> | px along the arc |
| `plotOptions.radialBar.bandsStyle.hideTrackWhenPresent` | <code>boolean</code> | Hides the background track when bands are defined. Default: `false`. |
| `plotOptions.radialBar.bandsStyle.linecap` | <code>'butt' \| 'round' \| 'square'</code> | Ends of each band: 'butt', 'round' or 'square'. Default: `'butt'`. |
| `plotOptions.radialBar.bandsStyle.align` | <code>'outer' \| 'center'</code> | 'outer' aligns the bands to the outer edge of the track, 'center' centres them |
| `plotOptions.radialBar.ticks` | <code>object</code> | Scale ticks and labels around the ring. |
| `plotOptions.radialBar.ticks.show` | <code>boolean</code> | Draws the ticks. Default: `false`. |
| `plotOptions.radialBar.ticks.major` | <code>object</code> | Major ticks, carrying the labels. |
| `plotOptions.radialBar.ticks.major.count` | <code>number</code> | Number of major ticks including both ends (at least 2). Default: `11`. |
| `plotOptions.radialBar.ticks.major.length` | <code>number</code> | Tick length in pixels. Default: `10`. |
| `plotOptions.radialBar.ticks.major.width` | <code>number</code> | Tick width in pixels. Default: `1.5`. |
| `plotOptions.radialBar.ticks.major.color` | <code>WccColor</code> | Tick colour; not set uses the theme's muted text colour. |
| `plotOptions.radialBar.ticks.major.placement` | <code>'outside' \| 'inside' \| 'center'</code> | 'outside' draws the ticks beyond the ring, 'inside' within the hollow, 'center' across the middle of the ring (labels stay outside). Default: `'outside'`. |
| `plotOptions.radialBar.ticks.minor` | <code>object</code> | Minor ticks between the major ticks. |
| `plotOptions.radialBar.ticks.minor.count` | <code>number</code> | Minor ticks between two neighbouring major ticks. Default: `4`. |
| `plotOptions.radialBar.ticks.minor.length` | <code>number</code> | Tick length in pixels. Default: `5`. |
| `plotOptions.radialBar.ticks.minor.width` | <code>number</code> | Tick width in pixels. Default: `1`. |
| `plotOptions.radialBar.ticks.minor.color` | <code>WccColor</code> | Tick colour; not set uses the theme's muted text colour. |
| `plotOptions.radialBar.ticks.minor.placement` | <code>'outside' \| 'inside' \| 'center'</code> | 'outside', 'inside' or 'center' (as for the major ticks); not set follows the major ticks. |
| `plotOptions.radialBar.ticks.labels` | <code>object</code> | Value labels at the major ticks. |
| `plotOptions.radialBar.ticks.labels.show` | <code>boolean</code> | Draws the labels. Default: `true`. |
| `plotOptions.radialBar.ticks.labels.offset` | <code>number</code> | Distance of the labels from the ticks in pixels. Default: `6`. |
| `plotOptions.radialBar.ticks.labels.fontSize` | <code>string \| number</code> | Font size; not set uses the theme size. |
| `plotOptions.radialBar.ticks.labels.fontFamily` | <code>string</code> | Font family; not set uses the chart font. |
| `plotOptions.radialBar.ticks.labels.fontWeight` | <code>string \| number</code> | Font weight. Default: `500`. |
| `plotOptions.radialBar.ticks.labels.color` | <code>WccColor</code> | Label colour; not set uses the theme's muted text colour. |
| `plotOptions.radialBar.ticks.labels.formatter` | <code>(value: number) =&gt; string</code> | Returns the label text for a tick value. |
| `plotOptions.radialBar.needle` | <code>object</code> | Needle settings (shape 'needle'). |
| `plotOptions.radialBar.needle.color` | <code>WccColor</code> | Needle colour; not set uses the first series colour. |
| `plotOptions.radialBar.needle.length` | <code>number \| string</code> | px or a share of the radius; default clears the inner edge of the ring |
| `plotOptions.radialBar.needle.baseWidth` | <code>number</code> | Width of the needle at its hub in pixels. Default: `8`. |
| `plotOptions.radialBar.needle.tipWidth` | <code>number</code> | Width of the needle tip in pixels. Default: `1.5`. |
| `plotOptions.radialBar.needle.showValueArc` | <code>boolean</code> | Also fills the ring up to the value. Default: `false`. |
| `plotOptions.radialBar.needle.offsetY` | <code>number</code> | Vertical shift of the needle hub in pixels. Default: `0`. |
| `plotOptions.radialBar.needle.animation` | <code>object</code> | Needle animation. |
| `plotOptions.radialBar.needle.animation.enabled` | <code>boolean</code> | false moves the needle without animation. Default: `true`. |
| `plotOptions.radialBar.needle.animation.duration` | <code>number</code> | Duration in milliseconds; not set uses the chart animation speed. |
| `plotOptions.radialBar.needle.animation.easing` | <code>string \| ((t: number) =&gt; number) \| [number, number, number, number]</code> | Easing of the needle: a named or registered easing, a function of t (0..1) or cubic-bezier points; not set uses a soft overshoot on the first draw and a cubic ease-out on updates. |
| `plotOptions.funnel` | <code>object</code> | Settings of funnel and pyramid charts. |
| `plotOptions.funnel.shape` | <code>'rectangle' \| 'trapezoid'</code> | 'rectangle' draws each stage as a bar; 'trapezoid' joins the stages into slanted segments. Default: `'rectangle'`. |
| `plotOptions.funnel.lastShape` | <code>'flat' \| 'taper'</code> | Shape of the last stage: 'flat' or 'taper' (narrows to a point). Default: `'flat'`. |
| `plotOptions.waterfall` | <code>object</code> | Settings of waterfall charts. |
| `plotOptions.waterfall.colors` | <code>object</code> | Colours of the bar kinds. |
| `plotOptions.waterfall.colors.positive` | <code>WccColor</code> | Colour of increases. Default: `'#00A86F'`. |
| `plotOptions.waterfall.colors.negative` | <code>WccColor</code> | Colour of decreases. Default: `'#FF4560'`. |
| `plotOptions.waterfall.colors.subtotal` | <code>WccColor</code> | Colour of subtotal bars (`isSubtotal` data points); not set uses the theme colour. |
| `plotOptions.waterfall.colors.total` | <code>WccColor</code> | Colour of total bars (`isTotal` data points); not set uses the theme colour. |
| `plotOptions.waterfall.connectors` | <code>object</code> | Lines joining the end of one bar to the start of the next. |
| `plotOptions.waterfall.connectors.show` | <code>boolean</code> | Draws the connectors. Default: `true`. |
| `plotOptions.waterfall.connectors.color` | <code>WccColor</code> | Connector colour; not set uses the theme colour. |
| `plotOptions.waterfall.connectors.strokeWidth` | <code>number</code> | Connector width in pixels. Default: `1`. |
| `plotOptions.waterfall.connectors.strokeDashArray` | <code>number</code> | Dash length of the connectors; 0 is solid. Default: `3`. |
| `plotOptions.sunburst` | <code>object</code> | Settings of sunburst charts (nested rings from series data with children). |
| `plotOptions.sunburst.offsetX` | <code>number</code> | Horizontal shift of the sunburst in pixels. Default: `0`. |
| `plotOptions.sunburst.offsetY` | <code>number</code> | Vertical shift of the sunburst in pixels. Default: `0`. |
| `plotOptions.sunburst.startAngle` | <code>number</code> | Angle in degrees where the rings begin. Default: `0`. |
| `plotOptions.sunburst.endAngle` | <code>number</code> | Angle in degrees where the rings end. Default: `360`. |
| `plotOptions.sunburst.innerSize` | <code>string \| number</code> | Size of the empty centre: a percentage of the radius or pixels. Default: `'15%'`. |
| `plotOptions.sunburst.borderRadius` | <code>number</code> | Corner radius of the arcs in pixels. Default: `0`. |
| `plotOptions.sunburst.spacing` | <code>number</code> | Gap between arcs in pixels. Default: `1`. |
| `plotOptions.sunburst.leaf` | <code>'extend' \| 'stop'</code> | 'extend' stretches leaf arcs to the outer ring; 'stop' keeps them one ring deep. Default: `'extend'`. |
| `plotOptions.sunburst.partition` | <code>'normalize' \| 'strict'</code> | 'normalize' sizes a parent by the sum of its children; 'strict' uses the parent's own value when it has one. Default: `'normalize'`. |
| `plotOptions.sunburst.tint` | <code>number</code> | How much deeper levels are lightened from their branch colour (0 to 1). Default: `0.14`. |
| `plotOptions.sunburst.colorBy` | <code>'branch' \| 'name'</code> | 'branch' gives each top-level branch a palette colour; 'name' colours nodes by their name. Default: `'branch'`. |
| `plotOptions.sunburst.zoomOnClick` | <code>boolean</code> | Clicking an arc zooms into that branch. Default: `true`. |
| `plotOptions.sunburst.dataLabels` | <code>WccPartitionLabels</code> | Labels on the arcs. |
| `plotOptions.sunburst.dataLabels.show` | <code>boolean</code> | Draws the labels. Default: `true`. |
| `plotOptions.sunburst.dataLabels.showValue` | <code>boolean</code> | Adds the value under the name where there is room (sunburst default: true; icicle: false). |
| `plotOptions.sunburst.dataLabels.style` | <code>WccTextStyle</code> | Text style (fontSize default '12px', fontWeight 500). |
| `plotOptions.sunburst.dataLabels.style.fontSize` | <code>string \| number</code> | Font size. |
| `plotOptions.sunburst.dataLabels.style.fontFamily` | <code>string</code> | Font family; not set uses the chart font. |
| `plotOptions.sunburst.dataLabels.style.fontWeight` | <code>string \| number</code> | Font weight. |
| `plotOptions.sunburst.dataLabels.style.colors` | <code>string[]</code> | Text colours; an array gives one per series or item. |
| `plotOptions.sunburst.dataLabels.minAngleToShow` | <code>number</code> | Arcs narrower than this many degrees get no label. Default: `8`. |
| `plotOptions.icicle` | <code>object</code> | Settings of icicle charts (hierarchy drawn as stacked bands). |
| `plotOptions.icicle.direction` | <code>'down' \| 'up' \| 'right' \| 'left'</code> | Direction the levels grow from the root: 'down', 'up', 'right' or 'left'. Default: `'down'`. |
| `plotOptions.icicle.levelSize` | <code>'equal' \| string \| number</code> | Thickness of a level: 'equal' splits the space evenly; a pixel value or percentage fixes it. Default: `'equal'`. |
| `plotOptions.icicle.maxDepth` | <code>'auto' \| number</code> | Number of levels shown at once; 'auto' shows all. Default: `'auto'`. |
| `plotOptions.icicle.spacing` | <code>number</code> | Gap between cells in pixels. Default: `1`. |
| `plotOptions.icicle.borderRadius` | <code>number</code> | Corner radius of the cells in pixels. Default: `0`. |
| `plotOptions.icicle.leaf` | <code>'extend' \| 'stop'</code> | 'extend' stretches leaf cells to the last level; 'stop' keeps them one level deep. Default: `'stop'`. |
| `plotOptions.icicle.partition` | <code>'normalize' \| 'strict'</code> | 'normalize' sizes a parent by the sum of its children; 'strict' uses the parent's own value when it has one. Default: `'normalize'`. |
| `plotOptions.icicle.sort` | <code>'none' \| 'value' \| 'name'</code> | Order of siblings: 'none' keeps the data order, 'value' sorts largest first, 'name' alphabetically. Default: `'none'`. |
| `plotOptions.icicle.tint` | <code>number</code> | How much deeper levels are lightened from their branch colour (0 to 1). Default: `0`. |
| `plotOptions.icicle.colorBy` | <code>'branch' \| 'name'</code> | 'branch' gives each top-level node a palette colour; 'name' colours nodes by their name. Default: `'branch'`. |
| `plotOptions.icicle.zoomOnClick` | <code>boolean</code> | Clicking a cell zooms into that branch. Default: `true`. |
| `plotOptions.icicle.zoomType` | <code>'value' \| 'both'</code> | 'value' rescales only the value axis on zoom; 'both' also rescales the levels. Default: `'value'`. |
| `plotOptions.icicle.dataLabels` | <code>WccPartitionLabels</code> | Labels in the cells. |
| `plotOptions.icicle.dataLabels.show` | <code>boolean</code> | Draws the labels. Default: `true`. |
| `plotOptions.icicle.dataLabels.showValue` | <code>boolean</code> | Adds the value under the name where there is room (sunburst default: true; icicle: false). |
| `plotOptions.icicle.dataLabels.style` | <code>WccTextStyle</code> | Text style (fontSize default '12px', fontWeight 500). |
| `plotOptions.icicle.dataLabels.style.fontSize` | <code>string \| number</code> | Font size. |
| `plotOptions.icicle.dataLabels.style.fontFamily` | <code>string</code> | Font family; not set uses the chart font. |
| `plotOptions.icicle.dataLabels.style.fontWeight` | <code>string \| number</code> | Font weight. |
| `plotOptions.icicle.dataLabels.style.colors` | <code>string[]</code> | Text colours; an array gives one per series or item. |
| `plotOptions.icicle.dataLabels.minSizeToShow` | <code>number</code> | Cells smaller than this many pixels get no label. Default: `30`. |
| `plotOptions.icicle.dataLabels.align` | <code>string</code> | Alignment of the label inside its cell. Default: `'center'`. |
| `plotOptions.icicle.dataLabels.rotate` | <code>'auto' \| 'always' \| 'never'</code> | 'auto' rotates labels when that fits better, 'always' always, 'never' never. Default: `'auto'`. |
| `plotOptions.unit` | <code>object</code> | Settings of unit (waffle) charts: one mark per unit of value. |
| `plotOptions.unit.layout` | <code>'grouped' \| 'packed' \| 'columns' \| 'grid' \| 'scatter' \| 'arc' \| 'custom'</code> | How marks are arranged: 'grouped' (one cluster per category), 'packed', 'columns', 'grid', 'scatter', 'arc' or 'custom'. Default: `'grouped'`. |
| `plotOptions.unit.positions` | <code>WccUnitShape \| string \| WccCallback</code> | custom layouts: fn(objects, rect), a registered layout name or a unit shape |
| `plotOptions.unit.positions.isUnitShape` | <code>true</code> |  |
| `plotOptions.unit.positions.name` | <code>string</code> |  |
| `plotOptions.unit.positions.kind` | <code>string</code> |  |
| `plotOptions.unit.positions.category` | <code>string</code> |  |
| `plotOptions.unit.positions.minUnits` | <code>number</code> |  |
| `plotOptions.unit.positions.order` | <code>any</code> |  |
| `plotOptions.unit.positions.source` | <code>any</code> |  |
| `plotOptions.unit.positions.rings` | <code>any[]</code> |  |
| `plotOptions.unit.positions.shape` | <code>object</code> | Shape metadata. |
| `plotOptions.unit.positions.fill` | <code>(...args: any[]) =&gt; any</code> | Places the units inside the outline. |
| `plotOptions.unit.positions.with` | <code>(opts: any) =&gt; WccUnitShape</code> | A variant with other settings. |
| `plotOptions.unit.positions.outlined` | <code>(thickness?: number) =&gt; WccUnitShape</code> | A hollow variant. |
| `plotOptions.unit.scatter` | <code>object</code> | Settings of the 'scatter' layout. |
| `plotOptions.unit.scatter.y` | <code>'lanes' \| 'value'</code> | `'lanes'` puts one lane per category with a 1-D value axis; `'value'` reads x and y from the data (2-D). Default: `'lanes'`. |
| `plotOptions.unit.scatter.orientation` | <code>'horizontal' \| 'vertical'</code> | Lanes only: `'vertical'` turns the lanes into columns with the value axis running up. Default: `'horizontal'`. |
| `plotOptions.unit.scatter.spread` | <code>'swarm' \| 'jitter'</code> | Lanes only: how marks spread across the lane, `'swarm'` (no overlap) or `'jitter'` (fixed pseudo-random offset). Default: `'swarm'`. |
| `plotOptions.unit.scatter.xTitle` | <code>string</code> | Title of the x (value) axis. |
| `plotOptions.unit.scatter.yTitle` | <code>string</code> | Title of the y axis (`y: 'value'`). |
| `plotOptions.unit.scatter.xFormatter` | <code>(value: number) =&gt; string</code> | Formats the x tick labels. |
| `plotOptions.unit.scatter.yFormatter` | <code>(value: number) =&gt; string</code> | Formats the y tick labels (`y: 'value'`). |
| `plotOptions.unit.scatter.xMin` | <code>number</code> | Lower end of the x axis; not set uses the data minimum. |
| `plotOptions.unit.scatter.xMax` | <code>number</code> | Upper end of the x axis; not set uses the data maximum. |
| `plotOptions.unit.scatter.yMin` | <code>number</code> | Lower end of the y axis (`y: 'value'`). |
| `plotOptions.unit.scatter.yMax` | <code>number</code> | Upper end of the y axis (`y: 'value'`). |
| `plotOptions.unit.scatter.tickAmount` | <code>number</code> | Number of x ticks. |
| `plotOptions.unit.scatter.yTickAmount` | <code>number</code> | Number of y ticks (`y: 'value'`). |
| `plotOptions.unit.scatter.laneLabelWidth` | <code>number</code> | Width of the lane label column in pixels. |
| `plotOptions.unit.scatter.gridlines` | <code>boolean</code> | Draws the gridlines. Default: `true`. |
| `plotOptions.unit.scatter.sizeField` | <code>string</code> | Data field that sizes the marks (bubble scatter). Default: `'z'`. |
| `plotOptions.unit.scatter.sizeRange` | <code>[number, number]</code> | Smallest and largest mark radius in pixels for `sizeField`. |
| `plotOptions.unit.transition` | <code>'group' \| 'flow' \| 'identity'</code> | How marks are matched between updates: 'group', 'flow' or 'identity'. Default: `'group'`. |
| `plotOptions.unit.shape` | <code>'circle' \| 'square' \| 'image' \| 'pictogram'</code> | Shape of a mark: 'circle', 'square', 'image' or 'pictogram'. Default: `'circle'`. |
| `plotOptions.unit.image` | <code>object</code> | Image used when `shape` is 'image'. |
| `plotOptions.unit.image.src` | <code>string</code> | Image URL. |
| `plotOptions.unit.image.width` | <code>number</code> | Image width in pixels; not set fits the mark. |
| `plotOptions.unit.image.height` | <code>number</code> | Image height in pixels; not set fits the mark. |
| `plotOptions.unit.image.tint` | <code>boolean</code> | Tints the image with the series colour. Default: `false`. |
| `plotOptions.unit.pictogram` | <code>object</code> | Icon used when `shape` is 'pictogram'. |
| `plotOptions.unit.pictogram.mark` | <code>WccUnitMark</code> | Icon: a built-in name, an own SVG path `{ path, viewBox }` (viewBox as string or 4 numbers, default `[0, 0, 24, 24]`), or an array whose first entry is used. An unknown name falls back to `fallback`. |
| `plotOptions.unit.pictogram.mark.name` | <code>string</code> |  |
| `plotOptions.unit.pictogram.mark.path` | <code>string</code> |  |
| `plotOptions.unit.pictogram.mark.viewBox` | <code>string \| [number, number, number, number]</code> |  |
| `plotOptions.unit.pictogram.mark.name` | <code>string</code> |  |
| `plotOptions.unit.pictogram.fit` | <code>'contain' \| 'cover' \| string</code> | How the icon fits its box: 'contain', 'cover', 'width' or 'height'. Default: `'contain'`. |
| `plotOptions.unit.pictogram.scale` | <code>number</code> | Size factor of the icon. Default: `1`. |
| `plotOptions.unit.pictogram.padding` | <code>number</code> | Space around the icon. Default: `0`. |
| `plotOptions.unit.pictogram.fallback` | <code>string</code> | Shape drawn when the icon is not available: 'circle' or 'square'. Default: `'circle'`. |
| `plotOptions.unit.pictogram.outline` | <code>boolean</code> | Draws the icon as an outline instead of filled. Default: `false`. |
| `plotOptions.unit.pictogram.outlineWidth` | <code>number</code> | Outline width in screen pixels. Default: `1.5`. |
| `plotOptions.unit.size` | <code>'auto' \| number</code> | Mark radius in pixels; 'auto' fits the marks to the space. Default: `'auto'`. |
| `plotOptions.unit.columns` | <code>object</code> | Settings of the 'columns' layout. |
| `plotOptions.unit.columns.size` | <code>'inherit' \| number</code> | Fixed mark size in the columns; 'inherit' uses `unit.size`. Default: `'inherit'`. |
| `plotOptions.unit.grid` | <code>object</code> | Settings of the 'grid' (waffle) layout. |
| `plotOptions.unit.grid.columns` | <code>number</code> | Cells per row. Default: `10`. |
| `plotOptions.unit.grid.total` | <code>number</code> | Total number of cells; empty cells are drawn in the track colour. |
| `plotOptions.unit.grid.fillFrom` | <code>'bottom' \| 'top' \| string</code> | Edge the grid fills from: 'bottom' or 'top'. Default: `'bottom'`. |
| `plotOptions.unit.grid.split` | <code>boolean</code> | Draws one small waffle per category instead of one shared grid. Default: `false`. |
| `plotOptions.unit.grid.tileColumns` | <code>number</code> | Number of small waffles per row when `split` is on; not set chooses automatically. |
| `plotOptions.unit.grid.max` | <code>number</code> | Value that fills a whole small waffle when `split` is on. |
| `plotOptions.unit.grid.trackColor` | <code>WccColor</code> | Colour of empty cells; not set uses the theme track colour. |
| `plotOptions.unit.arc` | <code>object</code> | Settings of the 'arc' (parliament) layout. |
| `plotOptions.unit.arc.startAngle` | <code>number</code> | Start angle in degrees. Default: `-90`. |
| `plotOptions.unit.arc.endAngle` | <code>number</code> | End angle in degrees. Default: `90`. |
| `plotOptions.unit.arc.innerRadiusRatio` | <code>number</code> | Inner radius as a share of the outer radius, clamped to 0.05 to 0.95. Default: `0.4`. |
| `plotOptions.unit.arc.rows` | <code>'auto' \| number</code> | Number of rows; 'auto' picks one. Default: `'auto'`. |
| `plotOptions.unit.gather` | <code>object</code> | Animation of marks moving to their new place on updates. |
| `plotOptions.unit.gather.easing` | <code>string</code> | Easing of the tween ('outCubic', 'outBack' or another named easing); a custom easing switches 'auto' motion to a tween. Default: `'outCubic'`. |
| `plotOptions.unit.gather.overshoot` | <code>number</code> | Overshoot of the 'outBack' easing. Default: `1.70158`. |
| `plotOptions.unit.gather.enter` | <code>string</code> | How new marks appear: 'burst' (from the cluster centre), 'rise' (from below) or 'fade'. Default: `'burst'`. |
| `plotOptions.unit.gather.motion` | <code>string</code> | 'spring', 'tween' or 'auto' (spring unless a custom easing is set). Default: `'auto'`. |
| `plotOptions.unit.gather.spring` | <code>string</code> | Spring preset: 'crisp', 'gentle' or 'snappy'. Default: `'crisp'`. |
| `plotOptions.unit.sizeByValue` | <code>object</code> | Sizes each mark by its own value instead of drawing equal marks. |
| `plotOptions.unit.sizeByValue.enabled` | <code>boolean</code> | Turns value-based sizing on. Default: `false`. |
| `plotOptions.unit.sizeByValue.maxRadius` | <code>'auto' \| number</code> | Radius of the largest mark in pixels; 'auto' fits the space. Default: `'auto'`. |
| `plotOptions.unit.sizeByValue.minRadius` | <code>number</code> | Radius of the smallest mark in pixels. |
| `plotOptions.unit.sizeByValue.scale` | <code>'area' \| string</code> | 'area' makes the mark area proportional to the value. Default: `'area'`. |
| `plotOptions.unit.spacing` | <code>number</code> | Distance between mark centres as a multiple of the mark size. Default: `1.05`. |
| `plotOptions.unit.borderRadius` | <code>number</code> | Corner radius of square marks. |
| `plotOptions.unit.unitValue` | <code>number</code> | how much one unit stands for |
| `plotOptions.unit.maxUnits` | <code>number</code> | Upper limit of marks; above it the counts are scaled down proportionally. Default: `5000`. |
| `plotOptions.unit.sortByGroup` | <code>boolean</code> | Keeps marks of the same category together. Default: `true`. |
| `plotOptions.unit.clusterLabels` | <code>object</code> | Labels naming each cluster of marks. |
| `plotOptions.unit.clusterLabels.show` | <code>boolean</code> | Shows the labels; not set shows them for the grouped, columns and split-grid layouts. |
| `plotOptions.unit.clusterLabels.position` | <code>string</code> | Where the label sits; not set is 'bottom' for the columns layout and 'top' otherwise. |
| `plotOptions.unit.clusterLabels.curved` | <code>boolean</code> | Bends the label along the cluster edge. Default: `false`. |
| `plotOptions.unit.clusterLabels.color` | <code>WccColor</code> | Label colour; not set uses the theme text colour. |
| `plotOptions.unit.clusterLabels.offsetY` | <code>number</code> | Vertical shift of the labels in pixels. Default: `0`. |
| `plotOptions.unit.clusterLabels.formatter` | <code>WccCallback</code> | Returns the label text for a cluster. |
| `plotOptions.unit.clusterLabels.fontSize` | <code>string</code> | Font size of the labels. Default: `'12px'`. |
| `plotOptions.unit.clusterLabels.fontFamily` | <code>string</code> | Font family; not set uses the chart font. |
| `plotOptions.unit.clusterLabels.fontWeight` | <code>string \| number</code> | Font weight of the labels. Default: `600`. |
| `plotOptions.unit.clusterLabels.external` | <code>object</code> | Labels placed outside the clusters with a connector line. |
| `plotOptions.unit.clusterLabels.external.show` | <code>boolean</code> | Moves the labels outside. Default: `false`. |
| `plotOptions.unit.clusterLabels.external.offsetX` | <code>number</code> | Horizontal shift of the external labels in pixels. Default: `0`. |
| `plotOptions.unit.clusterLabels.external.offsetY` | <code>number</code> | Vertical shift of the external labels in pixels. Default: `0`. |
| `plotOptions.unit.clusterLabels.external.connector` | <code>object</code> | Line from the cluster to its external label. |
| `plotOptions.unit.clusterLabels.external.connector.show` | <code>boolean</code> | Draws the connector. Default: `true`. |
| `plotOptions.unit.clusterLabels.external.connector.width` | <code>number</code> | Connector width in pixels. Default: `1`. |
| `plotOptions.unit.clusterLabels.external.connector.color` | <code>WccColor</code> | Connector colour; not set uses the theme colour. |
| `plotOptions.unit.clusterLabels.external.connector.gap` | <code>number</code> | Gap between the cluster and the connector in pixels. Default: `4`. |
| `plotOptions.unit.clusterLabels.external.connector.length` | <code>number</code> | Connector length in pixels. Default: `16`. |
| `plotOptions.unit.tooltip` | <code>object</code> | Tooltip of the unit chart. |
| `plotOptions.unit.tooltip.formatter` | <code>WccCallback</code> | Returns the tooltip content for a hovered mark. |
| `plotOptions.streamgraph` | <code>object</code> | Settings of streamgraphs (stacked areas around a moving baseline). |
| `plotOptions.streamgraph.offset` | <code>'wiggle' \| 'silhouette' \| 'zero' \| 'expand'</code> | Baseline of the stack: 'wiggle', 'silhouette' (centred), 'zero' or 'expand' (normalised to the full height). Default: `'wiggle'`. |
| `plotOptions.streamgraph.order` | <code>'inside-out' \| 'inverse' \| 'none'</code> | Stacking order: 'inside-out', 'inverse' or 'none' (series order). Default: `'inside-out'`. |
| `plotOptions.streamgraph.hover` | <code>object</code> | Dimming of the other layers while one is hovered. |
| `plotOptions.streamgraph.hover.show` | <code>boolean</code> | Dims the other layers on hover. Default: `true`. |
| `plotOptions.streamgraph.hover.opacity` | <code>number</code> | Opacity of the dimmed layers. Default: `0.35`. |
| `plotOptions.streamgraph.labels` | <code>object</code> | Series names drawn inside the layers. |
| `plotOptions.streamgraph.labels.show` | <code>boolean</code> | Draws the labels. Default: `true`. |
| `plotOptions.streamgraph.labels.minWidth` | <code>number</code> | Layers narrower than this many pixels get no label. Default: `24`. |
| `plotOptions.streamgraph.labels.minFontSize` | <code>number</code> | Smallest automatic font size in pixels. Default: `9`. |
| `plotOptions.streamgraph.labels.maxFontSize` | <code>number</code> | Largest automatic font size in pixels. Default: `30`. |
| `plotOptions.streamgraph.labels.style` | <code>object</code> | Text style of the labels. |
| `plotOptions.streamgraph.labels.style.fontSize` | <code>'auto' \| string</code> | Font size; 'auto' scales it with the layer thickness. Default: `'auto'`. |
| `plotOptions.streamgraph.labels.style.fontFamily` | <code>string</code> | Font family; not set uses the chart font. |
| `plotOptions.streamgraph.labels.style.fontWeight` | <code>string \| number</code> | Font weight. Default: `600`. |
| `plotOptions.streamgraph.labels.style.colors` | <code>string[]</code> | Label colours, one per series; not set picks a contrasting colour. |
| `plotOptions.calendar` | <code>object</code> | Settings of calendar heatmaps. |
| `plotOptions.calendar.weekStart` | <code>number</code> | 0 = Sunday ... 6 = Saturday |
| `plotOptions.calendar.start` | <code>WccDate</code> | First day shown ('YYYY-MM-DD', Date or timestamp); not set uses the first data day. |
| `plotOptions.calendar.end` | <code>WccDate</code> | Last day shown; not set uses the last data day. |
| `plotOptions.calendar.aggregate` | <code>'sum' \| 'max' \| 'min' \| 'mean' \| 'last'</code> | several values on one day |
| `plotOptions.calendar.dayLabels` | <code>'alternate' \| 'all' \| false</code> | Weekday labels: 'alternate' (every second day), 'all', or false for none. Default: `'alternate'`. |
| `plotOptions.calendar.dayNames` | <code>string[]</code> | 7 names, starting with Sunday |
| `plotOptions.calendar.monthNames` | <code>string[]</code> | Twelve month names, January first; not set uses the locale. |
| `plotOptions.calendar.emptyColor` | <code>WccColor</code> | Colour of days in range without a value; not set uses the theme. |
| `plotOptions.calendar.color` | <code>WccColor</code> | Base colour of the day cells. |
| `plotOptions.calendar.formatter` | <code>WccCallback</code> | Formats the value shown for a day. |
| `plotOptions.barRace` | <code>object</code> | Settings of bar race charts. |
| `plotOptions.barRace.maxBars` | <code>number</code> | Number of bars shown; the rest wait below the cut. Default: `10`. |
| `plotOptions.barRace.sort` | <code>'desc' \| 'asc'</code> | 'desc' puts the largest value on top; 'asc' the smallest. Default: `'desc'`. |
| `plotOptions.barRace.nulls` | <code>'dash' \| 'hide'</code> | 'dash' keeps a row without a value and shows `values.nullLabel`; 'hide' drops it. Default: `'dash'`. |
| `plotOptions.barRace.speed` | <code>number</code> | ms per update |
| `plotOptions.barRace.colors` | <code>string[] \| string</code> | Palette name or colour list for the bars; not set uses the theme colours. |
| `plotOptions.barRace.labels` | <code>object</code> | Names beside the bars. |
| `plotOptions.barRace.labels.show` | <code>boolean</code> | Draws the names. Default: `true`. |
| `plotOptions.barRace.labels.fontSize` | <code>number</code> | Font size of the names in pixels. Default: `12.5`. |
| `plotOptions.barRace.values` | <code>object</code> | Values at the end of the bars. |
| `plotOptions.barRace.values.show` | <code>boolean</code> | Draws the values. Default: `true`. |
| `plotOptions.barRace.values.fontSize` | <code>number</code> | Font size of the values in pixels. |
| `plotOptions.barRace.values.decimals` | <code>number</code> | Fixed number of decimals; not set uses the locale's compact notation. |
| `plotOptions.barRace.values.formatter` | <code>WccCallback</code> | Returns the value text. |
| `plotOptions.barRace.values.nullLabel` | <code>string</code> | Text of a row without a value. Default: `'–'`. |
| `plotOptions.barRace.ticker` | <code>object</code> | Large period label in the background. |
| `plotOptions.barRace.ticker.show` | <code>boolean</code> | Draws the ticker. Default: `true`. |
| `plotOptions.barRace.ticker.text` | <code>string \| number \| ((opts: { w: any }) =&gt; string)</code> | Ticker text, or a function of `{ w }` (the chart's internal state) that returns it; not set shows the current period. |
| `plotOptions.barRace.ticker.fontSize` | <code>number</code> | Font size of the ticker in pixels. |
| `plotOptions.barRace.ticker.color` | <code>WccColor</code> | Ticker colour. |
| `plotOptions.barRace.ticker.opacity` | <code>number</code> | Ticker opacity. Default: `0.55`. |
| `plotOptions.barRace.cut` | <code>object</code> | Line under the last shown bar when more names wait below it. |
| `plotOptions.barRace.cut.show` | <code>'auto' \| boolean</code> | 'auto' draws it when names wait below; true always; false never. Default: `'auto'`. |
| `plotOptions.barRace.cut.label` | <code>string \| false \| ((opts: { shown: number total: number }) =&gt; string)</code> | Cut text: a string, a function of `{ shown, total }` (bars drawn, names in the race: the frame's `meta.total`, else its data length), or false for none; not set shows 'Top N of M'. |
| `plotOptions.barRace.cut.color` | <code>WccColor</code> | Colour of the cut line. |
| `plotOptions.slope` | <code>object</code> | Settings of slope charts. |
| `plotOptions.slope.colorBy` | <code>'series' \| 'direction'</code> | 'series' colours lines by series; 'direction' by up, down or flat. Default: `'series'`. |
| `plotOptions.slope.upColor` | <code>WccColor</code> | Colour of rising lines with `colorBy: 'direction'`. Default: `'#16a34a'`. |
| `plotOptions.slope.downColor` | <code>WccColor</code> | Colour of falling lines with `colorBy: 'direction'`. Default: `'#dc2626'`. |
| `plotOptions.slope.flatColor` | <code>WccColor</code> | Colour of flat lines with `colorBy: 'direction'`. Default: `'#94a3b8'`. |
| `plotOptions.slope.flatThreshold` | <code>number</code> | \|last - first\| / \|first\| below this counts as flat |
| `plotOptions.slope.highlight` | <code>string[]</code> | series names drawn in colour; the others are muted |
| `plotOptions.slope.mutedColor` | <code>WccColor</code> | Colour of series not listed in `highlight`; not set uses a neutral grey for the mode. |
| `plotOptions.slope.labels` | <code>object</code> | Labels at both ends of the lines. |
| `plotOptions.slope.labels.show` | <code>boolean</code> | Draws the labels. Default: `true`. |
| `plotOptions.slope.labels.left` | <code>'value' \| 'name' \| 'both' \| false</code> | Left label content: 'value', 'name', 'both' or false. Default: `'value'`. |
| `plotOptions.slope.labels.right` | <code>'value' \| 'name' \| 'both' \| false</code> | Right label content: 'value', 'name', 'both' or false. Default: `'both'`. |
| `plotOptions.slope.labels.fontSize` | <code>number</code> | Font size in pixels. Default: `12`. |
| `plotOptions.slope.labels.minGap` | <code>number</code> | Minimum vertical gap between labels in pixels. Default: `0`. |
| `plotOptions.slope.labels.formatter` | <code>WccCallback</code> | Formats the label value. |
| `plotOptions.slope.periods` | <code>object</code> | Period names above the two axes. |
| `plotOptions.slope.periods.show` | <code>boolean</code> | Draws the period names. Default: `true`. |
| `plotOptions.slope.periods.fontSize` | <code>number</code> | Font size in pixels. Default: `12`. |
| `plotOptions.slope.hover` | <code>object</code> | Dimming of the other lines while one is hovered. |
| `plotOptions.slope.hover.opacity` | <code>number</code> | Opacity of the dimmed lines. Default: `0.22`. |
| `plotOptions.beeswarm` | <code>object</code> | Settings of beeswarm charts. |
| `plotOptions.beeswarm.size` | <code>number</code> | Dot radius in pixels; dots shrink towards `minSize` when a swarm is too wide. Default: `3.5`. |
| `plotOptions.beeswarm.minSize` | <code>number</code> | Smallest dot radius in pixels. Default: `1.5`. |
| `plotOptions.beeswarm.padding` | <code>number</code> | Gap between dots in pixels. Default: `1`. |
| `plotOptions.beeswarm.width` | <code>string \| number</code> | Width of a swarm as a share of the category slot or in pixels. Default: `'88%'`. |
| `plotOptions.beeswarm.side` | <code>'both' \| 'left' \| 'right' \| 'top' \| 'bottom'</code> | Side the dots spread to: 'both', 'left', 'right', 'top' or 'bottom'. Default: `'both'`. |
| `plotOptions.beeswarm.maxPoints` | <code>number</code> | Dots per category; above it the samples are thinned evenly. Default: `2000`. |
| `plotOptions.beeswarm.opacity` | <code>number</code> | Dot opacity. Default: `0.92`. |
| `plotOptions.beeswarm.strokeWidth` | <code>number</code> | Dot outline width; not set uses min(1, 0.3 × radius). |
| `plotOptions.beeswarm.strokeColor` | <code>WccColor</code> | Dot outline colour; '#fff' follows the surface colour in dark mode. Default: `'#fff'`. |
| `plotOptions.beeswarm.colorScale` | <code>WccColorScale</code> | Colours the dots by value instead of by series. |
| `plotOptions.beeswarm.colorScale.colors` | <code>string[]</code> | Colours from the lowest to the highest value. |
| `plotOptions.beeswarm.colorScale.min` | <code>number</code> | Value mapped to the first colour; not set uses the smallest sample. |
| `plotOptions.beeswarm.colorScale.max` | <code>number</code> | Value mapped to the last colour; not set uses the largest sample. |
| `plotOptions.beeswarm.colorScale.steps` | <code>number</code> | Number of discrete colour steps; not set gives a continuous scale. |
| `plotOptions.beeswarm.median` | <code>object</code> | Median line of each swarm. |
| `plotOptions.beeswarm.median.show` | <code>boolean</code> | Draws the median line. Default: `true`. |
| `plotOptions.beeswarm.median.color` | <code>WccColor</code> | Colour of the median line. |
| `plotOptions.beeswarm.median.strokeWidth` | <code>number</code> | Width of the median line in pixels. Default: `1.75`. |
| `plotOptions.violin` | <code>object</code> | Settings of violin charts. |
| `plotOptions.violin.bandwidthScale` | <code>number</code> | Factor applied to the automatic kernel bandwidth; larger values give smoother shapes. Default: `1`. |
| `plotOptions.violin.kde` | <code>object</code> | Kernel density estimate settings. |
| `plotOptions.violin.kde.bandwidth` | <code>number</code> | Fixed kernel bandwidth in data units; not set is estimated from the samples. |
| `plotOptions.violin.kde.resolution` | <code>number</code> | Number of points along each violin outline. Default: `64`. |
| `plotOptions.violin.normalize` | <code>'individual' \| 'group'</code> | 'individual' scales each violin to its own peak; 'group' to the largest peak of all. Default: `'individual'`. |
| `plotOptions.violin.side` | <code>'both' \| 'left' \| 'right' \| 'top' \| 'bottom'</code> | Side drawn: 'both' (full violin), 'left', 'right', 'top' or 'bottom' (half violins). Default: `'both'`. |
| `plotOptions.violin.box` | <code>object</code> | Box plot drawn inside the violin. |
| `plotOptions.violin.box.show` | <code>boolean</code> | Draws the inner box. Default: `false`. |
| `plotOptions.violin.box.width` | <code>string \| number</code> | Box width as a share of the violin or in pixels. Default: `'15%'`. |
| `plotOptions.violin.box.whiskers` | <code>'minmax' \| 'tukey' \| 'percentile'</code> | Whisker rule: 'minmax', 'tukey' (1.5 × IQR) or 'percentile'. Default: `'minmax'`. |
| `plotOptions.violin.box.strokeWidth` | <code>number</code> | Outline width of the box in pixels. Default: `1`. |
| `plotOptions.violin.box.fillColor` | <code>WccColor</code> | Fill colour of the box. |
| `plotOptions.violin.box.capWidth` | <code>number</code> | Width of the whisker caps as a share of the box width. Default: `0.5`. |
| `plotOptions.violin.points` | <code>WccSamplePoints</code> | Raw samples drawn over the violins. |
| `plotOptions.violin.points.show` | <code>boolean \| 'all' \| 'outliers'</code> | false: none; true or 'all': every sample; 'outliers': only those outside the whiskers |
| `plotOptions.violin.points.shape` | <code>'circle' \| 'square'</code> | Point shape: 'circle' or 'square'. Default: `'circle'`. |
| `plotOptions.violin.points.size` | <code>number</code> | Point radius in pixels. Default: `2.5`. |
| `plotOptions.violin.points.jitter` | <code>number</code> | 0..1 of the lane width |
| `plotOptions.violin.points.maxPoints` | <code>number</code> | Upper limit of drawn points; above it the samples are thinned. Default: `3000`. |
| `plotOptions.violin.points.opacity` | <code>number</code> | Point opacity. Default: `0.9`. |
| `plotOptions.violin.points.fillColor` | <code>string</code> | 'series-dark' \| 'series' \| a colour |
| `plotOptions.violin.points.strokeColor` | <code>string</code> | Point outline colour. Default: `'#fff'`. |
| `plotOptions.violin.points.strokeWidth` | <code>number</code> | Point outline width in pixels. Default: `1`. |
| `plotOptions.violin.points.colorScale` | <code>WccColorScale</code> | Colours the points by value instead of by series (violin default: 24 steps). |
| `plotOptions.violin.points.colorScale.colors` | <code>string[]</code> | Colours from the lowest to the highest value. |
| `plotOptions.violin.points.colorScale.min` | <code>number</code> | Value mapped to the first colour; not set uses the smallest sample. |
| `plotOptions.violin.points.colorScale.max` | <code>number</code> | Value mapped to the last colour; not set uses the largest sample. |
| `plotOptions.violin.points.colorScale.steps` | <code>number</code> | Number of discrete colour steps; not set gives a continuous scale. |
| `plotOptions.violin.points.constrainToViolin` | <code>boolean</code> | Keeps the jittered points inside the violin outline. Default: `true`. |
| `plotOptions.violin.points.position` | <code>'center' \| 'left' \| 'right' \| 'top' \| 'bottom'</code> | Where the points lane sits: 'center', 'left', 'right', 'top' or 'bottom'. Default: `'center'`. |
| `plotOptions.violin.points.laneWidth` | <code>string \| number</code> | Width of the points lane as a share of the violin or in pixels. Default: `'40%'`. |
| `plotOptions.histogram` | <code>object</code> | Settings of histograms (raw values binned into bars). |
| `plotOptions.histogram.bins` | <code>'auto' \| number \| number[] \| string</code> | Bin count, or a rule: 'auto' (the larger count of Freedman–Diaconis and Sturges), 'sturges', 'rice', 'sqrt', 'scott' or 'fd'. Default: `'auto'`. |
| `plotOptions.histogram.binWidth` | <code>number</code> | Fixed bin width in data units; overrides `bins`. |
| `plotOptions.histogram.range` | <code>[number, number]</code> | [min, max] of the binned range; not set uses the data extent. |
| `plotOptions.histogram.normalize` | <code>'count' \| 'relative' \| 'density'</code> | Bar height: 'count', 'relative' (percent of the series) or 'density' (count / (n × bin width)). Default: `'count'`. |
| `plotOptions.histogram.cumulative` | <code>boolean</code> | Each bar adds up all bins before it. Default: `false`. |
| `plotOptions.histogram.overlap` | <code>boolean</code> | With several series, true draws the bars at 55% fill opacity without outline; false keeps them opaque with a 1 px outline. Default: `true`. |
| `plotOptions.histogram.niceEdges` | <code>boolean</code> | round rule-based bin widths to 1/2/2.5/5 steps and align the edges to them |

## responsive

Option overrides that apply below given container widths. Default: `[]`.

Type: `ApexResponsive[]`

| Option | Type | Description |
| --- | --- | --- |
| `responsive[].breakpoint` | <code>number</code> | Container width in pixels at and below which `options` apply. |
| `responsive[].options` | <code>any</code> | Options merged over the chart options while the width is at or below `breakpoint`. |

## series

The data. Axis charts take an array of series objects; pie, donut, polar area and radial bar take an array of numbers.

Type: `ApexAxisChartSeries \| ApexNonAxisChartSeries \| WccSeries[]`

| Option | Type | Description |
| --- | --- | --- |
| `series[].name` | <code>string</code> | Series name shown in the legend, the tooltip and the accessible data table. |
| `series[].type` | <code>string</code> | Chart type of this series in a combined chart (for example 'column' next to 'line'); not set uses `chart.type`. |
| `series[].color` | <code>string</code> | Colour of this series; overrides the palette entry at its index. |
| `series[].group` | <code>string</code> | Stack name for stacked bar/column charts: series with the same group form one stack, different groups stand side by side. |
| `series[].hidden` | <code>boolean</code> | Starts the series hidden, as if switched off in the legend. |
| `series[].zIndex` | <code>number</code> | Drawing order of line and area series; higher numbers are drawn on top. |
| `series[].data` | <code>WccDatum</code> | The values: plain numbers (with `xaxis.categories`), `{ x, y }` objects, `[x, y]` pairs, or per-type shapes such as `[x, [o, h, l, c]]` for candlesticks. Data of the series: numbers, `[x, y]` pairs, point objects, or a `{ nodes, edges, links }` graph, depending on the type. |
| `series[].data.x` | <code>any</code> | The x value: category text, number or timestamp/date string, depending on `xaxis.type`. |
| `series[].data.y` | <code>any</code> | The y value; ranges and candlesticks take an array. |
| `series[].data.fill` | <code>ApexFill</code> | Fill of this single point (bar, area of a range), merged over `fill`. |
| `series[].data.fill.colors` | <code>any[]</code> | Fill colours; not set uses the series colours. |
| `series[].data.fill.opacity` | <code>number \| number[]</code> | Fill opacity (0 to 1); an array gives one per series. Default: `0.85`. |
| `series[].data.fill.type` | <code>string \| string[]</code> | 'solid', 'gradient', 'pattern' or 'image'; an array gives one per series. Default: `'solid'`. |
| `series[].data.fill.gradient` | <code>object</code> | Settings for `type: 'gradient'`. |
| `series[].data.fill.gradient.shade` | <code>string</code> | 'light' or 'dark': direction in which the series colour is shaded. Default: `'dark'`. |
| `series[].data.fill.gradient.type` | <code>string</code> | Direction: 'horizontal', 'vertical', 'diagonal1', 'diagonal2' or 'radial'. Default: `'horizontal'`. |
| `series[].data.fill.gradient.shadeIntensity` | <code>number</code> | Strength of the shading (0 to 1). Default: `0.5`. |
| `series[].data.fill.gradient.gradientToColors` | <code>string[]</code> | End colours of the gradient per series; not set shades the series colour. |
| `series[].data.fill.gradient.inverseColors` | <code>boolean</code> | Swaps start and end colour for horizontal bars and similar shapes. Default: `true`. |
| `series[].data.fill.gradient.opacityFrom` | <code>number \| number[]</code> | Opacity at the start of the gradient. Default: `1`. |
| `series[].data.fill.gradient.opacityTo` | <code>number \| number[]</code> | Opacity at the end of the gradient. Default: `1`. |
| `series[].data.fill.gradient.stops` | <code>number[]</code> | Positions in percent where the gradient changes. Default: `[0,50,100]`. |
| `series[].data.fill.gradient.colorStops` | <code>ApexColorStop[]</code> | Explicit stops; when set they replace the generated gradient. An array of arrays gives stops per series. Default: `[]`. |
| `series[].data.fill.gradient.colorStops[].offset` | <code>number</code> | Position of the stop along the gradient, in percent (0 to 100). |
| `series[].data.fill.gradient.colorStops[].color` | <code>string</code> | Colour at this stop. |
| `series[].data.fill.gradient.colorStops[].opacity` | <code>number</code> | Opacity at this stop (0 to 1). |
| `series[].data.fill.gradient.colorStops[].offset` | <code>number</code> | Position of the stop along the gradient, in percent (0 to 100). |
| `series[].data.fill.image` | <code>object</code> | Settings for `type: 'image'`. |
| `series[].data.fill.image.src` | <code>string \| string[]</code> | Image URL, or one URL per series. Default: `[]`. |
| `series[].data.fill.image.width` | <code>number</code> | Width of the image tile in pixels; set together with `height`, otherwise the image is stretched to the shape. |
| `series[].data.fill.image.height` | <code>number</code> | Height of the image tile in pixels; set together with `width`. |
| `series[].data.fill.pattern` | <code>object</code> | Settings for `type: 'pattern'`. |
| `series[].data.fill.pattern.style` | <code>string \| string[]</code> | 'verticalLines', 'horizontalLines', 'slantedLines', 'squares' or 'circles'; an array gives one per series. Default: `'squares'`. |
| `series[].data.fill.pattern.width` | <code>number</code> | Width of the pattern tile in pixels. Default: `6`. |
| `series[].data.fill.pattern.height` | <code>number</code> | Height of the pattern tile in pixels. Default: `6`. |
| `series[].data.fill.pattern.strokeWidth` | <code>number</code> | Line width inside the pattern in pixels. Default: `2`. |
| `series[].data.fillColor` | <code>string</code> | Colour of this single point. |
| `series[].data.strokeColor` | <code>string</code> | Outline colour of this single point. |
| `series[].data.meta` | <code>any</code> | Any extra data; not drawn, but available to formatters and event callbacks. |
| `series[].data.goals` | <code>object[]</code> | Target markers drawn across a bar or column at the given values. |
| `series[].data.goals[].name` | <code>string</code> | Name of the goal, shown in the tooltip and legend. |
| `series[].data.goals[].value` | <code>number</code> | Value at which the goal marker is drawn. |
| `series[].data.goals[].strokeHeight` | <code>number</code> | Thickness of the marker for vertical bars, in pixels. |
| `series[].data.goals[].strokeWidth` | <code>number</code> | Thickness of the marker for horizontal bars, in pixels. |
| `series[].data.goals[].strokeColor` | <code>string</code> | Colour of the goal marker. |
| `series[].data.goals[].strokeDashArray` | <code>number</code> | Dash length of the goal marker; 0 draws a solid line. |
| `series[].data.goals[].strokeLineCap` | <code>'butt' \| 'square' \| 'round'</code> | Line ends of the goal marker. |
| `series[].data.barHeightOffset` | <code>number</code> | Pixels added to the height of this horizontal bar (centred). |
| `series[].data.columnWidthOffset` | <code>number</code> | Pixels added to the width of this column (centred). |
| `series[].data.x` | <code>any</code> | The x value: category text, number or timestamp/date string, depending on `xaxis.type`. |
| `series[].data.points` | <code>number[]</code> | Raw samples of a box plot point; quartiles and whiskers are computed from them. |
| `series[].data.id` | <code>string \| number</code> | hierarchies (treemap, sunburst, icicle), tree and network nodes |
| `series[].data.name` | <code>string</code> | Display name of a node, slice or unit; used by labels, tooltips and the legend. |
| `series[].data.value` | <code>number \| null</code> | Size of a hierarchy, sankey, chord or map item; `null` marks a missing value. |
| `series[].data.children` | <code>WccDatum[] & WccDatum[]</code> | Child items of a hierarchy node (treemap, sunburst, icicle, tree). Child items of a hierarchy node (treemap, sunburst, icicle, tree). |
| `series[].data.isTotal` | <code>boolean</code> | waterfall: bar that shows the running total / a subtotal |
| `series[].data.isSubtotal` | <code>boolean</code> | Waterfall: draws this bar as the running total since the previous subtotal. |
| `series[].data.from` | <code>any</code> | sankey, chord and map arcs |
| `series[].data.to` | <code>any</code> | Target node id (sankey, chord, network edges) or target location (map arcs and routes). |
| `series[].data.highlight` | <code>number \| null</code> | highlight-filter feature: the filtered part of this mark |
| `series[].data.color` | <code>WccColor</code> | Colour of this item; overrides the series colour. |
| `series[].data.nodes` | <code>WccDatum[]</code> | Graph nodes (network, sankey, tree) when the graph is passed as `data`. |
| `series[].data.edges` | <code>WccDatum[]</code> | Network edges when the graph is passed as `data`. |
| `series[].data.links` | <code>WccDatum[]</code> | Sankey links when the graph is passed as `data`. |
| `series[].name` | <code>string</code> | Series name shown in the legend and tooltip. |
| `series[].nodes` | <code>WccDatum[]</code> | network |
| `series[].nodes[].x` | <code>any</code> | Category, timestamp or number of the point on the x axis (cartesian types, calendar dates, beeswarm groups). |
| `series[].nodes[].y` | <code>any</code> | Value of the point; an array for range-like types (e.g. `[low, high]` or box-plot quartiles). |
| `series[].nodes[].id` | <code>string \| number</code> | hierarchies (treemap, sunburst, icicle), tree and network nodes |
| `series[].nodes[].name` | <code>string</code> | Display name of a node, slice or unit; used by labels, tooltips and the legend. |
| `series[].nodes[].value` | <code>number \| null</code> | Size of a hierarchy, sankey, chord or map item; `null` marks a missing value. |
| `series[].nodes[].children` | <code>WccDatum[]</code> | Child items of a hierarchy node (treemap, sunburst, icicle, tree). |
| `series[].nodes[].isTotal` | <code>boolean</code> | waterfall: bar that shows the running total / a subtotal |
| `series[].nodes[].isSubtotal` | <code>boolean</code> | Waterfall: draws this bar as the running total since the previous subtotal. |
| `series[].nodes[].points` | <code>number[]</code> | raw samples: boxPlot, violin, raincloud, beeswarm |
| `series[].nodes[].from` | <code>any</code> | sankey, chord and map arcs |
| `series[].nodes[].to` | <code>any</code> | Target node id (sankey, chord, network edges) or target location (map arcs and routes). |
| `series[].nodes[].highlight` | <code>number \| null</code> | highlight-filter feature: the filtered part of this mark |
| `series[].nodes[].color` | <code>WccColor</code> | Colour of this item; overrides the series colour. |
| `series[].nodes[].fillColor` | <code>string</code> | Fill colour of this item; overrides `color` for the fill. |
| `series[].nodes[].strokeColor` | <code>string</code> | Stroke colour of this item; overrides the series stroke colour. |
| `series[].nodes[].meta` | <code>any</code> | Free data kept with the item and passed to formatters and events; not drawn. |
| `series[].edges` | <code>Array&lt;WccDatum \| [string \| number, string \| number, number?]&gt;</code> | Network edges: `{ from, to }` objects or `[from, to, weight?]` tuples. |
| `series[].links` | <code>Array&lt;WccDatum \| [string \| number, string \| number, number?]&gt;</code> | Sankey or network links: `{ from, to, value }` objects or `[from, to, value?]` tuples. |
| `series[].paths` | <code>object[]</code> | Network: highlighted paths, each a node id sequence with a name, severity and colour. |
| `series[].paths[].name` | <code>string</code> |  |
| `series[].paths[].nodes` | <code>Array&lt;string \| number&gt;</code> |  |
| `series[].paths[].severity` | <code>any</code> |  |
| `series[].paths[].color` | <code>string</code> |  |
| `series[].highlightData` | <code>(number \| null)[]</code> | highlight-filter feature: the filtered part of every point |
| `series[].marker` | <code>string</code> | map marker series |
| `series[].size` | <code>number</code> | Map marker series: marker size in pixels. |
| `series[].labels` | <code>boolean</code> | Map marker series: draws a label next to each marker. |
| `series[].lane` | <code>string</code> | quintTimeline / quintConvergence: id of the lane (plotOptions.quint.lanes[].id) this series is drawn in. |
| `series[].keys` | <code>string[] \| string</code> | quintTimeline / quintConvergence: semantic keys (service, cluster, region) for crossfilter across lanes. Default: `[name]`. |
| `series[].errorRate` | <code>(number \| null)[]</code> | quintTimeline / quintConvergence, events lane: error rate per slot in percent (0–100); colours the columns. |
| `series[].typical` | <code>(number \| null)[]</code> | quintTimeline / quintConvergence, events lane: the typical day per slot, drawn as a dashed step line. |
| `series[].availability` | <code>number</code> | quintTimeline / quintConvergence, budget lane: availability target in percent, shown as "availability · p95 latency". |
| `series[].p95` | <code>number</code> | quintTimeline / quintConvergence, budget lane: p95 latency in ms, shown as "availability · p95 latency". |

## states

Visual change of a data point when hovered or selected.

Type: `ApexStates`

| Option | Type | Description |
| --- | --- | --- |
| `states.hover` | <code>object</code> | Look of a hovered data point. |
| `states.hover.filter` | <code>object</code> | Filter applied to the hovered shape. |
| `states.hover.filter.type` | <code>string</code> | 'lighten', 'darken' or 'none'. Default: `'lighten'`. |
| `states.active` | <code>object</code> | Look of a selected (clicked) data point. |
| `states.active.allowMultipleDataPointsSelection` | <code>boolean</code> | Lets several points be selected at once; a click on a selected one unselects it. Default: `false`. |
| `states.active.filter` | <code>object</code> | Filter applied to the selected shape. |
| `states.active.filter.type` | <code>string</code> | 'lighten', 'darken' or 'none'. Default: `'darken'`. |

## stroke

Lines of line/area series and the outlines of bars and slices.

Type: `ApexStroke`

| Option | Type | Description |
| --- | --- | --- |
| `stroke.show` | <code>boolean</code> | Draws lines and outlines. Default: `true`. |
| `stroke.curve` | <code>'smooth' \| 'straight' \| 'stepline' \| 'linestep' \| 'monotoneCubic' \| ('smooth' \| 'straight' \| 'stepline' \| 'linestep' \| 'monotoneCubic')[]</code> | Line shape between points: 'smooth', 'straight', 'stepline', 'linestep' or 'monotoneCubic'; an array gives one per series. Default: `'smooth'`. |
| `stroke.lineCap` | <code>'butt' \| 'square' \| 'round'</code> | Line ends: 'butt', 'square' or 'round'. Default: `'butt'`. |
| `stroke.colors` | <code>any[] \| string[]</code> | Line colours; not set uses the series colours. |
| `stroke.width` | <code>number \| number[]</code> | Line width in pixels; an array gives one per series. Default: `2`. |
| `stroke.dashArray` | <code>number \| number[]</code> | Dash length in pixels; 0 draws solid lines; an array gives one per series. Default: `0`. |
| `stroke.fill` | <code>ApexFill</code> | Fill of the line itself on area charts (for example a gradient line); same shape as `fill`. |
| `stroke.fill.colors` | <code>any[]</code> | Fill colours; not set uses the series colours. |
| `stroke.fill.opacity` | <code>number \| number[]</code> | Fill opacity (0 to 1); an array gives one per series. Default: `0.85`. |
| `stroke.fill.type` | <code>string \| string[]</code> | 'solid', 'gradient', 'pattern' or 'image'; an array gives one per series. Default: `'solid'`. |
| `stroke.fill.gradient` | <code>object</code> | Settings for `type: 'gradient'`. |
| `stroke.fill.gradient.shade` | <code>string</code> | 'light' or 'dark': direction in which the series colour is shaded. Default: `'dark'`. |
| `stroke.fill.gradient.type` | <code>string</code> | Direction: 'horizontal', 'vertical', 'diagonal1', 'diagonal2' or 'radial'. Default: `'horizontal'`. |
| `stroke.fill.gradient.shadeIntensity` | <code>number</code> | Strength of the shading (0 to 1). Default: `0.5`. |
| `stroke.fill.gradient.gradientToColors` | <code>string[]</code> | End colours of the gradient per series; not set shades the series colour. |
| `stroke.fill.gradient.inverseColors` | <code>boolean</code> | Swaps start and end colour for horizontal bars and similar shapes. Default: `true`. |
| `stroke.fill.gradient.opacityFrom` | <code>number \| number[]</code> | Opacity at the start of the gradient. Default: `1`. |
| `stroke.fill.gradient.opacityTo` | <code>number \| number[]</code> | Opacity at the end of the gradient. Default: `1`. |
| `stroke.fill.gradient.stops` | <code>number[]</code> | Positions in percent where the gradient changes. Default: `[0,50,100]`. |
| `stroke.fill.gradient.colorStops` | <code>ApexColorStop[]</code> | Explicit stops; when set they replace the generated gradient. An array of arrays gives stops per series. Default: `[]`. |
| `stroke.fill.gradient.colorStops[].offset` | <code>number</code> | Position of the stop along the gradient, in percent (0 to 100). |
| `stroke.fill.gradient.colorStops[].color` | <code>string</code> | Colour at this stop. |
| `stroke.fill.gradient.colorStops[].opacity` | <code>number</code> | Opacity at this stop (0 to 1). |
| `stroke.fill.gradient.colorStops[].offset` | <code>number</code> | Position of the stop along the gradient, in percent (0 to 100). |
| `stroke.fill.image` | <code>object</code> | Settings for `type: 'image'`. |
| `stroke.fill.image.src` | <code>string \| string[]</code> | Image URL, or one URL per series. Default: `[]`. |
| `stroke.fill.image.width` | <code>number</code> | Width of the image tile in pixels; set together with `height`, otherwise the image is stretched to the shape. |
| `stroke.fill.image.height` | <code>number</code> | Height of the image tile in pixels; set together with `width`. |
| `stroke.fill.pattern` | <code>object</code> | Settings for `type: 'pattern'`. |
| `stroke.fill.pattern.style` | <code>string \| string[]</code> | 'verticalLines', 'horizontalLines', 'slantedLines', 'squares' or 'circles'; an array gives one per series. Default: `'squares'`. |
| `stroke.fill.pattern.width` | <code>number</code> | Width of the pattern tile in pixels. Default: `6`. |
| `stroke.fill.pattern.height` | <code>number</code> | Height of the pattern tile in pixels. Default: `6`. |
| `stroke.fill.pattern.strokeWidth` | <code>number</code> | Line width inside the pattern in pixels. Default: `2`. |

## subtitle

Second title line under `title`.

Type: `ApexTitleSubtitle`

| Option | Type | Description |
| --- | --- | --- |
| `subtitle.text` | <code>string</code> | The text; not set draws nothing. |
| `subtitle.align` | <code>'left' \| 'center' \| 'right'</code> | 'left', 'center' or 'right'. Default: `'left'`. |
| `subtitle.margin` | <code>number</code> | Space in pixels below the text before the plot starts. Default: `5`. |
| `subtitle.offsetX` | <code>number</code> | Moves the text horizontally. Default: `0`. |
| `subtitle.offsetY` | <code>number</code> | Moves the text vertically. Default: `0` for `title`, `30` for `subtitle`. |
| `subtitle.floating` | <code>boolean</code> | Takes the text out of the layout so the plot starts at the top. Default: `false`. |
| `subtitle.style` | <code>object</code> | Text style. |
| `subtitle.style.fontSize` | <code>string</code> | Font size. Default: `'14px'` for `title`, `'12px'` for `subtitle`. |
| `subtitle.style.fontFamily` | <code>string</code> | Font family; not set uses `chart.fontFamily`. |
| `subtitle.style.fontWeight` | <code>string \| number</code> | Font weight. Default: `900` for `title`, `400` for `subtitle`. |
| `subtitle.style.color` | <code>string</code> | Text colour; not set uses `chart.foreColor`. |

## theme

Light/dark mode, colour palette and monochrome colouring.

Type: `ApexTheme`

| Option | Type | Description |
| --- | --- | --- |
| `theme.accessibility` | <code>object</code> | West Coast Charts: colour-vision palettes / high contrast |
| `theme.accessibility.colorBlindMode` | <code>'' \| 'deuteranopia' \| 'protanopia' \| 'tritanopia' \| 'highContrast'</code> | Colour-vision palette: 'deuteranopia', 'protanopia', 'tritanopia' (needs `west-coast-charts/types`) or 'highContrast' (also turns data labels on and widens lines to at least 3 px); '' keeps the normal palette. Default: `''`. |
| `theme.mode` | <code>'light' \| 'dark' \| 'auto'</code> | West Coast Charts: 'auto' follows prefers-color-scheme |
| `theme.preset` | <code>'coastal' \| 'midnight' \| 'paper' \| 'accessible' \| 'classic'</code> | West Coast Charts: built-in design-token preset ('classic' = 4.7.0 look) |
| `theme.tokens` | <code>WccThemeTokens \| boolean</code> | true: read --wcc-* / --apx-* CSS tokens (default); false: ignore them; object: token overrides |
| `theme.tokens.fontFamily` | <code>string</code> | Chart font family (CSS `--wcc-font-family`). |
| `theme.tokens.fontSize` | <code>string</code> | Base font size of labels, legend and tooltip (CSS `--wcc-font-size`); axis labels use one pixel less, at least 10px. |
| `theme.tokens.text` | <code>string</code> | Primary text colour: titles and centre values (CSS `--wcc-text`). |
| `theme.tokens.textMuted` | <code>string</code> | Secondary text colour: axis labels, legend, subtitle (CSS `--wcc-text-muted`). |
| `theme.tokens.surface` | <code>string</code> | Colour of surfaces drawn on top of the plot, such as marker outlines and slice separators (CSS `--wcc-surface`). |
| `theme.tokens.background` | <code>string</code> | Chart background colour (CSS `--wcc-background`). |
| `theme.tokens.grid` | <code>string</code> | Grid line colour; also radar polygons (CSS `--wcc-grid`). |
| `theme.tokens.axis` | <code>string</code> | Axis border, tick and crosshair colour (CSS `--wcc-axis`). |
| `theme.tokens.track` | <code>string</code> | Background track of radial bars and gauges (CSS `--wcc-track`). |
| `theme.tokens.accent` | <code>string</code> | Accent colour of hovered and selected menu items (CSS `--wcc-accent`). |
| `theme.tokens.focusRing` | <code>string</code> | Colour of the keyboard focus indicator (CSS `--wcc-focus-ring`). |
| `theme.tokens.tooltipBg` | <code>string</code> | Tooltip background (CSS `--wcc-tooltip-bg`). |
| `theme.tokens.tooltipText` | <code>string</code> | Tooltip text colour (CSS `--wcc-tooltip-text`). |
| `theme.tokens.tooltipBorder` | <code>string</code> | Tooltip border colour (CSS `--wcc-tooltip-border`). |
| `theme.tokens.tooltipShadow` | <code>string</code> | Tooltip box-shadow, any CSS shadow value (CSS `--wcc-tooltip-shadow`). |
| `theme.tokens.radius` | <code>string</code> | Corner radius of the tooltip (CSS `--wcc-radius`). |
| `theme.tokens.radiusSm` | <code>string</code> | Smaller corner radius of axis tooltips and legend items (CSS `--wcc-radius-sm`). |
| `theme.tokens.barRadius` | <code>string</code> | Bar corner radius in pixels, applied to the outer end (CSS `--wcc-bar-radius`). |
| `theme.tokens.lineWidth` | <code>string</code> | Stroke width of line-type series in pixels (CSS `--wcc-line-width`). |
| `theme.tokens.gridDash` | <code>string</code> | Dash length of grid lines; '0' is solid (CSS `--wcc-grid-dash`). |
| `theme.tokens.motionDuration` | <code>string</code> | Animation duration in milliseconds (CSS `--wcc-motion-duration`). Preset default: '650'. |
| `theme.tokens.motionEasing` | <code>string</code> | Animation easing name (CSS `--wcc-motion-easing`). Preset default: 'easeOutCubic'. |
| `theme.tokens.palette` | <code>string[]</code> | Series colours (CSS `--wcc-palette` as a comma-separated list). |
| `theme.follow` | <code>'os' \| false</code> | 'os': follow prefers-color-scheme |
| `theme.name` | <code>string</code> | theme registered with registerTheme() |
| `theme.palette` | <code>string</code> | Name of the built-in palette ('palette1' ... 'palette10'). Default: `'palette1'`. |
| `theme.monochrome` | <code>object</code> | Derives all series colours from one base colour. |
| `theme.monochrome.enabled` | <code>boolean</code> | Turns monochrome colouring on. Default: `false`. |
| `theme.monochrome.color` | <code>string</code> | The base colour. Default: `'#008FFB'`. |
| `theme.monochrome.shadeTo` | <code>'light' \| 'dark'</code> | 'light' or 'dark': direction of the shades. Default: `'light'`. |
| `theme.monochrome.shadeIntensity` | <code>number</code> | How far the shades spread from the base colour (0 to 1). Default: `0.65`. |

## title

Chart title.

Type: `ApexTitleSubtitle`

| Option | Type | Description |
| --- | --- | --- |
| `title.text` | <code>string</code> | The text; not set draws nothing. |
| `title.align` | <code>'left' \| 'center' \| 'right'</code> | 'left', 'center' or 'right'. Default: `'left'`. |
| `title.margin` | <code>number</code> | Space in pixels below the text before the plot starts. Default: `5`. |
| `title.offsetX` | <code>number</code> | Moves the text horizontally. Default: `0`. |
| `title.offsetY` | <code>number</code> | Moves the text vertically. Default: `0` for `title`, `30` for `subtitle`. |
| `title.floating` | <code>boolean</code> | Takes the text out of the layout so the plot starts at the top. Default: `false`. |
| `title.style` | <code>object</code> | Text style. |
| `title.style.fontSize` | <code>string</code> | Font size. Default: `'14px'` for `title`, `'12px'` for `subtitle`. |
| `title.style.fontFamily` | <code>string</code> | Font family; not set uses `chart.fontFamily`. |
| `title.style.fontWeight` | <code>string \| number</code> | Font weight. Default: `900` for `title`, `400` for `subtitle`. |
| `title.style.color` | <code>string</code> | Text colour; not set uses `chart.foreColor`. |

## tooltip

The box shown when hovering data points.

Type: `ApexTooltip`

| Option | Type | Description |
| --- | --- | --- |
| `tooltip.enabled` | <code>boolean</code> | Shows the tooltip. Default: `true`. |
| `tooltip.enabledOnSeries` | <code>undefined \| number[]</code> | Indexes of the series that appear in the tooltip; not set means all series. |
| `tooltip.shared` | <code>boolean</code> | Shows all series at the hovered x position in one tooltip; false shows only the nearest series. Default: `true`. |
| `tooltip.followCursor` | <code>boolean</code> | Moves the tooltip with the pointer instead of anchoring it to the data point. Default: `false`. |
| `tooltip.intersect` | <code>boolean</code> | Shows the tooltip only while the pointer is over a marker or bar, not anywhere in its column. Default: `false`. |
| `tooltip.inverseOrder` | <code>boolean</code> | Lists the series in reverse order in a shared tooltip. Default: `false`. |
| `tooltip.custom` | <code>((options: any) =&gt; any) \| ((options: any) =&gt; any)[]</code> | Function (or one per series) returning the complete tooltip markup from `{ series, seriesIndex, dataPointIndex, w }`; the output goes through `chart.sanitizeHtml`. |
| `tooltip.fillSeriesColor` | <code>boolean</code> | Uses the hovered series colour as tooltip background. Default: `false`. |
| `tooltip.theme` | <code>string</code> | Colour scheme of the tooltip box: 'light' or 'dark'. Default: `'light'`. |
| `tooltip.cssClass` | <code>string</code> | CSS class added to the tooltip element. Default: `''`. |
| `tooltip.hideEmptySeries` | <code>boolean</code> | Leaves out series that have no value at the hovered position. Default: `false`. |
| `tooltip.style` | <code>object</code> | Text style of the tooltip. |
| `tooltip.style.fontSize` | <code>string</code> | Font size of the tooltip text. Default: `'12px'`. |
| `tooltip.style.fontFamily` | <code>string</code> | Font family of the tooltip text; not set uses `chart.fontFamily`. |
| `tooltip.onDatasetHover` | <code>object</code> | What hovering a data point does to the other series. |
| `tooltip.onDatasetHover.highlightDataSeries` | <code>boolean</code> | Dims the other series while a point is hovered. Default: `false`. |
| `tooltip.x` | <code>object</code> | The header row of the tooltip (the x value). |
| `tooltip.x.show` | <code>boolean</code> | Shows the header row. Default: `true`. |
| `tooltip.x.format` | <code>string</code> | Date format of the header on datetime axes. Default: `'dd MMM'`. |
| `tooltip.x.formatter()` | <code>(val: number, opts?: any): string</code> | Function that returns the header text from the x value. |
| `tooltip.y` | <code>ApexTooltipY</code> | Value rows of the tooltip; an array gives settings per series. |
| `tooltip.y.title` | <code>object</code> | Series name part of a tooltip row. |
| `tooltip.y.title.formatter()` | <code>(seriesName: string, opts?: any): string</code> | Function that returns the name text from the series name. The built-in one appends ': ' (and returns '' for an unnamed series). |
| `tooltip.y.formatter()` | <code>(val: number, opts?: any): string</code> | Function that returns the value text from the value and `{ series, seriesIndex, dataPointIndex, w }`. |
| `tooltip.y.title` | <code>object</code> | Series name part of a tooltip row. |
| `tooltip.y.title.formatter()` | <code>(seriesName: string, opts?: any): string</code> | Function that returns the name text from the series name. The built-in one appends ': ' (and returns '' for an unnamed series). |
| `tooltip.z` | <code>object</code> | Third value of bubble charts (bubble size). |
| `tooltip.z.title` | <code>string</code> | Text in front of the z value. Default: `'Size: '`. |
| `tooltip.z.formatter()` | <code>(val: number): string</code> | Function that returns the z text from the value. |
| `tooltip.marker` | <code>object</code> | The coloured dot in front of each tooltip row. |
| `tooltip.marker.show` | <code>boolean</code> | Shows the dot. Default: `true`. |
| `tooltip.marker.fillColors` | <code>string[]</code> | Dot colours; not set uses the series colours. |
| `tooltip.items` | <code>object</code> | Layout of the tooltip rows. |
| `tooltip.items.display` | <code>string</code> | CSS `display` value of each row ('flex' puts the dot and text side by side). Default: `'flex'`. |
| `tooltip.fixed` | <code>object</code> | Pins the tooltip to a corner of the plot instead of next to the data point. |
| `tooltip.fixed.enabled` | <code>boolean</code> | Enables the pinned position. Default: `false`. |
| `tooltip.fixed.position` | <code>string</code> | Corner: 'topLeft', 'topRight', 'bottomLeft' or 'bottomRight'. Default: `'topRight'`. |
| `tooltip.fixed.offsetX` | <code>number</code> | Moves the pinned tooltip horizontally. Default: `0`. |
| `tooltip.fixed.offsetY` | <code>number</code> | Moves the pinned tooltip vertically. Default: `0`. |

## xaxis

The horizontal axis (for horizontal bar charts: the value axis).

Type: `ApexXAxis`

| Option | Type | Description |
| --- | --- | --- |
| `xaxis.type` | <code>'category' \| 'datetime' \| 'numeric'</code> | How x values are read: 'category' (labels in order), 'numeric' (linear numbers) or 'datetime' (timestamps or date strings on a time scale). Default: `'category'`. |
| `xaxis.categories` | <code>any</code> | Labels of the x positions when the series data are plain values; for datetime axes these can be dates. Default: `[]`. |
| `xaxis.overwriteCategories` | <code>number[] \| string[] \| undefined</code> | Replaces the displayed x labels with these texts without changing the data or the scale. |
| `xaxis.offsetX` | <code>number</code> | Moves the x axis (labels, border, ticks) horizontally by this many pixels. Default: `0`. |
| `xaxis.offsetY` | <code>number</code> | Moves the x axis vertically by this many pixels. Default: `0`. |
| `xaxis.sorted` | <code>boolean</code> | Accepted for ApexCharts 4.x type compatibility; the renderer does not read it. |
| `xaxis.labels` | <code>object</code> | The text labels along the x axis. |
| `xaxis.labels.readability` | <code>WccReadability</code> | West Coast Charts: halo / pill / auto-contrast where labels overlap marks (features/readability) |
| `xaxis.labels.readability.mode` | <code>'none' \| 'halo' \| 'pill' \| 'auto' \| 'hide'</code> | 'auto' (default where on): nothing for labels off the marks, a contrasting text colour over one fill, a pill over mixed fills; 'hide' = skip labels that sit on marks |
| `xaxis.labels.readability.fallback` | <code>'pill' \| 'halo' \| 'hide'</code> | what 'auto' escalates to over mixed fills or when no text colour reaches minRatio. Default 'pill' |
| `xaxis.labels.readability.enabled` | <code>boolean</code> | false switches the treatment off for this label kind |
| `xaxis.labels.readability.contrast` | <code>boolean</code> | swap the text to `light`/`dark` when it misses minRatio against what is under it (any mode) |
| `xaxis.labels.readability.minRatio` | <code>number</code> | WCAG 2 contrast ratio to reach. Default 4.5 |
| `xaxis.labels.readability.light` | <code>string</code> | text/backdrop colour pair used by contrast and 'auto' fills. Defaults '#ffffff' / '#111827' |
| `xaxis.labels.readability.dark` | <code>string</code> | Dark colour of the pair. Default: `'#111827'`. |
| `xaxis.labels.readability.background` | <code>'auto' \| string</code> | colour under the chart; 'auto' = chart.background, else the first opaque ancestor |
| `xaxis.labels.readability.halo` | <code>object</code> | outline behind the glyphs; blur &gt; 0 makes it a soft glow. Defaults width 3, color 'auto' (chart background), opacity 0.92 |
| `xaxis.labels.readability.halo.width` | <code>number</code> | Outline width in pixels. Default: `3`. |
| `xaxis.labels.readability.halo.color` | <code>'auto' \| string</code> | Outline colour; 'auto' uses the colour under the label or a contrasting one. Default: `'auto'`. |
| `xaxis.labels.readability.halo.opacity` | <code>number</code> | Outline opacity (0 to 1). Default: `0.92`. |
| `xaxis.labels.readability.halo.blur` | <code>number</code> | Blur in pixels; above 0 the outline becomes a soft glow. Default: `0`. |
| `xaxis.labels.readability.pill` | <code>object</code> | backdrop box. padding = [vertical, horizontal]; offset = [dx, dy] px. Defaults fill 'auto', opacity 0.9, radius 4, padding [1, 4] |
| `xaxis.labels.readability.pill.fill` | <code>'auto' \| string</code> | Box colour; 'auto' uses the colour under the label or a contrasting one. Default: `'auto'`. |
| `xaxis.labels.readability.pill.opacity` | <code>number</code> | Box opacity (0 to 1). Default: `0.9`. |
| `xaxis.labels.readability.pill.radius` | <code>number</code> | Corner radius in pixels. Default: `4`. |
| `xaxis.labels.readability.pill.padding` | <code>number \| [number, number]</code> | Space around the text in pixels: one number, or [vertical, horizontal]. Default: `[1, 4]`. |
| `xaxis.labels.readability.pill.stroke` | <code>string</code> | Outline colour of the box. Default: `'none'`. |
| `xaxis.labels.readability.pill.strokeWidth` | <code>number</code> | Outline width in pixels. Default: `1`. |
| `xaxis.labels.readability.pill.offset` | <code>[number, number]</code> | Shift of the box as [dx, dy] in pixels. Default: `[0, 0]`. |
| `xaxis.labels.readability.shadow` | <code>object \| boolean</code> | drop shadow on the pill (on the text in halo mode) |
| `xaxis.labels.readability.shadow.dx` | <code>number</code> | Horizontal shadow offset in pixels. Default: `0`. |
| `xaxis.labels.readability.shadow.dy` | <code>number</code> | Vertical shadow offset in pixels. Default: `1`. |
| `xaxis.labels.readability.shadow.blur` | <code>number</code> | Shadow blur in pixels. Default: `2`. |
| `xaxis.labels.readability.shadow.color` | <code>string</code> | Shadow colour. Default: `'#000000'`. |
| `xaxis.labels.readability.shadow.opacity` | <code>number</code> | Shadow opacity (0 to 1). Default: `0.35`. |
| `xaxis.labels.readability.raise` | <code>boolean</code> | axis labels sitting on marks are moved above the series (default true) |
| `xaxis.labels.readability.each` | <code>(info: WccReadabilityInfo) =&gt; WccReadability \| null \| undefined</code> | per label: return an override (or 'none') for this one label; called only when set |
| `xaxis.labels.show` | <code>boolean</code> | Shows the x labels. Default: `true`. |
| `xaxis.labels.rotate` | <code>number</code> | Rotation in degrees applied when the labels would overlap (category axes). Default: `-45`. |
| `xaxis.labels.rotateAlways` | <code>boolean</code> | Rotates the labels even when they would fit. Default: `false`. |
| `xaxis.labels.hideOverlappingLabels` | <code>boolean</code> | Drops a label that would overlap the label drawn before it. Default: `true`. |
| `xaxis.labels.showDuplicates` | <code>boolean</code> | On datetime axes, false drops a label whose text repeats the previous label. Default: `true`. |
| `xaxis.labels.trim` | <code>boolean</code> | Cuts long labels to the available width and adds an ellipsis. Default: `false`. |
| `xaxis.labels.minHeight` | <code>number</code> | Minimum height in pixels reserved for the x labels. |
| `xaxis.labels.maxHeight` | <code>number</code> | Maximum height in pixels the (rotated) x labels may take; longer ones are cut. Default: `120`. |
| `xaxis.labels.style` | <code>object</code> | Text style of the x labels. |
| `xaxis.labels.style.colors` | <code>string \| string[]</code> | Label colour; an array gives one colour per label. Empty uses `chart.foreColor`. Default: `[]`. |
| `xaxis.labels.style.fontSize` | <code>string</code> | Font size of the labels. Default: `'12px'`. |
| `xaxis.labels.style.fontFamily` | <code>string</code> | Font family of the labels; not set uses `chart.fontFamily`. |
| `xaxis.labels.style.fontWeight` | <code>string \| number</code> | Font weight of the labels. Default: `400`. |
| `xaxis.labels.style.cssClass` | <code>string</code> | CSS class added to every label text element. Default: `''`. |
| `xaxis.labels.offsetX` | <code>number</code> | Moves the labels horizontally by this many pixels. Default: `0`. |
| `xaxis.labels.offsetY` | <code>number</code> | Moves the labels vertically by this many pixels. Default: `0`. |
| `xaxis.labels.format` | <code>string</code> | Date format string for datetime labels (for example 'dd MMM'); overrides `datetimeFormatter`. |
| `xaxis.labels.formatter()` | <code>(value: string, timestamp?: number, opts?: any): string \| string[]</code> | Function that returns the text of each label from its value (and timestamp on datetime axes). |
| `xaxis.labels.datetimeUTC` | <code>boolean</code> | Formats datetime labels in UTC; false uses the browser's local time zone. Default: `true`. |
| `xaxis.labels.datetimeFormatter` | <code>object</code> | Date format per tick unit, chosen from the span of the visible range. |
| `xaxis.labels.datetimeFormatter.year` | <code>string</code> | Format of ticks that fall on a new year. Default: `'yyyy'`. |
| `xaxis.labels.datetimeFormatter.month` | <code>string</code> | Format of ticks that fall on a new month. Default: `'MMM 'yy'`. |
| `xaxis.labels.datetimeFormatter.day` | <code>string</code> | Format of ticks that fall on a new day. Default: `'dd MMM'`. |
| `xaxis.labels.datetimeFormatter.hour` | <code>string</code> | Format of hour ticks. Default: `'HH:mm'`. |
| `xaxis.labels.datetimeFormatter.minute` | <code>string</code> | Format of minute ticks. Default: `'HH:mm:ss'`. |
| `xaxis.labels.datetimeFormatter.second` | <code>string</code> | Format of second ticks. Default: `'HH:mm:ss'`. |
| `xaxis.group` | <code>object</code> | A second row of labels under the x labels that spans groups of categories. |
| `xaxis.group.groups` | <code>object[]</code> | The groups, left to right. Default: `[]`. |
| `xaxis.group.groups[].title` | <code>string</code> | Text shown under the group. |
| `xaxis.group.groups[].cols` | <code>number</code> | Number of categories the group spans. |
| `xaxis.group.style` | <code>object</code> | Text style of the group labels. |
| `xaxis.group.style.colors` | <code>string \| string[]</code> | Colour of the group labels; an array gives one per group. Default: `[]`. |
| `xaxis.group.style.fontSize` | <code>string</code> | Font size of the group labels. Default: `'12px'`. |
| `xaxis.group.style.fontFamily` | <code>string</code> | Font family of the group labels. |
| `xaxis.group.style.fontWeight` | <code>string \| number</code> | Font weight of the group labels. Default: `400`. |
| `xaxis.group.style.cssClass` | <code>string</code> | CSS class added to the group label elements. Default: `''`. |
| `xaxis.axisBorder` | <code>object</code> | The line along the x axis. |
| `xaxis.axisBorder.show` | <code>boolean</code> | Draws the axis line. Default: `true`. |
| `xaxis.axisBorder.color` | <code>string</code> | Colour of the axis line. Default: `'#e0e0e0'`. |
| `xaxis.axisBorder.offsetX` | <code>number</code> | Moves the axis line horizontally. Default: `0`. |
| `xaxis.axisBorder.offsetY` | <code>number</code> | Moves the axis line vertically. Default: `0`. |
| `xaxis.axisBorder.strokeWidth` | <code>number</code> | Accepted for ApexCharts 4.x type compatibility; the renderer does not read it. |
| `xaxis.axisTicks` | <code>object</code> | Short tick marks below the axis line. |
| `xaxis.axisTicks.show` | <code>boolean</code> | Draws the tick marks. Default: `true`. |
| `xaxis.axisTicks.borderType` | <code>string</code> | Accepted for ApexCharts 4.x type compatibility; the renderer does not read it. |
| `xaxis.axisTicks.color` | <code>string</code> | Colour of the tick marks. Default: `'#e0e0e0'`. |
| `xaxis.axisTicks.height` | <code>number</code> | Length of the tick marks in pixels. Default: `6`. |
| `xaxis.axisTicks.offsetX` | <code>number</code> | Moves the tick marks horizontally. Default: `0`. |
| `xaxis.axisTicks.offsetY` | <code>number</code> | Moves the tick marks vertically. Default: `0`. |
| `xaxis.tickPlacement` | <code>string</code> | 'on' puts ticks and labels on the data points; 'between' puts the points between the ticks (the usual look for columns). Default: `'on'`. |
| `xaxis.tickAmount` | <code>number \| 'dataPoints'</code> | Number of intervals on a numeric axis; 'dataPoints' makes one tick per data point. |
| `xaxis.stepSize` | <code>number</code> | Distance between two ticks in axis units; used instead of `tickAmount`. |
| `xaxis.min` | <code>number</code> | Lowest x value shown; data below it are cut off. |
| `xaxis.max` | <code>number</code> | Highest x value shown; data above it are cut off. |
| `xaxis.range` | <code>number</code> | Width of the visible x window, ending at the newest value; useful for live data with appendData. |
| `xaxis.floating` | <code>boolean</code> | Takes the x axis out of the layout so the plot uses its height; the labels are drawn over the plot. Default: `false`. |
| `xaxis.decimalsInFloat` | <code>number</code> | Number of decimals in numeric x labels; not set picks a value from the range. |
| `xaxis.position` | <code>string</code> | 'bottom' or 'top' of the plot. Default: `'bottom'`. |
| `xaxis.title` | <code>object</code> | Title text of the x axis. |
| `xaxis.title.text` | <code>string</code> | The title text; not set draws no title. |
| `xaxis.title.offsetX` | <code>number</code> | Moves the title horizontally. Default: `0`. |
| `xaxis.title.offsetY` | <code>number</code> | Moves the title vertically. Default: `0`. |
| `xaxis.title.style` | <code>object</code> | Text style of the title. |
| `xaxis.title.style.color` | <code>string</code> | Title colour; not set uses `chart.foreColor`. |
| `xaxis.title.style.fontFamily` | <code>string</code> | Title font family. |
| `xaxis.title.style.fontWeight` | <code>string \| number</code> | Title font weight. Default: `900`. |
| `xaxis.title.style.fontSize` | <code>string</code> | Title font size. Default: `'12px'`. |
| `xaxis.title.style.cssClass` | <code>string</code> | CSS class added to the title element. Default: `''`. |
| `xaxis.crosshairs` | <code>object</code> | Vertical marker that follows the hovered x position. |
| `xaxis.crosshairs.show` | <code>boolean</code> | Shows the crosshair. Default: `true`. |
| `xaxis.crosshairs.width` | <code>number \| string</code> | 'tickWidth' spans one category, 'barWidth' matches the bar width, a number is pixels. Default: `1`. |
| `xaxis.crosshairs.position` | <code>string</code> | 'back' draws it behind the series, 'front' above them. Default: `'back'`. |
| `xaxis.crosshairs.opacity` | <code>number</code> | Opacity of the crosshair (0 to 1). Default: `0.9`. |
| `xaxis.crosshairs.stroke` | <code>object</code> | Line of a thin crosshair. |
| `xaxis.crosshairs.stroke.color` | <code>string</code> | Line colour. Default: `'#b6b6b6'`. |
| `xaxis.crosshairs.stroke.width` | <code>number</code> | Line width in pixels; 0 hides the line. Default: `1`. |
| `xaxis.crosshairs.stroke.dashArray` | <code>number</code> | Dash length in pixels; 0 draws a solid line. Default: `3`. |
| `xaxis.crosshairs.fill` | <code>object</code> | Fill of a wide crosshair (when `width` is more than one pixel). |
| `xaxis.crosshairs.fill.type` | <code>string</code> | 'solid' or 'gradient'. Default: `'solid'`. |
| `xaxis.crosshairs.fill.color` | <code>string</code> | Fill colour for type 'solid'. Default: `'#B1B9C4'`. |
| `xaxis.crosshairs.fill.gradient` | <code>object</code> | Gradient for type 'gradient'. |
| `xaxis.crosshairs.fill.gradient.colorFrom` | <code>string</code> | Colour at the start of the gradient. Default: `'#D8E3F0'`. |
| `xaxis.crosshairs.fill.gradient.colorTo` | <code>string</code> | Colour at the end of the gradient. Default: `'#BED1E6'`. |
| `xaxis.crosshairs.fill.gradient.stops` | <code>number[]</code> | Gradient stop positions in percent. Default: `[0,100]`. |
| `xaxis.crosshairs.fill.gradient.opacityFrom` | <code>number</code> | Opacity at the start of the gradient. Default: `0.4`. |
| `xaxis.crosshairs.fill.gradient.opacityTo` | <code>number</code> | Opacity at the end of the gradient. Default: `0.5`. |
| `xaxis.crosshairs.dropShadow` | <code>ApexDropShadow</code> | Shadow behind the crosshair. |
| `xaxis.crosshairs.dropShadow.enabled` | <code>boolean</code> | Draws the shadow. Default: `false`. |
| `xaxis.crosshairs.dropShadow.top` | <code>number</code> | Vertical shadow distance in pixels. Default: `2`. |
| `xaxis.crosshairs.dropShadow.left` | <code>number</code> | Horizontal shadow distance in pixels. Default: `2`. |
| `xaxis.crosshairs.dropShadow.blur` | <code>number</code> | Blur radius in pixels. Default: `4`. |
| `xaxis.crosshairs.dropShadow.opacity` | <code>number</code> | Shadow opacity (0 to 1). Default: `0.7`. |
| `xaxis.crosshairs.dropShadow.color` | <code>string</code> | Shadow colour. Default: `'#000'`. |
| `xaxis.tooltip` | <code>object</code> | Small box on the x axis that shows the hovered x value. |
| `xaxis.tooltip.enabled` | <code>boolean</code> | Shows the x-axis tooltip. Default: `true`. |
| `xaxis.tooltip.offsetY` | <code>number</code> | Moves the x-axis tooltip vertically. Default: `0`. |
| `xaxis.tooltip.formatter()` | <code>(value: string, opts?: object): string</code> | Function that returns the text of the x-axis tooltip from the x value. |
| `xaxis.tooltip.style` | <code>object</code> | Text style of the x-axis tooltip. |
| `xaxis.tooltip.style.fontSize` | <code>string</code> | Font size of the x-axis tooltip. Default: `'12px'`. |
| `xaxis.tooltip.style.fontFamily` | <code>string</code> | Font family of the x-axis tooltip. |

## yaxis

The vertical axis; an array defines several y axes.

Type: `ApexYAxis \| ApexYAxis[]`

| Option | Type | Description |
| --- | --- | --- |
| `yaxis.wcc` | <code>object</code> | West Coast Charts: y axis extras. |
| `yaxis.wcc.alignZero` | <code>boolean</code> | Puts zero on the same gridline on every axis that sets it. Default: `false`. |
| `yaxis.show` | <code>boolean</code> | Draws this y axis. Default: `true`. |
| `yaxis.showAlways` | <code>boolean</code> | Keeps the axis when all series bound to it are hidden through the legend. Default: `false`. |
| `yaxis.showForNullSeries` | <code>boolean</code> | Draws the axis even when all its series contain only null values. Default: `true`. |
| `yaxis.seriesName` | <code>string \| string[]</code> | Name (or names) of the series this axis belongs to; series without a match use the first axis. Used with several y axes. |
| `yaxis.opposite` | <code>boolean</code> | Puts the axis on the right side. Default: `false`. |
| `yaxis.reversed` | <code>boolean</code> | Turns the axis upside down (highest value at the bottom). Default: `false`. |
| `yaxis.logarithmic` | <code>boolean</code> | Uses a logarithmic scale. Default: `false`. |
| `yaxis.logBase` | <code>number</code> | Base of the logarithmic scale. Default: `10`. |
| `yaxis.tickAmount` | <code>number</code> | Number of intervals; not set picks a value from the chart height. |
| `yaxis.stepSize` | <code>number</code> | Distance between two ticks in axis units; used instead of `tickAmount`. |
| `yaxis.forceNiceScale` | <code>boolean</code> | Rounds min, max and step to round numbers even when min or max are given. Default: `false`. |
| `yaxis.min` | <code>number \| ((min: number) =&gt; number)</code> | Lowest value shown; a function receives the data minimum and returns the axis minimum. |
| `yaxis.max` | <code>number \| ((max: number) =&gt; number)</code> | Highest value shown; a function receives the data maximum and returns the axis maximum. |
| `yaxis.floating` | <code>boolean</code> | Takes the axis out of the layout so the plot uses its width; the labels are drawn over the plot. Default: `false`. |
| `yaxis.decimalsInFloat` | <code>number</code> | Number of decimals in the labels; not set picks a value from the range. |
| `yaxis.labels` | <code>object</code> | The value labels of the axis. The value labels of the axis. |
| `yaxis.labels.readability` | <code>WccReadability</code> | West Coast Charts: halo / pill / auto-contrast where labels overlap marks (features/readability) |
| `yaxis.labels.readability.mode` | <code>'none' \| 'halo' \| 'pill' \| 'auto' \| 'hide'</code> | 'auto' (default where on): nothing for labels off the marks, a contrasting text colour over one fill, a pill over mixed fills; 'hide' = skip labels that sit on marks |
| `yaxis.labels.readability.fallback` | <code>'pill' \| 'halo' \| 'hide'</code> | what 'auto' escalates to over mixed fills or when no text colour reaches minRatio. Default 'pill' |
| `yaxis.labels.readability.enabled` | <code>boolean</code> | false switches the treatment off for this label kind |
| `yaxis.labels.readability.contrast` | <code>boolean</code> | swap the text to `light`/`dark` when it misses minRatio against what is under it (any mode) |
| `yaxis.labels.readability.minRatio` | <code>number</code> | WCAG 2 contrast ratio to reach. Default 4.5 |
| `yaxis.labels.readability.light` | <code>string</code> | text/backdrop colour pair used by contrast and 'auto' fills. Defaults '#ffffff' / '#111827' |
| `yaxis.labels.readability.dark` | <code>string</code> | Dark colour of the pair. Default: `'#111827'`. |
| `yaxis.labels.readability.background` | <code>'auto' \| string</code> | colour under the chart; 'auto' = chart.background, else the first opaque ancestor |
| `yaxis.labels.readability.halo` | <code>object</code> | outline behind the glyphs; blur &gt; 0 makes it a soft glow. Defaults width 3, color 'auto' (chart background), opacity 0.92 |
| `yaxis.labels.readability.halo.width` | <code>number</code> | Outline width in pixels. Default: `3`. |
| `yaxis.labels.readability.halo.color` | <code>'auto' \| string</code> | Outline colour; 'auto' uses the colour under the label or a contrasting one. Default: `'auto'`. |
| `yaxis.labels.readability.halo.opacity` | <code>number</code> | Outline opacity (0 to 1). Default: `0.92`. |
| `yaxis.labels.readability.halo.blur` | <code>number</code> | Blur in pixels; above 0 the outline becomes a soft glow. Default: `0`. |
| `yaxis.labels.readability.pill` | <code>object</code> | backdrop box. padding = [vertical, horizontal]; offset = [dx, dy] px. Defaults fill 'auto', opacity 0.9, radius 4, padding [1, 4] |
| `yaxis.labels.readability.pill.fill` | <code>'auto' \| string</code> | Box colour; 'auto' uses the colour under the label or a contrasting one. Default: `'auto'`. |
| `yaxis.labels.readability.pill.opacity` | <code>number</code> | Box opacity (0 to 1). Default: `0.9`. |
| `yaxis.labels.readability.pill.radius` | <code>number</code> | Corner radius in pixels. Default: `4`. |
| `yaxis.labels.readability.pill.padding` | <code>number \| [number, number]</code> | Space around the text in pixels: one number, or [vertical, horizontal]. Default: `[1, 4]`. |
| `yaxis.labels.readability.pill.stroke` | <code>string</code> | Outline colour of the box. Default: `'none'`. |
| `yaxis.labels.readability.pill.strokeWidth` | <code>number</code> | Outline width in pixels. Default: `1`. |
| `yaxis.labels.readability.pill.offset` | <code>[number, number]</code> | Shift of the box as [dx, dy] in pixels. Default: `[0, 0]`. |
| `yaxis.labels.readability.shadow` | <code>object \| boolean</code> | drop shadow on the pill (on the text in halo mode) |
| `yaxis.labels.readability.shadow.dx` | <code>number</code> | Horizontal shadow offset in pixels. Default: `0`. |
| `yaxis.labels.readability.shadow.dy` | <code>number</code> | Vertical shadow offset in pixels. Default: `1`. |
| `yaxis.labels.readability.shadow.blur` | <code>number</code> | Shadow blur in pixels. Default: `2`. |
| `yaxis.labels.readability.shadow.color` | <code>string</code> | Shadow colour. Default: `'#000000'`. |
| `yaxis.labels.readability.shadow.opacity` | <code>number</code> | Shadow opacity (0 to 1). Default: `0.35`. |
| `yaxis.labels.readability.raise` | <code>boolean</code> | axis labels sitting on marks are moved above the series (default true) |
| `yaxis.labels.readability.each` | <code>(info: WccReadabilityInfo) =&gt; WccReadability \| null \| undefined</code> | per label: return an override (or 'none') for this one label; called only when set |
| `yaxis.labels.show` | <code>boolean</code> | Shows the labels. Default: `true`. |
| `yaxis.labels.showDuplicates` | <code>boolean</code> | Keeps labels that repeat the text of the previous one. Default: `false`. |
| `yaxis.labels.minWidth` | <code>number</code> | Minimum width in pixels reserved for the labels. Default: `0`. |
| `yaxis.labels.maxWidth` | <code>number</code> | Maximum width in pixels the labels may take; longer ones are cut. Default: `160`. |
| `yaxis.labels.offsetX` | <code>number</code> | Moves the labels horizontally. Default: `0`. |
| `yaxis.labels.offsetY` | <code>number</code> | Moves the labels vertically. Default: `0`. |
| `yaxis.labels.rotate` | <code>number</code> | Rotation of the labels in degrees. Default: `0`. |
| `yaxis.labels.align` | <code>'left' \| 'center' \| 'right'</code> | Horizontal alignment of the labels: 'left', 'center' or 'right'. |
| `yaxis.labels.padding` | <code>number</code> | Space in pixels between the labels and the plot. Default: `20`. |
| `yaxis.labels.style` | <code>object</code> | Text style of the labels. Text style of the labels. |
| `yaxis.labels.style.colors` | <code>string \| string[]</code> | Label colour; an array gives one colour per label. Empty uses `chart.foreColor`. Default: `[]`. |
| `yaxis.labels.style.fontSize` | <code>string</code> | Font size of the labels. Default: `'11px'`. |
| `yaxis.labels.style.fontWeight` | <code>string \| number</code> | Font weight of the labels. Default: `400`. |
| `yaxis.labels.style.fontFamily` | <code>string</code> | Font family of the labels; not set uses `chart.fontFamily`. |
| `yaxis.labels.style.cssClass` | <code>string</code> | CSS class added to every label element. Default: `''`. |
| `yaxis.labels.style.colors` | <code>string \| string[]</code> | Label colour; an array gives one colour per label. Empty uses `chart.foreColor`. Default: `[]`. |
| `yaxis.labels.formatter()` | <code>(val: number, opts?: any): string \| string[]</code> | Function that returns the label text from the value. |
| `yaxis.labels.readability` | <code>WccReadability</code> | West Coast Charts: halo / pill / auto-contrast where labels overlap marks (features/readability) |
| `yaxis.labels.readability.mode` | <code>'none' \| 'halo' \| 'pill' \| 'auto' \| 'hide'</code> | 'auto' (default where on): nothing for labels off the marks, a contrasting text colour over one fill, a pill over mixed fills; 'hide' = skip labels that sit on marks |
| `yaxis.labels.readability.fallback` | <code>'pill' \| 'halo' \| 'hide'</code> | what 'auto' escalates to over mixed fills or when no text colour reaches minRatio. Default 'pill' |
| `yaxis.labels.readability.enabled` | <code>boolean</code> | false switches the treatment off for this label kind |
| `yaxis.labels.readability.contrast` | <code>boolean</code> | swap the text to `light`/`dark` when it misses minRatio against what is under it (any mode) |
| `yaxis.labels.readability.minRatio` | <code>number</code> | WCAG 2 contrast ratio to reach. Default 4.5 |
| `yaxis.labels.readability.light` | <code>string</code> | text/backdrop colour pair used by contrast and 'auto' fills. Defaults '#ffffff' / '#111827' |
| `yaxis.labels.readability.dark` | <code>string</code> | Dark colour of the pair. Default: `'#111827'`. |
| `yaxis.labels.readability.background` | <code>'auto' \| string</code> | colour under the chart; 'auto' = chart.background, else the first opaque ancestor |
| `yaxis.labels.readability.halo` | <code>object</code> | outline behind the glyphs; blur &gt; 0 makes it a soft glow. Defaults width 3, color 'auto' (chart background), opacity 0.92 |
| `yaxis.labels.readability.halo.width` | <code>number</code> | Outline width in pixels. Default: `3`. |
| `yaxis.labels.readability.halo.color` | <code>'auto' \| string</code> | Outline colour; 'auto' uses the colour under the label or a contrasting one. Default: `'auto'`. |
| `yaxis.labels.readability.halo.opacity` | <code>number</code> | Outline opacity (0 to 1). Default: `0.92`. |
| `yaxis.labels.readability.halo.blur` | <code>number</code> | Blur in pixels; above 0 the outline becomes a soft glow. Default: `0`. |
| `yaxis.labels.readability.pill` | <code>object</code> | backdrop box. padding = [vertical, horizontal]; offset = [dx, dy] px. Defaults fill 'auto', opacity 0.9, radius 4, padding [1, 4] |
| `yaxis.labels.readability.pill.fill` | <code>'auto' \| string</code> | Box colour; 'auto' uses the colour under the label or a contrasting one. Default: `'auto'`. |
| `yaxis.labels.readability.pill.opacity` | <code>number</code> | Box opacity (0 to 1). Default: `0.9`. |
| `yaxis.labels.readability.pill.radius` | <code>number</code> | Corner radius in pixels. Default: `4`. |
| `yaxis.labels.readability.pill.padding` | <code>number \| [number, number]</code> | Space around the text in pixels: one number, or [vertical, horizontal]. Default: `[1, 4]`. |
| `yaxis.labels.readability.pill.stroke` | <code>string</code> | Outline colour of the box. Default: `'none'`. |
| `yaxis.labels.readability.pill.strokeWidth` | <code>number</code> | Outline width in pixels. Default: `1`. |
| `yaxis.labels.readability.pill.offset` | <code>[number, number]</code> | Shift of the box as [dx, dy] in pixels. Default: `[0, 0]`. |
| `yaxis.labels.readability.shadow` | <code>object \| boolean</code> | drop shadow on the pill (on the text in halo mode) |
| `yaxis.labels.readability.shadow.dx` | <code>number</code> | Horizontal shadow offset in pixels. Default: `0`. |
| `yaxis.labels.readability.shadow.dy` | <code>number</code> | Vertical shadow offset in pixels. Default: `1`. |
| `yaxis.labels.readability.shadow.blur` | <code>number</code> | Shadow blur in pixels. Default: `2`. |
| `yaxis.labels.readability.shadow.color` | <code>string</code> | Shadow colour. Default: `'#000000'`. |
| `yaxis.labels.readability.shadow.opacity` | <code>number</code> | Shadow opacity (0 to 1). Default: `0.35`. |
| `yaxis.labels.readability.raise` | <code>boolean</code> | axis labels sitting on marks are moved above the series (default true) |
| `yaxis.labels.readability.each` | <code>(info: WccReadabilityInfo) =&gt; WccReadability \| null \| undefined</code> | per label: return an override (or 'none') for this one label; called only when set |
| `yaxis.axisBorder` | <code>object</code> | The vertical axis line. The vertical axis line. |
| `yaxis.axisBorder.show` | <code>boolean</code> | Draws the axis line. Default: `false`. |
| `yaxis.axisBorder.color` | <code>string</code> | Colour of the axis line. Default: `'#e0e0e0'`. |
| `yaxis.axisBorder.width` | <code>number</code> | Width of the axis line in pixels. Default: `1`. |
| `yaxis.axisBorder.offsetX` | <code>number</code> | Moves the axis line horizontally. Default: `0`. |
| `yaxis.axisBorder.offsetY` | <code>number</code> | Moves the axis line vertically. Default: `0`. |
| `yaxis.axisBorder.show` | <code>boolean</code> | Draws the axis line. Default: `false`. |
| `yaxis.axisTicks` | <code>object</code> | Short tick marks next to the axis line. Short tick marks next to the axis line. |
| `yaxis.axisTicks.show` | <code>boolean</code> | Draws the tick marks. Default: `false`. |
| `yaxis.axisTicks.color` | <code>string</code> | Colour of the tick marks. Default: `'#e0e0e0'`. |
| `yaxis.axisTicks.width` | <code>number</code> | Length of the tick marks in pixels. Default: `6`. |
| `yaxis.axisTicks.offsetX` | <code>number</code> | Moves the tick marks horizontally. Default: `0`. |
| `yaxis.axisTicks.offsetY` | <code>number</code> | Moves the tick marks vertically. Default: `0`. |
| `yaxis.axisTicks.show` | <code>boolean</code> | Draws the tick marks. Default: `false`. |
| `yaxis.title` | <code>object</code> | Title text of the axis. Title text of the axis. |
| `yaxis.title.text` | <code>string</code> | The title text; not set draws no title. |
| `yaxis.title.rotate` | <code>number</code> | Rotation of the title in degrees. Default: `-90`. |
| `yaxis.title.offsetX` | <code>number</code> | Moves the title horizontally. Default: `0`. |
| `yaxis.title.offsetY` | <code>number</code> | Moves the title vertically. Default: `0`. |
| `yaxis.title.style` | <code>object</code> | Text style of the title. Text style of the title. |
| `yaxis.title.style.color` | <code>string</code> | Title colour; not set uses `chart.foreColor`. |
| `yaxis.title.style.fontSize` | <code>string</code> | Title font size. Default: `'11px'`. |
| `yaxis.title.style.fontWeight` | <code>string \| number</code> | Title font weight. Default: `900`. |
| `yaxis.title.style.fontFamily` | <code>string</code> | Title font family. |
| `yaxis.title.style.cssClass` | <code>string</code> | CSS class added to the title element. Default: `''`. |
| `yaxis.title.style.color` | <code>string</code> | Title colour; not set uses `chart.foreColor`. |
| `yaxis.title.text` | <code>string</code> | The title text; not set draws no title. |
| `yaxis.crosshairs` | <code>object</code> | Horizontal line that follows the hovered value. Horizontal line that follows the hovered value. |
| `yaxis.crosshairs.show` | <code>boolean</code> | Shows the y crosshair. Default: `true`. |
| `yaxis.crosshairs.position` | <code>string</code> | 'front' draws it above the series, 'back' behind them. Default: `'front'`. |
| `yaxis.crosshairs.stroke` | <code>object</code> | Line of the y crosshair. Line of the y crosshair. |
| `yaxis.crosshairs.stroke.color` | <code>string</code> | Line colour. Default: `'#b6b6b6'`. |
| `yaxis.crosshairs.stroke.width` | <code>number</code> | Line width in pixels. Default: `1`. |
| `yaxis.crosshairs.stroke.dashArray` | <code>number</code> | Dash length in pixels; 0 draws a solid line. Default: `0`. |
| `yaxis.crosshairs.stroke.color` | <code>string</code> | Line colour. Default: `'#b6b6b6'`. |
| `yaxis.crosshairs.show` | <code>boolean</code> | Shows the y crosshair. Default: `true`. |
| `yaxis.tooltip` | <code>object</code> | Small box on the y axis that shows the hovered value. Small box on the y axis that shows the hovered value. |
| `yaxis.tooltip.enabled` | <code>boolean</code> | Shows the y-axis tooltip. Default: `false`. |
| `yaxis.tooltip.offsetX` | <code>number</code> | Moves the y-axis tooltip horizontally. Default: `0`. |
| `yaxis.tooltip.enabled` | <code>boolean</code> | Shows the y-axis tooltip. Default: `false`. |
| `yaxis.wcc` | <code>object</code> | West Coast Charts: y axis extras. |
| `yaxis.wcc.alignZero` | <code>boolean</code> | Puts zero on the same gridline on every axis that sets it. Default: `false`. |

## wcc

West Coast Charts extensions

Type: `WccOptions & { narrative?: WccNarrativeOptions }`

| Option | Type | Description |
| --- | --- | --- |
| `wcc.a11y` | <code>object</code> | Accessibility extras: the data table and custom strings. |
| `wcc.a11y.dataTable` | <code>boolean \| 'hidden' \| 'details'</code> | 'hidden' (default): screen-reader table; true \| 'details': visible disclosure; false: none |
| `wcc.a11y.dataTableMaxRows` | <code>number</code> | Maximum number of rows in the data table. Default: `500`. |
| `wcc.a11y.strings` | <code>object</code> | override any announcement / description string |
| `wcc.performance` | <code>object</code> | large-data rendering, see docs/architecture/performance.md |
| `wcc.performance.decimate` | <code>boolean</code> | M4 decimation of plain line/area paths; pixel-identical, default true |
| `wcc.performance.denseMarks` | <code>boolean \| 'auto'</code> | one union path per series for columns / scatter points; default 'auto' |
| `wcc.performance.denseThreshold` | <code>number</code> | point count from which denseMarks applies; default 2000 |
| `wcc.narrative` | <code>WccNarrativeOptions</code> | Settings of the narrative (guided tour) feature. |
| `wcc.narrative.enabled` | <code>boolean</code> | Turns on the narrative player. Default: `false`. |
| `wcc.narrative.source` | <code>'frames' \| 'record'</code> | `'frames'` replays the supplied frames; `'record'` records the chart's own data updates. Default: `'frames'`. |
| `wcc.narrative.frames` | <code>object[]</code> | Frames to replay with `source: 'frames'`. Default: `[]`. |
| `wcc.narrative.frames[].t` | <code>any</code> | Time or key of the frame, usable with `seek({ t })`. |
| `wcc.narrative.frames[].series` | <code>any[]</code> | Series of the frame, in the chart's series format. |
| `wcc.narrative.frames[].label` | <code>string</code> | Frame label, shown as the watermark. |
| `wcc.narrative.frames[].caption` | <code>string</code> | Caption shown and announced when the frame is reached. |
| `wcc.narrative.frames[].options` | <code>object</code> | Options applied when the frame is reached (`updateOptions` patch). |
| `wcc.narrative.frames[].annotations` | <code>object</code> | Annotations shown while the frame is current. |
| `wcc.narrative.maxFrames` | <code>number</code> | Ring-buffer size of `source: 'record'`; older frames are dropped. Default: `600`. |
| `wcc.narrative.interpolate` | <code>boolean</code> | Draws in-between values while scrubbing between frames. Default: `true`. |
| `wcc.narrative.keyBy` | <code>'x' \| ((point: any) =&gt; any) \| null</code> | Point identity across frames (`'x'` or a function); also used as the morph key of updates unless the app sets one. Default: `null` (by index). |
| `wcc.narrative.frameDuration` | <code>number</code> | Time per frame during playback, in milliseconds. Default: `800`. |
| `wcc.narrative.loop` | <code>boolean</code> | Restarts from the first frame after the last. Default: `false`. |
| `wcc.narrative.autoplay` | <code>boolean</code> | Starts playback on mount, unless reduced motion is preferred. Default: `false`. |
| `wcc.narrative.transport` | <code>boolean</code> | Draws the transport bar (play, scrubber, live). Default: `true`. |
| `wcc.narrative.watermark` | <code>'auto' \| 'label' \| false \| ((frame: any, index: number) =&gt; string)</code> | Large background text of the current frame: `'auto'` (frame label for frames, off for record), `'label'`, `false` or a function. Default: `'auto'`. |
| `wcc.narrative.captions` | <code>boolean</code> | Shows frame captions. Default: `true`. |
| `wcc.narrative.liveBehaviour` | <code>'buffer' \| 'follow'</code> | New recorded data while viewing an older frame: `'buffer'` stays on that frame behind a Live button, `'follow'` jumps to the newest. Default: `'buffer'`. |

## drilldown

drilldown feature

Type: `WccDrilldownOptions`

| Option | Type | Description |
| --- | --- | --- |
| `drilldown.enabled` | <code>boolean</code> | Turns drilldown on: points with a level id open that level on click or Enter. Ignored by sunburst and icicle, which read the whole tree themselves. Default: `false`. |
| `drilldown.series` | <code>object[]</code> | Inline drilldown levels; each has an `id` that points reference and the data to show. |
| `drilldown.series[].id` | <code>string</code> | Id of the level, referenced by the `drilldown` field of a point. |
| `drilldown.series[].name` | <code>string</code> | Name of the level, shown in the breadcrumb; not set uses the id. |
| `drilldown.series[].type` | <code>string</code> | Chart type of the level; not set keeps the parent's type. |
| `drilldown.series[].data` | <code>any[]</code> | Data of the level, in the format of its chart type. |
| `drilldown.animation` | <code>object</code> | Transition between levels. |
| `drilldown.animation.enabled` | <code>boolean</code> | Animates level changes; `false` switches instantly. Reduced-motion settings also switch instantly or fade. Default: `true`. |
| `drilldown.animation.zoomFromPoint` | <code>boolean</code> | With transition `'auto'`, zooms the new level out of the clicked point. Default: `false`. |
| `drilldown.animation.speed` | <code>number</code> | Duration of the level transition in milliseconds. Default: `260`. |
| `drilldown.onDrillDown` | <code>(point: any, info: any) =&gt; any</code> | called before a level opens; may return the level (or a Promise of it) to load on demand |
| `drilldown.cache` | <code>boolean</code> | Keeps levels returned by `onDrillDown`, so revisiting a level does not call it again. Default: `true`. |
| `drilldown.breadcrumb` | <code>object \| false</code> | Breadcrumb trail of the open levels; `false` hides it. |
| `drilldown.breadcrumb.rootLabel` | <code>string</code> | Text of the first breadcrumb; not set uses the name of a single root series, else the locale string `drilldown.root`. |
| `drilldown.wcc` | <code>object</code> | West Coast Charts drilldown extensions. |
| `drilldown.wcc.transition` | <code>string</code> | Level transition: `'auto'` (morph when type and point count match, otherwise dissolve), `'morph'`, `'dissolve'`, `'zoom'` or `'none'`. Default: `'auto'`. |
| `drilldown.wcc.hint` | <code>boolean \| string</code> | Shows the drill hint on hover over drillable points and adds it to their accessible labels. Default: `true`. |
| `drilldown.wcc.keepZoom` | <code>boolean</code> | Restores the zoom window of a level when going back up to it. Default: `false`. |
| `drilldown.wcc.prefetch` | <code>boolean</code> | Calls `onDrillDown` shortly after a drillable point is hovered or focused, so the level is ready on click. Default: `false`. |
| `drilldown.wcc.deepLink` | <code>boolean \| string</code> | Writes the open path to the URL hash (`#wcc=...`) and restores it on load; an app-owned hash is left alone. Default: `false`. |
| `drilldown.wcc.syncGroup` | <code>boolean \| string</code> | Follows drilldown navigation of other charts in the same `chart.group` that have the same levels. Default: `false`. |

## highlightFilter

highlight-filter feature

Type: `WccHighlightFilterOptions`

| Option | Type | Description |
| --- | --- | --- |
| `highlightFilter.enabled` | <code>boolean</code> | Draws the filtered part of each mark over its whole when parts are given. Default: `true`. |
| `highlightFilter.data` | <code>(number \| null)[]</code> | pie/donut/polarArea/radialBar: the filtered part of every slice |
| `highlightFilter.fadeOpacity` | <code>number</code> | Opacity of the whole behind its part. Default: `0.2`. |
| `highlightFilter.outline` | <code>object</code> | Outline of the faded whole. |
| `highlightFilter.outline.width` | <code>number</code> | Outline width in pixels. Default: `1`. |
| `highlightFilter.outline.opacity` | <code>number</code> | Outline opacity. Default: `1`. |
| `highlightFilter.enter` | <code>'whole' \| string</code> | Where parts animate from: `'whole'` (the whole's extent) or `'baseline'`. Default: `'whole'`. |
| `highlightFilter.axis` | <code>'extend' \| string</code> | A part larger than its whole: `'extend'` grows the value axis and hatches the overflow, `'clamp'` cuts it at the whole. 100% stacks and treemaps always clamp. Default: `'extend'`. |
| `highlightFilter.dataLabels` | <code>object</code> | Which value the data labels show. |
| `highlightFilter.dataLabels.value` | <code>'part' \| 'whole' \| string</code> | `'part'` or `'whole'` value in the point labels. Default: `'part'`. |
| `highlightFilter.dataLabels.total` | <code>'part' \| 'whole' \| string</code> | `'part'` or `'whole'` value in stack total labels. Default: `'part'`. |
| `highlightFilter.tooltip` | <code>object</code> | Part line in the tooltip. |
| `highlightFilter.tooltip.show` | <code>boolean</code> | Adds the part to the tooltip. Default: `true`. |
| `highlightFilter.tooltip.share` | <code>boolean</code> | Adds the part's percentage of the whole. Default: `false`. |
| `highlightFilter.tooltip.formatter` | <code>(part: number, whole: number, opts: any) =&gt; string</code> | Returns the tooltip text of the part from `(part, whole, opts)`. |
| `highlightFilter.line` | <code>object</code> | Line and area charts. |
| `highlightFilter.line.dashArray` | <code>number</code> | Dash length of the whole line behind the part line. Default: `4`. |
| `highlightFilter.pie` | <code>object</code> | Pie, donut and polar-area charts. |
| `highlightFilter.pie.encoding` | <code>'radius' \| string</code> | How a slice shows its part: `'radius'` scales the radius with the share, `'area'` scales the area. Default: `'radius'`. |
| `highlightFilter.wcc` | <code>object</code> | West Coast Charts highlight-filter extensions. |
| `highlightFilter.wcc.csv` | <code>'whole' \| 'both'</code> | CSV export: `'whole'` exports the wholes, `'both'` adds a "&lt;series&gt; (part)" column per series. Default: `'whole'`. |
| `highlightFilter.wcc.combo` | <code>boolean</code> | `false` draws combo charts without parts. Default: `true`. |
| `highlightFilter.wcc.pattern` | <code>'auto' \| boolean</code> | Bars whose part exceeds the whole (`axis: 'extend'`): `'auto'` or `true` hatch the overflow, `false` keeps it solid; the dashed edge marks the whole either way. Default: `'auto'`. |
| `highlightFilter.wcc.stagger` | <code>number</code> | Delay of each series' part animation, multiplied by the series index, in milliseconds. Default: `0`. |
| `highlightFilter.wcc.labelShare` | <code>boolean</code> | Adds the part's percentage to the data labels. Default: `false`. |
| `highlightFilter.wcc.streamingParts` | <code>boolean</code> | With `appendData`, extends parts set through the API with the data (new points have no part) instead of dropping them. Default: `true`. |
| `highlightFilter.wcc.wholeLabels` | <code>'auto' \| boolean</code> | Labels of the wholes: `'auto'` on non-stacked bars with data labels on, `true` forces them on non-stacked bars, `false` turns them off. Default: `'auto'`. |
| `highlightFilter.wcc.key` | <code>object</code> | Encoding key above the plot that explains whole and part. |
| `highlightFilter.wcc.key.show` | <code>'auto' \| boolean</code> | `'auto'` shows the key when all series are lines or areas. Default: `'auto'`. |
| `highlightFilter.wcc.key.whole` | <code>string</code> | Key text of the whole; not set uses the locale string `highlight.keyWhole`. |
| `highlightFilter.wcc.key.part` | <code>string</code> | Key text of the part; not set uses the locale string `highlight.keyPart`. |

## trellis

trellis feature (small multiples)

Type: `WccTrellisOptions`

| Option | Type | Description |
| --- | --- | --- |
| `trellis.by` | <code>string \| ((series: any) =&gt; any)</code> | Splits the series into one panel per value of this field (or function result). Ignored when `row` or `column` is set. |
| `trellis.row` | <code>string \| ((series: any) =&gt; any)</code> | Field (or function) whose values form the rows of a 2-D grid. |
| `trellis.panel` | <code>(key: any, ctx: { index: number, seriesNames: string[] }) =&gt; { [key: string]: any } \| null \| undefined</code> | Per-panel option overrides: called with the panel key and `{ index, seriesNames }`, returns options merged over the host options (grid-owned paths and a different `chart.type` are ignored). |
| `trellis.column` | <code>string \| ((series: any) =&gt; any)</code> | Field (or function) whose values form the columns of a 2-D grid. |
| `trellis.emptyPanels` | <code>'placeholder' \| 'skip' \| 'hide'</code> | Empty cells of a 2-D grid: `'placeholder'` draws an empty panel, `'skip'` and `'hide'` leave them out. Default: `'placeholder'`. |
| `trellis.data` | <code>any[]</code> | Tidy rows to facet instead of `series`; `x`, `y` and `seriesBy` name their fields. |
| `trellis.x` | <code>string</code> | Field of `data` with the x value. Default: `'x'`. |
| `trellis.y` | <code>string</code> | Field of `data` with the y value. Default: `'y'`. |
| `trellis.seriesBy` | <code>string</code> | Field of `data` that names the series within a panel. |
| `trellis.columns` | <code>'auto' \| number</code> | Number of panel columns; `'auto'` fits as many as `minPanelWidth` allows. Default: `'auto'`. |
| `trellis.minPanelWidth` | <code>number</code> | Smallest panel width in pixels for `columns: 'auto'`. Default: `220`. |
| `trellis.gap` | <code>number</code> | Space between panels in pixels. Default: `12`. |
| `trellis.aspectRatio` | <code>number</code> | Panel width divided by height, used when `panelHeight` is not set. Default: `1.6`. |
| `trellis.panelHeight` | <code>number</code> | Fixed panel height in pixels; not set derives it from `aspectRatio`. |
| `trellis.minPanelHeight` | <code>number</code> | Smallest panel height in pixels. Default: `80`. |
| `trellis.order` | <code>'first-seen' \| 'asc' \| 'desc' \| any[] \| ((a: any, b: any) =&gt; number)</code> | Panel order: `'first-seen'`, `'asc'`, `'desc'`, an array of keys or a comparator. Default: `'first-seen'`. |
| `trellis.limit` | <code>number</code> | Draws only the first N panels and warns; not set draws all. |
| `trellis.virtualize` | <code>'auto' \| boolean</code> | Renders only panels near the viewport; `'auto'` turns it on above 64 panels. Default: `'auto'`. |
| `trellis.scales` | <code>object</code> | Which scales the panels share. |
| `trellis.scales.x` | <code>'shared' \| 'independent' \| string</code> | `'shared'` or `'independent'` x axis per panel. Default: `'shared'`. |
| `trellis.scales.y` | <code>'shared' \| 'independent' \| 'independent-row' \| 'independent-column' \| string</code> | `'shared'`, `'independent'`, `'independent-row'` or `'independent-column'` y axis. Default: `'shared'`. |
| `trellis.scales.color` | <code>'shared' \| string</code> | Colour scale; always shared (other values warn and fall back). Default: `'shared'`. |
| `trellis.scales.size` | <code>'shared' \| string</code> | Size scale; always shared (other values warn and fall back). Default: `'shared'`. |
| `trellis.header` | <code>object</code> | Panel headers. |
| `trellis.header.show` | <code>boolean</code> | Draws a header with the facet value above each panel. Default: `true`. |
| `trellis.header.formatter` | <code>(key: any, info: { dimension: string; index: number; count: number }) =&gt; string</code> | Returns the header text from the facet key and `{ dimension, index, count }`. |
| `trellis.header.style` | <code>object</code> | Text style of the headers; not set uses the theme. |
| `trellis.header.style.fontSize` | <code>string \| number</code> | Font size of the headers. |
| `trellis.header.style.fontWeight` | <code>string \| number</code> | Font weight of the headers. |
| `trellis.header.style.color` | <code>WccColor</code> | Text colour of the headers. |
| `trellis.axes` | <code>object</code> | Axis labels across panels. |
| `trellis.axes.labels` | <code>'edges' \| 'all' \| 'none'</code> | `'edges'` labels y on the first column and x on the bottom panel of each column; `'all'` labels every panel; `'none'` hides them. Default: `'edges'`. |
| `trellis.legend` | <code>'shared' \| string \| boolean</code> | `'shared'` draws one legend for all panels; `'none'` hides it. Default: `'shared'`. |
| `trellis.toolbar` | <code>'shared' \| string \| boolean</code> | `'shared'` draws one toolbar for all panels; `'none'` hides it. Default: `'shared'`. |
| `trellis.wcc` | <code>object</code> | West Coast Charts trellis extensions (sort, headerValue and virtualization need trellis-extras). |
| `trellis.wcc.headerValue` | <code>'last' \| 'total' \| 'max' \| 'min' \| WccCallback</code> | Metric shown in each header: `'last'`, `'total'`, `'max'`, `'min'` or a function; not set shows none. |
| `trellis.wcc.sort` | <code>object \| 'desc' \| 'asc'</code> | Sorts 1-D panels by a metric: `'desc'`, `'asc'` or `{ by, dir }`; the metric is `by`, else `headerValue`, else `'total'`. |
| `trellis.wcc.sort.by` | <code>any</code> | Metric to sort by (as in `headerValue`). |
| `trellis.wcc.sort.dir` | <code>'asc' \| 'desc'</code> | Sort direction. Default: `'desc'`. |
| `trellis.wcc.sparkline` | <code>boolean</code> | Draws the panels as sparklines, at most 96 px high. Default: `false`. |
| `trellis.wcc.typeMix` | <code>boolean</code> | Allows different cartesian chart types per panel. Default: `false`. |
| `trellis.wcc.highlight` | <code>boolean</code> | Hovering or focusing a legend item highlights that series in every panel. Default: `true`. |