Download Core

Options reference

Every option with type, default and description, generated from the shipped type declarations.

View .md Agent setup

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

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

Type: ApexAnnotations

Option Type Description
annotations.yaxis YAxisAnnotations[] Horizontal lines or bands at y values.
annotations.yaxis[].scope string | number | Array<string | number> | ((key: any) => boolean) trellis: panel key(s) or a function of the key; the annotation is drawn only on matching panels.
annotations.yaxis[].wcc object West Coast Charts: annotation extras.
annotations.yaxis[].wcc.tooltip string | ((annotation: any) => string) Tooltip text shown on hover and focus, or a function of the annotation.
annotations.yaxis[].id number | string Identifier added as a CSS class to the drawn elements; also the key for removing the annotation later.
annotations.yaxis[].y null | number | string Value on the y axis where the line is drawn. Default: 0.
annotations.yaxis[].y2 null | number | string 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 number Dash length of the line; 0 draws it solid. Default: 1.
annotations.yaxis[].fillColor string Fill colour of the band (used with y2). Default: '#c2c2c2'.
annotations.yaxis[].borderColor string Colour of the line, or the band outline. Default: '#c2c2c2'.
annotations.yaxis[].borderWidth number Line width in pixels. Default: 1.
annotations.yaxis[].opacity number Opacity of the band fill (0 to 1). Default: 0.3.
annotations.yaxis[].offsetX number Horizontal shift in pixels; it also extends the line width. Default: 0.
annotations.yaxis[].offsetY number Vertical shift of the line or band in pixels. Default: 0.
annotations.yaxis[].width number | string Length of the line: a percentage of the plot width or a pixel value. Default: '100%'.
annotations.yaxis[].yAxisIndex number Index of the y axis whose scale positions the annotation. Default: 0.
annotations.yaxis[].label AnnotationLabel Text label attached to the annotation.
annotations.yaxis[].label.borderColor string Border colour of the label box. Default: '#c2c2c2'.
annotations.yaxis[].label.borderWidth number Border width of the label box in pixels. Default: 1.
annotations.yaxis[].label.borderRadius number Corner radius of the label box in pixels. Default: 2.
annotations.yaxis[].label.text string | string[] Label text; without text no label is drawn.
annotations.yaxis[].label.textAnchor string Horizontal anchor of the text: 'start', 'middle' or 'end'. Default: 'middle' on x-axis annotations, 'end' on y-axis annotations.
annotations.yaxis[].label.offsetX number Horizontal shift of the label in pixels. Default: 0.
annotations.yaxis[].label.offsetY number Vertical shift of the label in pixels. Default: 0.
annotations.yaxis[].label.style AnnotationStyle Text and box style of the label.
annotations.yaxis[].label.style.background string Fill colour of the label box. Default: '#fff'.
annotations.yaxis[].label.style.color string Text colour of the label.
annotations.yaxis[].label.style.fontFamily string Font family of the label; not set uses the chart font.
annotations.yaxis[].label.style.fontWeight string | number Font weight of the label. Default: 400.
annotations.yaxis[].label.style.fontSize string Font size of the label. Default: '11px'.
annotations.yaxis[].label.style.cssClass string Extra CSS class added to the label text. Default: ''.
annotations.yaxis[].label.style.padding object Space between the text and the box edge, in pixels.
annotations.yaxis[].label.style.padding.left number Left padding in pixels. Default: 5.
annotations.yaxis[].label.style.padding.right number Right padding in pixels. Default: 5.
annotations.yaxis[].label.style.padding.top number Top padding in pixels. Default: 2.
annotations.yaxis[].label.style.padding.bottom number Bottom padding in pixels. Default: 2.
annotations.yaxis[].label.position string 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 string 'vertical' rotates an x-axis annotation label along the line; 'horizontal' keeps it level. Default: 'vertical'.
annotations.yaxis[].label.mouseEnter Function Called with the annotation object when the pointer enters the label.
annotations.yaxis[].label.mouseLeave Function Called with the annotation object when the pointer leaves the label.
annotations.yaxis[].label.click Function Called with the annotation object when the label is clicked.
annotations.xaxis XAxisAnnotations[] Vertical lines or bands at x values.
annotations.xaxis[].scope string | number | Array<string | number> | ((key: any) => boolean) trellis: panel key(s) or a function of the key; the annotation is drawn only on matching panels.
annotations.xaxis[].wcc object West Coast Charts: annotation extras.
annotations.xaxis[].wcc.tooltip string | ((annotation: any) => string) Tooltip text shown on hover and focus, or a function of the annotation.
annotations.xaxis[].id number | string Identifier added as a CSS class to the drawn elements; also the key for removing the annotation later.
annotations.xaxis[].x null | number | string Position on the x axis: a category, number or timestamp matching xaxis.type. Default: 0.
annotations.xaxis[].x2 null | number | string 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 number Dash length of the line; 0 draws it solid. Default: 1.
annotations.xaxis[].fillColor string Fill colour of the band (used with x2). Default: '#c2c2c2'.
annotations.xaxis[].borderColor string Colour of the line, or the band outline. Default: '#c2c2c2'.
annotations.xaxis[].borderWidth number Line width in pixels. Default: 1.
annotations.xaxis[].opacity number Opacity of the band fill (0 to 1). Default: 0.3.
annotations.xaxis[].offsetX number Horizontal shift of the line or band in pixels. Default: 0.
annotations.xaxis[].offsetY number Vertical shift of the line or band in pixels. Default: 0.
annotations.xaxis[].label AnnotationLabel Text label attached to the annotation.
annotations.xaxis[].label.borderColor string Border colour of the label box. Default: '#c2c2c2'.
annotations.xaxis[].label.borderWidth number Border width of the label box in pixels. Default: 1.
annotations.xaxis[].label.borderRadius number Corner radius of the label box in pixels. Default: 2.
annotations.xaxis[].label.text string | string[] Label text; without text no label is drawn.
annotations.xaxis[].label.textAnchor string Horizontal anchor of the text: 'start', 'middle' or 'end'. Default: 'middle' on x-axis annotations, 'end' on y-axis annotations.
annotations.xaxis[].label.offsetX number Horizontal shift of the label in pixels. Default: 0.
annotations.xaxis[].label.offsetY number Vertical shift of the label in pixels. Default: 0.
annotations.xaxis[].label.style AnnotationStyle Text and box style of the label.
annotations.xaxis[].label.style.background string Fill colour of the label box. Default: '#fff'.
annotations.xaxis[].label.style.color string Text colour of the label.
annotations.xaxis[].label.style.fontFamily string Font family of the label; not set uses the chart font.
annotations.xaxis[].label.style.fontWeight string | number Font weight of the label. Default: 400.
annotations.xaxis[].label.style.fontSize string Font size of the label. Default: '11px'.
annotations.xaxis[].label.style.cssClass string Extra CSS class added to the label text. Default: ''.
annotations.xaxis[].label.style.padding object Space between the text and the box edge, in pixels.
annotations.xaxis[].label.style.padding.left number Left padding in pixels. Default: 5.
annotations.xaxis[].label.style.padding.right number Right padding in pixels. Default: 5.
annotations.xaxis[].label.style.padding.top number Top padding in pixels. Default: 2.
annotations.xaxis[].label.style.padding.bottom number Bottom padding in pixels. Default: 2.
annotations.xaxis[].label.position string 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 string 'vertical' rotates an x-axis annotation label along the line; 'horizontal' keeps it level. Default: 'vertical'.
annotations.xaxis[].label.mouseEnter Function Called with the annotation object when the pointer enters the label.
annotations.xaxis[].label.mouseLeave Function Called with the annotation object when the pointer leaves the label.
annotations.xaxis[].label.click Function Called with the annotation object when the label is clicked.
annotations.points PointAnnotations[] Markers, labels or images at single (x, y) data positions.
annotations.points[].scope string | number | Array<string | number> | ((key: any) => boolean) trellis: panel key(s) or a function of the key; the annotation is drawn only on matching panels.
annotations.points[].wcc object West Coast Charts: annotation extras.
annotations.points[].wcc.tooltip string | ((annotation: any) => string) Tooltip text shown on hover and focus, or a function of the annotation.
annotations.points[].id number | string Identifier added as a CSS class to the marker and label; also the key for removing the annotation later.
annotations.points[].x number | string X position of the point: a category, number or timestamp matching xaxis.type. Default: 0.
annotations.points[].y null | number Y value of the point. Default: null.
annotations.points[].yAxisIndex number Index of the y axis whose scale positions the point. Default: 0.
annotations.points[].seriesIndex number Series the point belongs to; on horizontal bar charts it moves the point onto that series' bar.
annotations.points[].mouseEnter Function Called with the annotation object when the pointer enters the marker.
annotations.points[].mouseLeave Function Called with the annotation object when the pointer leaves the marker.
annotations.points[].click Function Called with the annotation object when the marker is clicked.
annotations.points[].marker object Marker drawn at the point.
annotations.points[].marker.size number Marker radius in pixels; 0 hides the marker. Default: 4.
annotations.points[].marker.fillColor string Fill colour of the marker. Default: '#fff'.
annotations.points[].marker.strokeColor string Outline colour of the marker. Default: '#333'.
annotations.points[].marker.strokeWidth number Outline width of the marker in pixels. Default: 2.
annotations.points[].marker.shape string Marker shape, as in markers.shape. Default: 'circle'.
annotations.points[].marker.offsetX number Horizontal shift of the marker in pixels. Default: 0.
annotations.points[].marker.offsetY number Vertical shift of the marker in pixels. Default: 0.
annotations.points[].marker.cssClass string Extra CSS class added to the marker. Default: ''.
annotations.points[].label AnnotationLabel Text label attached to the point.
annotations.points[].label.borderColor string Border colour of the label box. Default: '#c2c2c2'.
annotations.points[].label.borderWidth number Border width of the label box in pixels. Default: 1.
annotations.points[].label.borderRadius number Corner radius of the label box in pixels. Default: 2.
annotations.points[].label.text string | string[] Label text; without text no label is drawn.
annotations.points[].label.textAnchor string Horizontal anchor of the text: 'start', 'middle' or 'end'. Default: 'middle' on x-axis annotations, 'end' on y-axis annotations.
annotations.points[].label.offsetX number Horizontal shift of the label in pixels. Default: 0.
annotations.points[].label.offsetY number Vertical shift of the label in pixels. Default: 0.
annotations.points[].label.style AnnotationStyle Text and box style of the label.
annotations.points[].label.style.background string Fill colour of the label box. Default: '#fff'.
annotations.points[].label.style.color string Text colour of the label.
annotations.points[].label.style.fontFamily string Font family of the label; not set uses the chart font.
annotations.points[].label.style.fontWeight string | number Font weight of the label. Default: 400.
annotations.points[].label.style.fontSize string Font size of the label. Default: '11px'.
annotations.points[].label.style.cssClass string Extra CSS class added to the label text. Default: ''.
annotations.points[].label.style.padding object Space between the text and the box edge, in pixels.
annotations.points[].label.style.padding.left number Left padding in pixels. Default: 5.
annotations.points[].label.style.padding.right number Right padding in pixels. Default: 5.
annotations.points[].label.style.padding.top number Top padding in pixels. Default: 2.
annotations.points[].label.style.padding.bottom number Bottom padding in pixels. Default: 2.
annotations.points[].label.position string 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 string 'vertical' rotates an x-axis annotation label along the line; 'horizontal' keeps it level. Default: 'vertical'.
annotations.points[].label.mouseEnter Function Called with the annotation object when the pointer enters the label.
annotations.points[].label.mouseLeave Function Called with the annotation object when the pointer leaves the label.
annotations.points[].label.click Function Called with the annotation object when the label is clicked.
annotations.points[].image object Image drawn at the point.
annotations.points[].image.path string Image URL: http(s), a relative path or a data:image URI; other schemes are dropped.
annotations.points[].image.width number Image width in pixels. Default: 20.
annotations.points[].image.height number Image height in pixels. Default: 20.
annotations.points[].image.offsetX number Horizontal shift of the image in pixels. Default: 0.
annotations.points[].image.offsetY number Vertical shift of the image in pixels. Default: 0.
annotations.texts TextAnnotations[] Free text placed at pixel positions inside the chart SVG. Default: [].
annotations.texts[].x number Horizontal position in pixels from the left of the chart SVG. Default: 0.
annotations.texts[].y number Vertical position in pixels from the top of the chart SVG. Default: 0.
annotations.texts[].text string The text to draw. Default: ''.
annotations.texts[].textAnchor string Horizontal anchor of the text at x: 'start', 'middle' or 'end'. Default: 'start'.
annotations.texts[].foreColor string Text colour; not set uses the chart text colour.
annotations.texts[].fontSize string | number Font size of the text. Default: '13px'.
annotations.texts[].fontFamily undefined | string Font family; not set uses the chart font.
annotations.texts[].fontWeight string | number Font weight of the text. Default: 400.
annotations.texts[].backgroundColor string Fill colour of the box behind the text. Default: 'transparent'.
annotations.texts[].borderColor string Border colour of the box. Default: '#c2c2c2'.
annotations.texts[].borderRadius number Corner radius of the box in pixels. Default: 0.
annotations.texts[].borderWidth number Border width of the box in pixels; 0 draws no border. Default: 0.
annotations.texts[].paddingLeft number Left padding of the box in pixels. Default: 4.
annotations.texts[].paddingRight number Right padding of the box in pixels. Default: 4.
annotations.texts[].paddingTop number Top padding of the box in pixels. Default: 2.
annotations.texts[].paddingBottom number Bottom padding of the box in pixels. Default: 2.
annotations.images ImageAnnotations[] Images placed at pixel positions inside the chart SVG. Default: [].
annotations.images[].path string Image URL: http(s), a relative path or a data:image URI; other schemes are dropped.
annotations.images[].x number Horizontal position in pixels from the left of the chart SVG. Default: 0.
annotations.images[].y number Vertical position in pixels from the top of the chart SVG. Default: 0.
annotations.images[].width number Image width in pixels. Default: 20.
annotations.images[].height number 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 string West Coast Charts premium: licence key of this chart (overrides WestCoastCharts.setLicenseKey)
chart.readability WccReadability West Coast Charts: default readability of every label kind (dataLabels, axis labels, premium scales)
chart.readability.mode 'none' | 'halo' | 'pill' | 'auto' | 'hide' '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 'pill' | 'halo' | 'hide' what 'auto' escalates to over mixed fills or when no text colour reaches minRatio. Default 'pill'
chart.readability.enabled boolean false switches the treatment off for this label kind
chart.readability.contrast boolean swap the text to light/dark when it misses minRatio against what is under it (any mode)
chart.readability.minRatio number WCAG 2 contrast ratio to reach. Default 4.5
chart.readability.light string text/backdrop colour pair used by contrast and 'auto' fills. Defaults '#ffffff' / '#111827'
chart.readability.dark string Dark colour of the pair. Default: '#111827'.
chart.readability.background 'auto' | string colour under the chart; 'auto' = chart.background, else the first opaque ancestor
chart.readability.halo object outline behind the glyphs; blur > 0 makes it a soft glow. Defaults width 3, color 'auto' (chart background), opacity 0.92
chart.readability.halo.width number Outline width in pixels. Default: 3.
chart.readability.halo.color 'auto' | string Outline colour; 'auto' uses the colour under the label or a contrasting one. Default: 'auto'.
chart.readability.halo.opacity number Outline opacity (0 to 1). Default: 0.92.
chart.readability.halo.blur number Blur in pixels; above 0 the outline becomes a soft glow. Default: 0.
chart.readability.pill object backdrop box. padding = [vertical, horizontal]; offset = [dx, dy] px. Defaults fill 'auto', opacity 0.9, radius 4, padding [1, 4]
chart.readability.pill.fill 'auto' | string Box colour; 'auto' uses the colour under the label or a contrasting one. Default: 'auto'.
chart.readability.pill.opacity number Box opacity (0 to 1). Default: 0.9.
chart.readability.pill.radius number Corner radius in pixels. Default: 4.
chart.readability.pill.padding number | [number, number] Space around the text in pixels: one number, or [vertical, horizontal]. Default: [1, 4].
chart.readability.pill.stroke string Outline colour of the box. Default: 'none'.
chart.readability.pill.strokeWidth number Outline width in pixels. Default: 1.
chart.readability.pill.offset [number, number] Shift of the box as [dx, dy] in pixels. Default: [0, 0].
chart.readability.shadow object | boolean drop shadow on the pill (on the text in halo mode)
chart.readability.shadow.dx number Horizontal shadow offset in pixels. Default: 0.
chart.readability.shadow.dy number Vertical shadow offset in pixels. Default: 1.
chart.readability.shadow.blur number Shadow blur in pixels. Default: 2.
chart.readability.shadow.color string Shadow colour. Default: '#000000'.
chart.readability.shadow.opacity number Shadow opacity (0 to 1). Default: 0.35.
chart.readability.raise boolean axis labels sitting on marks are moved above the series (default true)
chart.readability.each (info: WccReadabilityInfo) => WccReadability | null | undefined per label: return an override (or 'none') for this one label; called only when set
chart.accessibility WccChartAccessibility West Coast Charts: WCAG 2.2 AA features (all on by default)
chart.accessibility.enabled boolean false switches off the description, keyboard access and announcements. Default: true.
chart.accessibility.description string Text of the chart description for screen readers; not set generates one from the chart type and data.
chart.accessibility.announcements object Live-region announcements for screen readers.
chart.accessibility.announcements.enabled boolean Announces the focused point and zoom, pan and reset changes in a live region when true. Default: true.
chart.accessibility.keyboard object Keyboard access to the chart.
chart.accessibility.keyboard.enabled boolean Makes the chart SVG focusable (tabindex 0) and keyboard operable. Default: true.
chart.accessibility.keyboard.navigation object Arrow-key navigation between data points.
chart.accessibility.keyboard.navigation.enabled boolean Lets the arrow keys move between points. Default: true.
chart.accessibility.keyboard.navigation.wrapAround boolean Moving past the last point continues at the first (and back). Default: false.
chart.width string | number Chart width: a number is pixels, a string is any CSS length such as a percentage of the container. Default: '100%'.
chart.height string | number 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 | 'line' | 'area' | 'bar' | 'pie' | 'donut' | 'radialBar' | 'scatter' | 'bubble' | 'heatmap' | 'candlestick' | 'boxPlot' | 'radar' | 'polarArea' | 'rangeBar'… 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 string Text colour used for axis labels, titles and legend text unless their own colour option is set. Default: '#373d3f'.
chart.fontFamily string Font family applied to all chart text that has no own fontFamily. Default: 'Helvetica, Arial, sans-serif'.
chart.background string Background colour of the chart area; an empty string leaves it transparent. Default: ''.
chart.offsetX number Moves the whole drawing horizontally by this many pixels. Default: 0.
chart.offsetY number Moves the whole drawing vertically by this many pixels. Default: 0.
chart.dropShadow ApexDropShadow Shadow drawn behind series paths (lines, areas, bars).
chart.dropShadow.enabled boolean Draws the shadow. Default: false.
chart.dropShadow.top number Vertical shadow distance in pixels. Default: 2.
chart.dropShadow.left number Horizontal shadow distance in pixels. Default: 2.
chart.dropShadow.blur number Blur radius in pixels. Default: 4.
chart.dropShadow.opacity number Shadow opacity (0 to 1). Default: 0.7.
chart.dropShadow.color string Shadow colour. Default: '#000'.
chart.dropShadow.enabledOnSeries undefined | number[] Indexes of the series that get the shadow; not set means all series.
chart.nonce string 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 | boolean | ((html: string, opts: { svg: boolean }) => string | Node) 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 'legacy' | 'standard' Premium/feature convention: legacy (default) retains family signatures; standard uses (eventOrNull, chart, payload). Core lifecycle callbacks are unchanged.
chart.events object 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() (chart: any, options?: any): void Called once the initial (or update) animation of the series has finished.
chart.events.beforeMount() (chart: any, options?: any): void Called after the options are processed and before the SVG is put into the page.
chart.events.mounted() (chart: any, options?: any): void Called after the first render is in the page.
chart.events.updated() (chart: any, options?: any): void Called after each re-render caused by updateOptions, updateSeries, appendData, a resize and similar.
chart.events.mouseMove() (e: any, chart?: any, options?: any): void Called on mouse movement over the plot area with the pointer event and the hovered series and data indexes.
chart.events.mouseLeave() (e: any, chart?: any, options?: any): void Called when the pointer leaves the plot area.
chart.events.click() (e: any, chart?: any, options?: any): void Called on a click anywhere in the chart, with the hovered series and data indexes when there is one.
chart.events.xAxisLabelClick() (e: any, chart?: any, options?: any): void Called when an x-axis label is clicked, with the label index.
chart.events.legendClick() (chart: any, seriesIndex?: number, options?: any): void Called when a legend entry is clicked, with the series index; runs before the default show/hide toggle.
chart.events.markerClick() (e: any, chart?: any, options?: any): void Called when a point marker is clicked, with the series and data indexes.
chart.events.selection() (chart: any, options?: any): void Called while a selection range is drawn or moved, with the selected x (and y) range.
chart.events.dataPointSelection() (e: any, chart?: any, options?: any): void Called when a data point (bar, slice, marker) is clicked and becomes selected or unselected.
chart.events.dataPointMouseEnter() (e: any, chart?: any, options?: any): void Called when the pointer enters a data point shape.
chart.events.dataPointMouseLeave() (e: any, chart?: any, options?: any): void Called when the pointer leaves a data point shape.
chart.events.beforeZoom() (chart: any, options?: any): void 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() (chart: any, options?: any): void Called before the zoom is reset; return { xaxis: { min, max } } to reset to a different range.
chart.events.zoomed() (chart: any, options?: any): void Called after a zoom (selection zoom, zoom buttons, wheel or reset), with the new x and y ranges.
chart.events.scrolled() (chart: any, options?: any): void Called while the chart is panned, with the new x range.
chart.events.brushScrolled() (chart: any, options?: any): void Called on a brush chart when its selection moves the target chart, with the new range.
chart.events.keyDown() (e: KeyboardEvent, chart?: any, options?: any): void West Coast Charts: key pressed / released while the chart has focus
chart.events.keyUp() (e: KeyboardEvent, chart?: any, options?: any): void Called on keyup while the chart has keyboard focus, with the keyboard event.
chart.brush object Turns this chart into a navigator for other charts: its selection sets their x range.
chart.brush.enabled boolean Enables the brush behaviour. When chart.events.selection is your own function, the targets are not wired up automatically. Default: false.
chart.brush.autoScaleYaxis boolean Rescales the target chart's y axis to the data inside the brushed range. Default: true.
chart.brush.target string chart.id of the single chart this brush controls.
chart.brush.targets string[] chart.ids of several charts this brush controls; used instead of target.
chart.id string Name of the chart, used by ApexCharts.exec, brush targets and as the default download file name.
chart.group string Charts with the same group share tooltip and crosshair position and zoom/pan; each needs its own chart.id.
chart.locales ApexLocale[] Locale definitions available to this chart (names of months and days, toolbar texts).
chart.locales[].name string Locale name, selected with chart.defaultLocale or setLocale().
chart.locales[].options object Translated strings of the locale.
chart.locales[].options.months string[] Full month names, January first; used by datetime labels and formats.
chart.locales[].options.shortMonths string[] Abbreviated month names, January first.
chart.locales[].options.days string[] Full weekday names, Sunday first.
chart.locales[].options.shortDays string[] Abbreviated weekday names, Sunday first.
chart.locales[].options.toolbar object Titles of the toolbar buttons and export menu items.
chart.locales[].options.toolbar.selection string Title of the selection button. English: 'Selection'.
chart.locales[].options.toolbar.selectionZoom string Title of the selection-zoom button. English: 'Selection Zoom'.
chart.locales[].options.toolbar.zoomIn string Title of the zoom-in button. English: 'Zoom In'.
chart.locales[].options.toolbar.zoomOut string Title of the zoom-out button. English: 'Zoom Out'.
chart.locales[].options.toolbar.pan string Title of the pan button. English: 'Panning'.
chart.locales[].options.toolbar.reset string Title of the reset-zoom button.
chart.locales[].options.toolbar.exportToSVG string Label of the SVG export menu item. English: 'Download SVG'.
chart.locales[].options.toolbar.exportToPNG string Label of the PNG export menu item. English: 'Download PNG'.
chart.locales[].options.toolbar.exportToCSV string Label of the CSV export menu item. English: 'Download CSV'.
chart.defaultLocale string name of the locale (from chart.locales or the registered ones) that is used. Default: 'en'.
chart.parentHeightOffset number Extra pixels added below the SVG in the wrapper's minimum height for axis charts with a pixel height. Default: 15.
chart.redrawOnParentResize boolean Re-renders the chart when its container changes size (observed with ResizeObserver). Default: true.
chart.redrawOnWindowResize boolean | Function Re-renders on window resize; a function is called on each resize and its return value decides. Default: true.
chart.sparkline object Minimal mode for small inline charts: hides axes, grid, legend and labels and removes the padding.
chart.sparkline.enabled boolean Enables sparkline mode. Default: false.
chart.stacked boolean Stacks the series of bar, column and area charts on top of each other. Default: false.
chart.stackType 'normal' | '100%' 'normal' adds the values; '100%' scales every stack to 100 percent. Default: 'normal'.
chart.stackOnlyBar boolean In combined charts, stack only the bar/column series and draw the others unstacked. Default: true.
chart.toolbar object The tool buttons and download menu in the top right corner.
chart.toolbar.show boolean Shows the toolbar. Default: true.
chart.toolbar.offsetX number Moves the toolbar horizontally by this many pixels. Default: 0.
chart.toolbar.offsetY number Moves the toolbar vertically by this many pixels. Default: 0.
chart.toolbar.tools object 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 boolean | string Download menu (SVG, PNG, CSV). Default: true.
chart.toolbar.tools.selection boolean | string Button for the selection (brush) tool. Default: true.
chart.toolbar.tools.zoom boolean | string Button for drag-to-zoom. Default: true.
chart.toolbar.tools.zoomin boolean | string Zoom-in button. Default: true.
chart.toolbar.tools.zoomout boolean | string Zoom-out button. Default: true.
chart.toolbar.tools.pan boolean | string Button for the pan tool. Default: true.
chart.toolbar.tools.reset boolean | string Button that resets zoom and pan to the original range. Default: true.
chart.toolbar.tools.customIcons object[] Extra buttons added to the toolbar. Default: [].
chart.toolbar.tools.customIcons[].icon string Markup (usually SVG) of the button.
chart.toolbar.tools.customIcons[].title string Tooltip text and accessible name of the button.
chart.toolbar.tools.customIcons[].index number Position among the toolbar buttons (0-based); without an index the button is appended.
chart.toolbar.tools.customIcons[].class string CSS class added to the button.
chart.toolbar.tools.customIcons[].click() (chart?: any, options?: any, e?: any): any Called when the button is pressed, with the chart, its options and the event.
chart.toolbar.export object Settings for the downloads offered in the toolbar menu.
chart.toolbar.export.csv object CSV download settings.
chart.toolbar.export.csv.filename undefined | string File name without extension; not set uses chart.id or a generated id.
chart.toolbar.export.csv.columnDelimiter string Separator written between columns. Default: ','.
chart.toolbar.export.csv.headerCategory string Header of the category / x column. Default: 'category'.
chart.toolbar.export.csv.headerValue string Header of the value column for charts without axes (pie, donut, radialBar ...). Default: 'value'.
chart.toolbar.export.csv.categoryFormatter() (value?: number): any Function that turns each x value into the text written in the CSV.
chart.toolbar.export.csv.valueFormatter() (value?: number): any Function that turns each y value into the text written in the CSV.
chart.toolbar.export.svg object SVG download settings.
chart.toolbar.export.svg.filename undefined | string File name without extension; not set uses chart.id or a generated id.
chart.toolbar.export.png object PNG download settings.
chart.toolbar.export.png.filename undefined | string File name without extension; not set uses chart.id or a generated id.
chart.toolbar.export.width number Pixel width of the exported PNG; the scale factor is derived from it. Ignored when scale is set.
chart.toolbar.export.scale number Scale factor for the exported PNG (2 = twice the on-screen size).
chart.toolbar.autoSelected 'zoom' | 'selection' | 'pan' Tool that is active when the chart loads. Default: 'zoom'.
chart.zoom object Zooming of axis charts by dragging, buttons or the mouse wheel.
chart.zoom.enabled boolean Enables zooming. Default: true.
chart.zoom.type 'x' | 'y' | 'xy' Axis that is zoomed: 'x', 'y' or both ('xy'). Default: 'x'.
chart.zoom.autoScaleYaxis boolean After an x zoom, fits the y axis to the visible data. Default: false.
chart.zoom.allowMouseWheelZoom boolean Zooms with the mouse wheel while the pointer is over the plot. Default: true.
chart.zoom.zoomedArea object Look of the rectangle drawn while dragging a zoom area.
chart.zoom.zoomedArea.fill object Fill of the zoom rectangle.
chart.zoom.zoomedArea.fill.color string Fill colour of the zoom rectangle. Default: '#90CAF9'.
chart.zoom.zoomedArea.fill.opacity number Fill opacity of the zoom rectangle (0 to 1). Default: 0.4.
chart.zoom.zoomedArea.stroke object Border of the zoom rectangle.
chart.zoom.zoomedArea.stroke.color string Border colour of the zoom rectangle. Default: '#0D47A1'.
chart.zoom.zoomedArea.stroke.opacity number Border opacity of the zoom rectangle (0 to 1). Default: 0.4.
chart.zoom.zoomedArea.stroke.width number Border width of the zoom rectangle in pixels. Default: 1.
chart.selection object A draggable range on the plot; on a brush chart it controls the targets.
chart.selection.enabled boolean Enables the selection tool. Default: false.
chart.selection.type string Axis of the selection: 'x', 'y' or 'xy'. Default: 'x'.
chart.selection.fill object Fill of the selection rectangle.
chart.selection.fill.color string Fill colour of the selection rectangle. Default: '#24292e'.
chart.selection.fill.opacity number Fill opacity of the selection rectangle (0 to 1). Default: 0.1.
chart.selection.stroke object Border of the selection rectangle.
chart.selection.stroke.width number Border width in pixels. Default: 1.
chart.selection.stroke.color string Border colour. Default: '#24292e'.
chart.selection.stroke.opacity number Border opacity (0 to 1). Default: 0.4.
chart.selection.stroke.dashArray number Dash length of the border in pixels; 0 draws a solid line. Default: 3.
chart.selection.xaxis object Initial selected x range.
chart.selection.xaxis.min number Start of the initial selection (x value).
chart.selection.xaxis.max number End of the initial selection (x value).
chart.selection.yaxis object Initial selected y range (for 'y' / 'xy' selections).
chart.selection.yaxis.min number Lower end of the initial selection (y value).
chart.selection.yaxis.max number Upper end of the initial selection (y value).
chart.animations object Motion settings for the first render, data updates and resizes.
chart.animations.enabled boolean Master switch for all animations. Default: true.
chart.animations.respectReducedMotion boolean West Coast Charts: no motion when the OS asks for reduced motion (default true)
chart.animations.largeDatasetThreshold number West Coast Charts: above this many points (all series) path animations become a short fade; 0 = never. Default 2000
chart.animations.chartTypeMorph object West Coast Charts: tween between chart types on updateOptions({ chart: { type } }) (treemap / sunburst / icicle, violin / beeswarm)
chart.animations.chartTypeMorph.enabled boolean Set to false so a type switch draws the new type without the tween. Default: true.
chart.animations.chartTypeMorph.speed number Duration of the type tween in milliseconds. Default: 600.
chart.animations.easing | 'linear' | 'easein' | 'easeout' | 'easeinout' | 'easeOutQuad' | 'easeOutCubic' | 'easeOutQuint' | 'easeInOutCubic' | string | [number, number, number, numb… West Coast Charts: easing curve name or function
chart.animations.speed number Duration of the first-render animation in milliseconds. Default: 800.
chart.animations.animateGradually object Starts the series (and points) one after another instead of all at once.
chart.animations.animateGradually.enabled boolean Enables the staggered start. Default: true.
chart.animations.animateGradually.delay number Delay between two consecutive items in milliseconds. Default: 150.
chart.animations.dynamicAnimation object Animation of data changes (updateSeries, updateOptions, appendData).
chart.animations.dynamicAnimation.enabled boolean Animates data changes from the old to the new values. Default: true.
chart.animations.dynamicAnimation.easing string | [number, number, number, number] | ((t: number) => number) West Coast Charts: easing for data-change animations
chart.animations.dynamicAnimation.speed number Duration of a data-change animation in milliseconds. Default: 350.
chart.animations.dynamicAnimation.matchBy 'index' | 'x' | ((point: any, seriesIndex: number, dataIndex: number) => string | number) 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 object 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 boolean Animates the redraw after a resize. Default: false.
chart.animations.resize.speed number Duration of the resize animation in milliseconds. Default: 300.
chart.renderer 'svg' | 'canvas' | 'auto' renderer-canvas feature
chart.rendererThreshold number total points from which renderer 'auto' paints on canvas
chart.wcc object West Coast Charts chart-level extensions.
chart.wcc.canvas object Canvas renderer tuning.
chart.wcc.canvas.pixelRatio 'device' | number Backing-store scale; 'device' uses the device pixel ratio capped at 2, a number forces it. Default: 'device'.
chart.wcc.canvas.cellCap number Most scatter cells handed to the SVG layer as hover and tooltip proxy. Default: 20000.
chart.wcc.canvas.settleMs number Time after the last pan or zoom input before the full update (tooltips, zoomed events), in milliseconds. Default: 140.
chart.wcc.canvas.axisStride number 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 WccLinkOptions Linked charts (highlight or crossfilter mode).
chart.link.id string | number 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 string Not read by the link feature; use id (or chart.group). Kept for type compatibility.
chart.link.dimension (record: any) => string | number | [any, any] | any[] | null 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 'category' | 'range' | 'matrix' | 'path' Kind of dimension; not set is 'range' when bins is set, 'matrix' on heatmaps, 'path' on sankey, else 'category'.
chart.link.reduce object | 'count' | ((records: any[]) => number) 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 string | WccCallback Field summed over the bucket.
chart.link.reduce.avg string | WccCallback Field averaged over the bucket.
chart.link.reduce.min string | WccCallback Field whose minimum is taken over the bucket.
chart.link.reduce.max string | WccCallback Field whose maximum is taken over the bucket.
chart.link.bins object Binning of a range dimension; makes the chart brushable.
chart.link.bins.width number Width of a bin in dimension units.
chart.link.bins.count number Number of bins.
chart.link.order 'first-seen' | 'asc' | 'desc' | 'value-asc' | 'value-desc' | ((a: any, b: any) => number) 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 string Name of the series injected from the aggregate. Default: 'Count'.
chart.link.dimOpacity number Opacity of marks outside the selection. Default: 0.2.
chart.link.wcc object West Coast Charts link extensions.
chart.link.wcc.label string Name of this chart's filter in the summary and announcements; not set uses title.text or the chart id.
chart.link.wcc.selectMode 'toggle' | 'single' | 'additive-shift' Click behaviour: 'toggle' adds or removes a bucket, 'single' keeps one bucket, 'additive-shift' adds only with Shift. Default: 'toggle'.
chart.link.wcc.summary boolean | string | Element 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 'show' | 'hide' 'hide' drops buckets left empty by other filters (selected ones stay). Default: 'show'.
chart.link.wcc.display 'filtered' | 'parts' 'parts' keeps the unfiltered totals as data and draws the filtered aggregate as the highlight part. Default: 'filtered'.
chart.link.wcc.throttle 'frame' | 'end' | number Live brush updates: 'frame' once per animation frame, 'end' only on release, or a minimum interval in milliseconds. Default: 'frame'.
chart.link.wcc.centre boolean Linked donuts: false leaves the centre label alone instead of showing the selection. Default: true.
chart.link.wcc.centreLabel string Donut centre label while the chart has no selection of its own; not set uses the locale string link.total.
chart.link.wcc.heatScale boolean Linked heatmaps: false keeps the default heatmap shading instead of the link colour scale. Default: true.
chart.history WccHistoryOptions Undo and redo of view changes.
chart.history.enabled boolean Records view changes (zoom, pan, legend toggles, selection, drilldown, filters) for undo and redo. Default: false.
chart.history.maxDepth number Most entries kept; older ones are dropped. Default: 100.
chart.history.coalesceMs number changes closer than this many ms become one entry
chart.history.keyboard boolean 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 object West Coast Charts history extensions.
chart.history.wcc.toolbar boolean Adds undo and redo buttons to the toolbar. Default: false.
chart.history.wcc.recordData boolean Also records data updates; alias chart.wcc.history.recordData. Default: false.
chart.orient WccOrientOptions | boolean Orient feature ("Ansicht ausrichten"): turn radialColumn (with all its layers), chord, pie, donut, polarArea and radialBar charts; true = { enabled: true }.
chart.orient.enabled boolean 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 number 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 boolean Rotate-left, rotate-right and reset buttons (the toolbar, or a small bar of their own). Default: true.
chart.orient.keyboard boolean [ / ] turn by one step, Home resets a turned chart, Shift+Enter turns the focused item to target. Default: true.
chart.orient.pick boolean Double-click a segment (or Shift+Enter on a focused one) to turn it to target. Default: true.
chart.orient.step 'auto' | number 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 boolean rotateBy(degrees) moves by whole segments. Default: true.
chart.orient.target 'top' | 'right' | 'bottom' | 'left' | number Where a picked segment goes: 'top', 'right', 'bottom', 'left' or degrees clockwise from 12 o'clock. Default: 'top'.
chart.deterministic boolean 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.ids (or seeds). Default: false.
chart.seed number Seed of the PRNG used for ids and random layouts. Default: a hash of chart.id.
chart.now number | Date | string | (() => number | Date) 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 string the type asked for ('gauge', 'funnel', ...); set by the library, chart.type holds the base renderer
chart.validate 'warn' | 'error' | 'off' 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 WccReadability West Coast Charts: halo / pill / auto-contrast over the marks (features/readability)
dataLabels.readability.mode 'none' | 'halo' | 'pill' | 'auto' | 'hide' '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 'pill' | 'halo' | 'hide' what 'auto' escalates to over mixed fills or when no text colour reaches minRatio. Default 'pill'
dataLabels.readability.enabled boolean false switches the treatment off for this label kind
dataLabels.readability.contrast boolean swap the text to light/dark when it misses minRatio against what is under it (any mode)
dataLabels.readability.minRatio number WCAG 2 contrast ratio to reach. Default 4.5
dataLabels.readability.light string text/backdrop colour pair used by contrast and 'auto' fills. Defaults '#ffffff' / '#111827'
dataLabels.readability.dark string Dark colour of the pair. Default: '#111827'.
dataLabels.readability.background 'auto' | string colour under the chart; 'auto' = chart.background, else the first opaque ancestor
dataLabels.readability.halo object outline behind the glyphs; blur > 0 makes it a soft glow. Defaults width 3, color 'auto' (chart background), opacity 0.92
dataLabels.readability.halo.width number Outline width in pixels. Default: 3.
dataLabels.readability.halo.color 'auto' | string Outline colour; 'auto' uses the colour under the label or a contrasting one. Default: 'auto'.
dataLabels.readability.halo.opacity number Outline opacity (0 to 1). Default: 0.92.
dataLabels.readability.halo.blur number Blur in pixels; above 0 the outline becomes a soft glow. Default: 0.
dataLabels.readability.pill object backdrop box. padding = [vertical, horizontal]; offset = [dx, dy] px. Defaults fill 'auto', opacity 0.9, radius 4, padding [1, 4]
dataLabels.readability.pill.fill 'auto' | string Box colour; 'auto' uses the colour under the label or a contrasting one. Default: 'auto'.
dataLabels.readability.pill.opacity number Box opacity (0 to 1). Default: 0.9.
dataLabels.readability.pill.radius number Corner radius in pixels. Default: 4.
dataLabels.readability.pill.padding number | [number, number] Space around the text in pixels: one number, or [vertical, horizontal]. Default: [1, 4].
dataLabels.readability.pill.stroke string Outline colour of the box. Default: 'none'.
dataLabels.readability.pill.strokeWidth number Outline width in pixels. Default: 1.
dataLabels.readability.pill.offset [number, number] Shift of the box as [dx, dy] in pixels. Default: [0, 0].
dataLabels.readability.shadow object | boolean drop shadow on the pill (on the text in halo mode)
dataLabels.readability.shadow.dx number Horizontal shadow offset in pixels. Default: 0.
dataLabels.readability.shadow.dy number Vertical shadow offset in pixels. Default: 1.
dataLabels.readability.shadow.blur number Shadow blur in pixels. Default: 2.
dataLabels.readability.shadow.color string Shadow colour. Default: '#000000'.
dataLabels.readability.shadow.opacity number Shadow opacity (0 to 1). Default: 0.35.
dataLabels.readability.raise boolean axis labels sitting on marks are moved above the series (default true)
dataLabels.readability.each (info: WccReadabilityInfo) => WccReadability | null | undefined per label: return an override (or 'none') for this one label; called only when set
dataLabels.enabled boolean Draws the value next to (or inside) each data point. Default: true.
dataLabels.enabledOnSeries undefined | number[] Indexes of the series that get labels; not set means all series.
dataLabels.textAnchor 'start' | 'middle' | 'end' Horizontal anchor of the label text: 'start', 'middle' or 'end'. Default: 'middle'.
dataLabels.distributed boolean Colours each label with the colour of its own point instead of its series. Default: false.
dataLabels.offsetX number Moves the labels horizontally. Default: 0.
dataLabels.offsetY number Moves the labels vertically. Default: 0.
dataLabels.style object Text style of the labels.
dataLabels.style.fontSize string Font size of the labels. Default: '12px'.
dataLabels.style.fontFamily string Font family of the labels; not set uses chart.fontFamily.
dataLabels.style.fontWeight string | number Font weight of the labels. Default: 600.
dataLabels.style.colors any[] Label colours; not set uses the series colours (or white inside bars and slices).
dataLabels.background object Box drawn behind each label (not on bubble charts).
dataLabels.background.enabled boolean Draws the box. Default: true.
dataLabels.background.foreColor string Text colour used when the box is drawn. Default: '#fff'.
dataLabels.background.backgroundColor string Box colour; not set uses the series colour.
dataLabels.background.borderRadius number Corner radius of the box in pixels. Default: 2.
dataLabels.background.padding number Space in pixels between text and box border. Default: 4.
dataLabels.background.opacity number Opacity of the box (0 to 1). Default: 0.9.
dataLabels.background.borderWidth number Border width of the box in pixels. Default: 1.
dataLabels.background.borderColor string Border colour of the box. Default: '#fff'.
dataLabels.background.dropShadow ApexDropShadow Shadow behind the box.
dataLabels.background.dropShadow.enabled boolean Draws the shadow. Default: false.
dataLabels.background.dropShadow.top number Vertical shadow distance in pixels. Default: 2.
dataLabels.background.dropShadow.left number Horizontal shadow distance in pixels. Default: 2.
dataLabels.background.dropShadow.blur number Blur radius in pixels. Default: 4.
dataLabels.background.dropShadow.opacity number Shadow opacity (0 to 1). Default: 0.7.
dataLabels.background.dropShadow.color string Shadow colour. Default: '#000'.
dataLabels.dropShadow ApexDropShadow Shadow behind the label text.
dataLabels.dropShadow.enabled boolean Draws the shadow. Default: false.
dataLabels.dropShadow.top number Vertical shadow distance in pixels. Default: 2.
dataLabels.dropShadow.left number Horizontal shadow distance in pixels. Default: 2.
dataLabels.dropShadow.blur number Blur radius in pixels. Default: 4.
dataLabels.dropShadow.opacity number Shadow opacity (0 to 1). Default: 0.7.
dataLabels.dropShadow.color string Shadow colour. Default: '#000'.
dataLabels.formatter() (val: string | number | number[], opts?: any): string | number | (string | number)[] 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 any[] Fill colours; not set uses the series colours.
fill.opacity number | number[] Fill opacity (0 to 1); an array gives one per series. Default: 0.85.
fill.type string | string[] 'solid', 'gradient', 'pattern' or 'image'; an array gives one per series. Default: 'solid'.
fill.gradient object Settings for type: 'gradient'.
fill.gradient.shade string 'light' or 'dark': direction in which the series colour is shaded. Default: 'dark'.
fill.gradient.type string Direction: 'horizontal', 'vertical', 'diagonal1', 'diagonal2' or 'radial'. Default: 'horizontal'.
fill.gradient.shadeIntensity number Strength of the shading (0 to 1). Default: 0.5.
fill.gradient.gradientToColors string[] End colours of the gradient per series; not set shades the series colour.
fill.gradient.inverseColors boolean Swaps start and end colour for horizontal bars and similar shapes. Default: true.
fill.gradient.opacityFrom number | number[] Opacity at the start of the gradient. Default: 1.
fill.gradient.opacityTo number | number[] Opacity at the end of the gradient. Default: 1.
fill.gradient.stops number[] Positions in percent where the gradient changes. Default: [0,50,100].
fill.gradient.colorStops ApexColorStop[] Explicit stops; when set they replace the generated gradient. An array of arrays gives stops per series. Default: [].
fill.gradient.colorStops[].offset number Position of the stop along the gradient, in percent (0 to 100).
fill.gradient.colorStops[].color string Colour at this stop.
fill.gradient.colorStops[].opacity number Opacity at this stop (0 to 1).
fill.gradient.colorStops[].offset number Position of the stop along the gradient, in percent (0 to 100).
fill.image object Settings for type: 'image'.
fill.image.src string | string[] Image URL, or one URL per series. Default: [].
fill.image.width number Width of the image tile in pixels; set together with height, otherwise the image is stretched to the shape.
fill.image.height number Height of the image tile in pixels; set together with width.
fill.pattern object Settings for type: 'pattern'.
fill.pattern.style string | string[] 'verticalLines', 'horizontalLines', 'slantedLines', 'squares' or 'circles'; an array gives one per series. Default: 'squares'.
fill.pattern.width number Width of the pattern tile in pixels. Default: 6.
fill.pattern.height number Height of the pattern tile in pixels. Default: 6.
fill.pattern.strokeWidth number 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 number Number of points at the end of each line series drawn as forecast; 0 turns it off. Default: 0.
forecastDataPoints.fillOpacity number Opacity of the forecast part (0 to 1). Default: 0.5.
forecastDataPoints.strokeWidth undefined | number Line width of the forecast part; not set keeps the series width.
forecastDataPoints.dashArray number 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 boolean Draws the grid lines. Default: true.
grid.borderColor string Colour of the grid lines. Default: '#e0e0e0'.
grid.strokeDashArray number Dash length of the grid lines; 0 draws solid lines. Default: 0.
grid.position 'front' | 'back' 'back' draws the grid behind the series, 'front' above them. Default: 'back'.
grid.xaxis object Vertical grid lines (at the x ticks).
grid.xaxis.lines object Vertical grid lines.
grid.xaxis.lines.show boolean Draws the vertical grid lines. Default: false.
grid.xaxis.lines.offsetX number Moves the vertical lines horizontally.
grid.xaxis.lines.offsetY number Moves the vertical lines vertically.
grid.yaxis object Horizontal grid lines (at the y ticks).
grid.yaxis.lines object Horizontal grid lines.
grid.yaxis.lines.show boolean Draws the horizontal grid lines. Default: true.
grid.yaxis.lines.offsetX number Moves the horizontal lines horizontally.
grid.yaxis.lines.offsetY number Moves the horizontal lines vertically.
grid.row object Alternating background bands between horizontal grid lines.
grid.row.colors string[] Colours of the bands, repeated in order; not set draws no bands.
grid.row.opacity number Opacity of the bands (0 to 1). Default: 0.5.
grid.column object Alternating background bands between vertical grid lines.
grid.column.colors string[] Colours of the bands, repeated in order; not set draws no bands.
grid.column.opacity number Opacity of the bands (0 to 1). Default: 0.5.
grid.padding object Space in pixels between the grid area and the chart edges.
grid.padding.top number Space above the grid. Default: 0.
grid.padding.right number Space right of the grid. Default: 10.
grid.padding.bottom number Space below the grid. Default: 0.
grid.padding.left number 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 boolean Shows the legend. Default: true.
legend.showForSingleSeries boolean Shows the legend even when there is only one series. Default: false.
legend.showForNullSeries boolean Lists series that contain only null values. Default: true.
legend.showForZeroSeries boolean Lists series whose values are all zero. Default: true.
legend.floating boolean Takes the legend out of the layout so it overlaps the plot instead of taking space. Default: false.
legend.inverseOrder boolean Lists the series in reverse order. Default: false.
legend.position 'top' | 'right' | 'bottom' | 'left' Side of the chart: 'top', 'right', 'bottom' or 'left'. Default: 'bottom'.
legend.horizontalAlign 'left' | 'center' | 'right' Alignment of a top/bottom legend: 'left', 'center' or 'right'. Default: 'center'.
legend.fontSize string Font size of the legend texts. Default: '12px'.
legend.fontFamily string Font family of the legend texts; not set uses chart.fontFamily.
legend.fontWeight string | number Font weight of the legend texts. Default: 400.
legend.width number Fixed width of the legend in pixels.
legend.height number Fixed height of the legend in pixels.
legend.offsetX number Moves the legend horizontally. Default: -20.
legend.offsetY number Moves the legend vertically. Default: 4.
legend.formatter() (legendName: string, opts?: any): string Function that returns the text of an entry from the series name and { seriesIndex, w }.
legend.tooltipHoverFormatter() (legendName: string, opts?: any): string Function that returns the entry text while the tooltip hovers a data point, so the legend can show the hovered value.
legend.customLegendItems string[] Texts that replace the series names as legend entries. Default: [].
legend.clusterGroupedSeries boolean With series[].group, puts the entries of each group into its own block. Default: true.
legend.clusterGroupedSeriesOrientation string Direction in which the group blocks are laid out: 'vertical' or 'horizontal'. Default: 'vertical'.
legend.labels object Colours of the entry texts.
legend.labels.colors string | string[] Text colour; an array gives one colour per entry.
legend.labels.useSeriesColors boolean Colours each entry text with its series colour. Default: false.
legend.markers object The coloured symbols in front of the entries.
legend.markers.size number Size of the symbol in pixels. Default: 7.
legend.markers.strokeWidth number | number[] Outline width of the symbol in pixels, or one per series. Default: 1.
legend.markers.fillColors string[] Symbol colours; not set uses the series colours.
legend.markers.shape ApexMarkerShape Symbol shape ('circle', 'square', 'line', 'plus', 'cross' ...); not set follows the series marker shape.
legend.markers.offsetX number Moves the symbols horizontally. Default: 0.
legend.markers.offsetY number Moves the symbols vertically. Default: 0.
legend.markers.customHTML (() => any) | Array<() => any> Function (or one per series) returning markup that replaces the symbol.
legend.markers.onClick() (): void Called when a legend symbol is clicked.
legend.itemMargin object Space around each entry.
legend.itemMargin.horizontal number Space in pixels left and right of each entry. Default: 5.
legend.itemMargin.vertical number Space in pixels above and below each entry. Default: 4.
legend.onItemClick object What a click on an entry does.
legend.onItemClick.toggleDataSeries boolean Hides or shows the series of the clicked entry. Default: true.
legend.onItemHover object What hovering an entry does.
legend.onItemHover.highlightDataSeries boolean 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 number | number[] Marker radius in pixels; 0 hides markers until a point is hovered. An array gives one per series. Default: 0.
markers.colors string | string[] Marker fill colours; not set uses the series colours.
markers.strokeColors string | string[] Marker outline colour (or one per series). Default: '#fff'.
markers.strokeWidth number | number[] Marker outline width in pixels. Default: 2.
markers.strokeOpacity number | number[] Marker outline opacity (0 to 1). Default: 0.9.
markers.strokeDashArray number | number[] Dash length of the outline; 0 draws a solid outline. Default: 0.
markers.fillOpacity number | number[] Marker fill opacity (0 to 1). Default: 1.
markers.discrete ApexDiscretePoint[] Individual markers with their own look, addressed by series and data index. Default: [].
markers.discrete[].seriesIndex number Series of the point.
markers.discrete[].dataPointIndex number Index of the point in its series.
markers.discrete[].fillColor string Fill colour of this marker.
markers.discrete[].strokeColor string Outline colour of this marker.
markers.discrete[].size number Size of this marker in pixels.
markers.discrete[].shape ApexMarkerShape Shape of this marker.
markers.shape ApexMarkerShape 'circle', 'square', 'rect', 'diamond', 'triangle', 'cross', 'plus', 'star' or 'sparkle'; an array gives one per series. Default: 'circle'.
markers.offsetX number Moves the markers horizontally. Default: 0.
markers.offsetY number Moves the markers vertically. Default: 0.
markers.showNullDataPoints boolean After a null value, draws a marker on the next point so values that stand alone between gaps stay visible. Default: true.
markers.onClick() (e?: any): void Called when a marker is clicked.
markers.onDblClick() (e?: any): void Called when a marker is double-clicked.
markers.hover object Marker size while hovered.
markers.hover.size number Fixed hover radius in pixels; when set it replaces sizeOffset.
markers.hover.sizeOffset number 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 string The text; not set shows nothing for empty charts.
noData.align 'left' | 'right' | 'center' 'left', 'center' or 'right'. Default: 'center'.
noData.verticalAlign 'top' | 'middle' | 'bottom' 'top', 'middle' or 'bottom'. Default: 'middle'.
noData.offsetX number Moves the text horizontally. Default: 0.
noData.offsetY number Moves the text vertically. Default: 0.
noData.style object Text style.
noData.style.color string Text colour; not set uses chart.foreColor.
noData.style.fontSize string Font size. Default: '14px'.
noData.style.fontFamily string 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 object Settings of line series.
plotOptions.line.isSlopeChart boolean Draws a slope chart: each series connects its first and last value, with labels at both ends. Default: false.
plotOptions.line.colors object Colours a line by value relative to a threshold.
plotOptions.line.colors.threshold number The value at which the line changes colour. Default: 0.
plotOptions.line.colors.colorAboveThreshold string Line colour above the threshold.
plotOptions.line.colors.colorBelowThreshold string Line colour below the threshold.
plotOptions.area object Settings of area series.
plotOptions.area.fillTo 'origin' | 'end' 'origin' fills down to the zero line; 'end' fills to the bottom of the plot. Default: 'origin'.
plotOptions.bar object Settings of bar, column and range bar series. Dumbbell settings of bar charts.
plotOptions.bar.wcc object West Coast Charts: opt-in bar marks.
plotOptions.bar.wcc.mark 'lollipop' | 'ringStem' 'lollipop' (stem and dot) or 'ringStem' (stem and ring) instead of the bar.
plotOptions.bar.wcc.stemWidth number Stem width in pixels. Default: 2.
plotOptions.bar.wcc.headRadius number Head radius in pixels. Default: 6.
plotOptions.bar.horizontal boolean Draws horizontal bars instead of vertical columns. Default: false.
plotOptions.bar.columnWidth string | number Width of a column as a percentage of its category slot (or pixels as a number); vertical bars only. Default: '70%'.
plotOptions.bar.barHeight string | number Height of a bar as a percentage of its category slot (or pixels as a number); horizontal bars only. Default: '70%'.
plotOptions.bar.distributed boolean Gives every bar of a single series its own palette colour (and its own legend entry). Default: false.
plotOptions.bar.borderRadius number Corner radius of the bars in pixels. Default: 0.
plotOptions.bar.borderRadiusApplication 'around' | 'end' '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 'all' | 'last' Accepted for ApexCharts 4.x compatibility; stacked rounding follows borderRadiusApplication. Default: 'last'.
plotOptions.bar.hideZeroBarsWhenGrouped boolean In grouped bars, leaves no gap for zero values: the remaining bars of the category share its slot. Default: false.
plotOptions.bar.rangeBarOverlap boolean With rangeBarGroupRows, false moves overlapping ranges in a row into separate lanes; true lets them overlap. Default: true.
plotOptions.bar.rangeBarGroupRows boolean Puts the ranges of all series with the same x label into one row (timeline view). Default: false.
plotOptions.bar.isDumbbell boolean Draws range bars as dumbbells: a thin bar with a dot at each end. Default: false.
plotOptions.bar.dumbbellColors string[][] Colours of the two dumbbell ends per series ([[start, end], ...]); not set uses the series colours.
plotOptions.bar.isFunnel boolean Draws a horizontal bar series as a centred funnel. Default: false.
plotOptions.bar.isFunnel3d boolean Adds the shaded connecting faces between funnel steps. Default: true.
plotOptions.bar.colors object Colouring of bars by value and the background bars.
plotOptions.bar.colors.ranges object[] Value ranges with their own bar colour. Default: [].
plotOptions.bar.colors.ranges[].from number Lower end of the range (inclusive).
plotOptions.bar.colors.ranges[].to number Upper end of the range (inclusive).
plotOptions.bar.colors.ranges[].color string Bar colour for values in the range.
plotOptions.bar.colors.backgroundBarColors string[] Colours of full-length bars drawn behind each category, repeated in order; empty draws none. Default: [].
plotOptions.bar.colors.backgroundBarOpacity number Opacity of the background bars (0 to 1). Default: 1.
plotOptions.bar.colors.backgroundBarRadius number Corner radius of the background bars in pixels. Default: 0.
plotOptions.bar.dataLabels object Placement of the value labels on bars.
plotOptions.bar.dataLabels.maxItems number Above this many bars with labels enabled, a performance warning is logged. Default: 100.
plotOptions.bar.dataLabels.hideOverflowingLabels boolean Hides a label that does not fit inside its bar. Default: true.
plotOptions.bar.dataLabels.position string 'top', 'center' or 'bottom' of the bar (for horizontal bars: end, centre, start). Default: 'top'.
plotOptions.bar.dataLabels.orientation 'horizontal' | 'vertical' 'horizontal' or 'vertical' text. Default: 'horizontal'.
plotOptions.bar.dataLabels.total object Sum label at the end of each stack.
plotOptions.bar.dataLabels.total.enabled boolean Shows the stack totals (stacked bars only). Default: false.
plotOptions.bar.dataLabels.total.formatter() (val?: string, opts?: any): string, Function that returns the total text from the sum.
plotOptions.bar.dataLabels.total.offsetX number Moves the totals horizontally. Default: 0.
plotOptions.bar.dataLabels.total.offsetY number Moves the totals vertically. Default: 0.
plotOptions.bar.dataLabels.total.style object Text style of the totals.
plotOptions.bar.dataLabels.total.style.color string Text colour of the totals; unset inherits chart.foreColor. An explicit colour overrides the theme.
plotOptions.bar.dataLabels.total.style.fontSize string Font size of the totals. Default: '12px'.
plotOptions.bar.dataLabels.total.style.fontFamily string Font family of the totals; not set uses chart.fontFamily.
plotOptions.bar.dataLabels.total.style.fontWeight number | string Font weight of the totals. Default: 600.
plotOptions.bar.dumbbell object Settings of dumbbell bars.
plotOptions.bar.dumbbell.connector object Line joining the two ends of a dumbbell.
plotOptions.bar.dumbbell.connector.color WccColor Connector colour; not set draws a gradient between the two end colours.
plotOptions.bar.dumbbell.connector.opacity number Connector opacity. Default: 0.55.
plotOptions.bar.dumbbell.dataLabels object Value labels at both ends.
plotOptions.bar.dumbbell.dataLabels.enabled boolean Draws the end labels. Default: false.
plotOptions.bar.dumbbell.dataLabels.offset number Distance of a label from its end marker in pixels. Default: 6.
plotOptions.bar.dumbbell.dataLabels.colorFromMarker boolean Colours each label like its end marker. Default: true.
plotOptions.bar.dumbbell.dataLabels.formatter WccCallback Returns the label text.
plotOptions.bar.dumbbell.dataLabels.style WccTextStyle Text style of the labels (fontSize default '12px', fontWeight 600).
plotOptions.bar.dumbbell.dataLabels.style.fontSize string | number Font size.
plotOptions.bar.dumbbell.dataLabels.style.fontFamily string Font family; not set uses the chart font.
plotOptions.bar.dumbbell.dataLabels.style.fontWeight string | number Font weight.
plotOptions.bar.dumbbell.dataLabels.style.colors string[] Text colours; an array gives one per series or item.
plotOptions.bar.dumbbell.tooltip object Tooltip additions of dumbbells.
plotOptions.bar.dumbbell.tooltip.differenceLabel string Label of the difference row in the tooltip. Default: 'Difference'.
plotOptions.bubble object Settings of bubble series.
plotOptions.bubble.zScaling boolean Scales the z values to the plot size; false uses z directly as the radius in pixels. Default: true.
plotOptions.bubble.minBubbleRadius number Smallest radius in pixels; smaller bubbles are enlarged to it.
plotOptions.bubble.maxBubbleRadius number Largest radius in pixels; bigger bubbles are reduced to it.
plotOptions.bubble.minZ number z values mapped to the smallest / largest bubble (default: the data range)
plotOptions.bubble.maxZ number Fixes the top of the z range instead of taking the data maximum, so several charts size bubbles alike.
plotOptions.candlestick object Settings of candlestick series.
plotOptions.candlestick.type string 'candlestick' (boxes) or 'ohlc' (open/close ticks on a line).
plotOptions.candlestick.colors object Colours of rising and falling candles.
plotOptions.candlestick.colors.upward string | string[] Colour when close is above open. Default: '#00B746'.
plotOptions.candlestick.colors.downward string | string[] Colour when close is below open. Default: '#EF403C'.
plotOptions.candlestick.wick object The high/low lines.
plotOptions.candlestick.wick.useFillColor boolean Draws the wick in the candle colour; false uses the stroke colour. Default: true.
plotOptions.boxPlot object Settings of box plot series. Raw-sample settings of box plots.
plotOptions.boxPlot.wcc object West Coast Charts: box plot extras.
plotOptions.boxPlot.wcc.jitter number Spread (0 to 1 of the box width) of scatter series drawn over the boxes; same on every render. Default: 0.
plotOptions.boxPlot.colors object Colours of the two box halves.
plotOptions.boxPlot.colors.upper string | string[] Colour of the part between median and upper quartile. Default: '#00E396'.
plotOptions.boxPlot.colors.lower string | string[] Colour of the part between lower quartile and median. Default: '#008FFB'.
plotOptions.boxPlot.whiskers 'minmax' | 'tukey' | 'percentile' raw-sample boxes (data[].points): whisker rule; needs west-coast-charts/types
plotOptions.boxPlot.whiskerPercentiles [number, number] quantiles (percent) for whiskers: 'percentile'; default [5, 95]
plotOptions.boxPlot.points WccSamplePoints observation dots over raw-sample boxes Raw samples drawn over the boxes.
plotOptions.boxPlot.points.show boolean | 'all' | 'outliers' true or 'all' draws every sample, 'outliers' only those beyond the whiskers; false draws none. Needs west-coast-charts/types.
plotOptions.boxPlot.points.shape 'circle' | 'square' Dot shape. Default: 'circle'.
plotOptions.boxPlot.points.size number Dot radius in pixels. Default: 2.5.
plotOptions.boxPlot.points.jitter number Horizontal spread of the dots as a share of the box width (0 to 1). Default: 0.5.
plotOptions.boxPlot.points.maxPoints number Upper limit of drawn dots per chart. Default: 3000.
plotOptions.boxPlot.points.opacity number Dot opacity (0 to 1).
plotOptions.boxPlot.points.fillColor 'series-dark' | 'series' | string 'series-dark' (a darker series colour), 'series' or any CSS colour.
plotOptions.boxPlot.points.strokeColor string Dot outline colour; white or not set uses the theme surface colour.
plotOptions.boxPlot.points.strokeWidth number Dot outline width in pixels.
plotOptions.boxPlot.points.colorScale WccColorScale 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 string[] Colours from the lowest to the highest value.
plotOptions.boxPlot.points.colorScale.min number Value mapped to the first colour; not set uses the smallest sample.
plotOptions.boxPlot.points.colorScale.max number Value mapped to the last colour; not set uses the largest sample.
plotOptions.boxPlot.points.colorScale.steps number Number of discrete colour steps; not set gives a continuous scale.
plotOptions.boxPlot.points.colorScale.colors string[] Colours from the lowest to the highest value.
plotOptions.boxPlot.points.show boolean | 'all' | 'outliers' false: none; true or 'all': every sample; 'outliers': only those outside the whiskers
plotOptions.heatmap object Settings of heatmap series. Cell shape settings of heatmaps.
plotOptions.heatmap.wcc object West Coast Charts: heatmap extras.
plotOptions.heatmap.wcc.centerTimeLabels boolean Datetime x axis: centres the time labels on the equal-width cells. Default: false.
plotOptions.heatmap.radius number Corner radius of the cells in pixels. Default: 2.
plotOptions.heatmap.enableShades boolean Shades each cell from its series colour by value; false uses the flat colour. Default: true.
plotOptions.heatmap.shadeIntensity number Strength of the value shading (0 to 1). Default: 0.5.
plotOptions.heatmap.reverseNegativeShade boolean With negative values, shades by distance from zero so large negative values are dark too. Default: false.
plotOptions.heatmap.distributed boolean Shades each row by its own minimum and maximum instead of the whole chart. Default: false.
plotOptions.heatmap.useFillColorAsStroke boolean Draws the cell border in the cell colour instead of the stroke colour. Default: false.
plotOptions.heatmap.colorScale object Fixed colours for value ranges.
plotOptions.heatmap.colorScale.ranges object[] Value ranges with their own colour; cells outside every range keep the series colour. Default: [].
plotOptions.heatmap.colorScale.ranges[].from number Lower end of the range.
plotOptions.heatmap.colorScale.ranges[].to number Upper end of the range.
plotOptions.heatmap.colorScale.ranges[].color string Cell colour for values in the range.
plotOptions.heatmap.colorScale.ranges[].foreColor string Data label colour on cells in the range.
plotOptions.heatmap.colorScale.ranges[].name string Legend text for the range.
plotOptions.heatmap.colorScale.inverse boolean Reverses the shading direction (high values light). Default: false.
plotOptions.heatmap.colorScale.min number Value treated as the minimum for shading; not set uses the data minimum.
plotOptions.heatmap.colorScale.max number Value treated as the maximum for shading; not set uses the data maximum.
plotOptions.heatmap.shape 'rect' | 'hexagon' | 'circle' | 'diamond' Cell shape: 'rect', 'hexagon', 'circle' or 'diamond'. Default: 'rect'.
plotOptions.heatmap.shapeAspect 'regular' | 'fill' hexagons: 'regular' (letterboxed) or 'fill' (stretched)
plotOptions.heatmap.empty object | boolean 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 string Name of the state, such as 'closed'. Default: 'No value'.
plotOptions.heatmap.empty.color WccColor Hatch colour; not set uses a neutral grey of the theme.
plotOptions.heatmap.empty.legend boolean Legend entry after the colour ranges (only with colorScale.ranges). Default: true.
plotOptions.treemap object Settings of treemap series. Zoom settings of nested treemaps.
plotOptions.treemap.enableShades boolean Shades each tile from its series colour by value. Default: true.
plotOptions.treemap.shadeIntensity number Strength of the value shading (0 to 1). Default: 0.5.
plotOptions.treemap.distributed boolean Gives every tile its own palette colour. Default: false.
plotOptions.treemap.reverseNegativeShade boolean With negative values, shades by distance from zero. Default: false.
plotOptions.treemap.useFillColorAsStroke boolean Draws the tile border in the tile colour. Default: false.
plotOptions.treemap.dataLabels object Text of the tile labels. Nested treemaps: labels of the leaf tiles.
plotOptions.treemap.dataLabels.format 'scale' | 'truncate' 'scale' shrinks the font to fit the tile; 'truncate' keeps the size and cuts the text. Default: 'scale'.
plotOptions.treemap.dataLabels.showValue boolean Shows the value under the name. Default: true.
plotOptions.treemap.dataLabels.minFontSize number Smallest font size in pixels before a label is dropped.
plotOptions.treemap.dataLabels.align 'left' | 'center' Horizontal label position: 'left' or 'center'. Default: 'left'.
plotOptions.treemap.borderRadius number Corner radius of the tiles in pixels. Default: 4.
plotOptions.treemap.colorScale object Fixed colours for value ranges. Nested treemaps: continuous colour by a second metric.
plotOptions.treemap.colorScale.inverse boolean Reverses the shading direction. Default: false.
plotOptions.treemap.colorScale.ranges object[] Value ranges with their own colour. Default: [].
plotOptions.treemap.colorScale.ranges[].from number Lower end of the range.
plotOptions.treemap.colorScale.ranges[].to number Upper end of the range.
plotOptions.treemap.colorScale.ranges[].color string Tile colour for values in the range.
plotOptions.treemap.colorScale.ranges[].foreColor string Label colour on tiles in the range.
plotOptions.treemap.colorScale.ranges[].name string Legend text for the range.
plotOptions.treemap.colorScale.min number Value treated as the minimum for shading.
plotOptions.treemap.colorScale.max number Value treated as the maximum for shading.
plotOptions.treemap.colorScale.colorValue string | ((point: any, ctx: { node: any, w: any }) => number) 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 object The colour gradient of colorValue.
plotOptions.treemap.colorScale.gradient.enabled boolean false keeps the series colours. Default: true.
plotOptions.treemap.colorScale.gradient.min number Lower end of the domain; not set uses the data minimum.
plotOptions.treemap.colorScale.gradient.max number Upper end of the domain; not set uses the data maximum.
plotOptions.treemap.colorScale.gradient.midpoint number Value of the middle colour; defaults to 0 when the domain spans 0.
plotOptions.treemap.colorScale.gradient.symmetric boolean Balances the domain around midpoint. Default: false.
plotOptions.treemap.colorScale.gradient.stops object[] Own colour stops.
plotOptions.treemap.colorScale.gradient.stops[].value number
plotOptions.treemap.colorScale.gradient.stops[].color string
plotOptions.treemap.colorScale.gradientLegend object Gradient strip that replaces the categorical legend.
plotOptions.treemap.colorScale.gradientLegend.enabled boolean Draws the strip. Default: true.
plotOptions.treemap.colorScale.gradientLegend.width number | string Strip length in pixels or as a '60%' string. Default: min(320, 60% of the width).
plotOptions.treemap.colorScale.gradientLegend.thickness number Strip thickness in pixels. Default: 10.
plotOptions.treemap.colorScale.gradientLegend.align 'left' | 'center' | 'right' Strip position: 'left', 'center' or 'right'. Default: 'center'.
plotOptions.treemap.colorScale.gradientLegend.stops number Gradient steps drawn (2 to 64). Default: 16.
plotOptions.treemap.colorScale.gradientLegend.showLabels boolean Shows the min and max labels. Default: true.
plotOptions.treemap.colorScale.gradientLegend.showHoverValue boolean Moves an arrow to the value of the hovered tile. Default: true.
plotOptions.treemap.colorScale.gradientLegend.labelStyle object Style of the labels.
plotOptions.treemap.colorScale.gradientLegend.labelStyle.fontSize number | string
plotOptions.treemap.colorScale.gradientLegend.labelStyle.color string
plotOptions.treemap.colorScale.gradientLegend.labelStyle.fontFamily string
plotOptions.treemap.colorScale.gradientLegend.arrow object Hover arrow.
plotOptions.treemap.colorScale.gradientLegend.arrow.size number
plotOptions.treemap.colorScale.gradientLegend.arrow.color string
plotOptions.treemap.colorScale.gradientLegend.formatter (value: number) => string Formats the labels and hover value.
plotOptions.treemap.seriesTitle object Name badge drawn on each series block when there are several series.
plotOptions.treemap.seriesTitle.show boolean Shows the badges. Default: true.
plotOptions.treemap.seriesTitle.offsetY number Moves the badge vertically. Default: 1.
plotOptions.treemap.seriesTitle.offsetX number Moves the badge horizontally. Default: 1.
plotOptions.treemap.seriesTitle.borderColor string Badge border colour. Default: '#000'.
plotOptions.treemap.seriesTitle.borderWidth number Badge border width in pixels. Default: 1.
plotOptions.treemap.seriesTitle.borderRadius number Badge corner radius in pixels. Default: 2.
plotOptions.treemap.seriesTitle.style object Text and box style of the badge.
plotOptions.treemap.seriesTitle.style.background string Badge background colour. Default: 'rgba(0, 0, 0, 0.6)'.
plotOptions.treemap.seriesTitle.style.color string Badge text colour. Default: '#fff'.
plotOptions.treemap.seriesTitle.style.fontSize string Badge font size. Default: '12px'.
plotOptions.treemap.seriesTitle.style.fontFamily string Badge font family.
plotOptions.treemap.seriesTitle.style.fontWeight number | string Badge font weight. Default: 400.
plotOptions.treemap.seriesTitle.style.cssClass string CSS class added to the badge. Default: ''.
plotOptions.treemap.seriesTitle.style.padding object Space between badge text and border.
plotOptions.treemap.seriesTitle.style.padding.left number Left padding in pixels. Default: 6.
plotOptions.treemap.seriesTitle.style.padding.right number Right padding in pixels. Default: 6.
plotOptions.treemap.seriesTitle.style.padding.top number Top padding in pixels. Default: 2.
plotOptions.treemap.seriesTitle.style.padding.bottom number Bottom padding in pixels. Default: 2.
plotOptions.treemap.zoomOnClick boolean nested treemaps (series data with children): click a parent to zoom into it
plotOptions.treemap.zoom object Zoom into nested treemaps.
plotOptions.treemap.zoom.enabled boolean false turns zooming off; it is on unless this or zoomOnClick is false.
plotOptions.treemap.zoom.breadcrumb object | false Breadcrumb path shown while zoomed; false hides it.
plotOptions.treemap.zoom.breadcrumb.rootLabel string Text of the first breadcrumb. Default: 'All'.
plotOptions.treemap.zoom.breadcrumb.separator string Text between breadcrumbs. Default: '›'.
plotOptions.treemap.zoom.breadcrumb.position 'top-left' | 'top-right' Corner of the breadcrumb: 'top-left' or 'top-right'. Default: 'top-left'.
plotOptions.treemap.nested object Nested treemaps (data with children).
plotOptions.treemap.nested.enabled boolean Turns nesting on; data with children nests on its own.
plotOptions.treemap.nested.drilldownAsLevels boolean Treats the drilldown.series levels as children of the points that reference them. Default: false.
plotOptions.treemap.tint number Nested treemaps: lightens (positive) or darkens (negative) child tiles per depth, 0 to 1. Default: 0.
plotOptions.treemap.parents WccTreemapLevel Style of parent (group) tiles, applied to every depth.
plotOptions.treemap.parents.header object Header strip of the parent tiles.
plotOptions.treemap.parents.header.show boolean Draws the header. Default: true.
plotOptions.treemap.parents.header.showValue boolean Shows the value next to the name. Default: false.
plotOptions.treemap.parents.header.align 'left' | 'center' | 'right' Text position: 'left', 'center' or 'right'. Default: 'left'.
plotOptions.treemap.parents.header.offsetX number Moves the text horizontally in pixels.
plotOptions.treemap.parents.header.offsetY number Moves the text vertically in pixels.
plotOptions.treemap.parents.header.formatter (name: string, ctx: any) => string Header text from the name and { value, depth, seriesIndex, node, w }.
plotOptions.treemap.parents.header.style object Text and background style (fontSize, fontWeight, fontFamily, color, background, cssClass).
plotOptions.treemap.parents.borderColor string Border colour of the parent tiles.
plotOptions.treemap.parents.borderWidth number Border width in pixels.
plotOptions.treemap.parents.borderRadius number Corner radius in pixels.
plotOptions.treemap.parents.fillOpacity number Fill opacity of the parent tiles.
plotOptions.treemap.levels WccTreemapLevel[] Per-depth overrides merged over parents; index 0 is the top level.
plotOptions.treemap.levels[].header object Header strip of the parent tiles.
plotOptions.treemap.levels[].header.show boolean Draws the header. Default: true.
plotOptions.treemap.levels[].header.showValue boolean Shows the value next to the name. Default: false.
plotOptions.treemap.levels[].header.align 'left' | 'center' | 'right' Text position: 'left', 'center' or 'right'. Default: 'left'.
plotOptions.treemap.levels[].header.offsetX number Moves the text horizontally in pixels.
plotOptions.treemap.levels[].header.offsetY number Moves the text vertically in pixels.
plotOptions.treemap.levels[].header.formatter (name: string, ctx: any) => string Header text from the name and { value, depth, seriesIndex, node, w }.
plotOptions.treemap.levels[].header.style object Text and background style (fontSize, fontWeight, fontFamily, color, background, cssClass).
plotOptions.treemap.levels[].borderColor string Border colour of the parent tiles.
plotOptions.treemap.levels[].borderWidth number Border width in pixels.
plotOptions.treemap.levels[].borderRadius number Corner radius in pixels.
plotOptions.treemap.levels[].fillOpacity number Fill opacity of the parent tiles.
plotOptions.pie object Settings of pie and donut charts.
plotOptions.pie.wcc object West Coast Charts: opt-in segment styling (pie and donut, not polarArea).
plotOptions.pie.wcc.segmentGap number Gap between segments in pixels.
plotOptions.pie.wcc.segmentRadius number Corner radius of the segments in pixels.
plotOptions.pie.startAngle number Angle in degrees where the first slice starts (0 = 12 o'clock, clockwise). Default: 0.
plotOptions.pie.endAngle number Angle in degrees where the last slice ends; 180 with startAngle -90 gives a half circle. Default: 360.
plotOptions.pie.customScale number Scale factor applied to the whole pie (1 = fit). Default: 1.
plotOptions.pie.offsetX number Moves the pie horizontally. Default: 0.
plotOptions.pie.offsetY number Moves the pie vertically. Default: 0.
plotOptions.pie.expandOnClick boolean Pulls a clicked slice out of the pie. Default: true.
plotOptions.pie.dataLabels object Placement of the slice labels.
plotOptions.pie.dataLabels.offset number Moves the labels outward (positive) or inward (negative), in pixels. Default: 0.
plotOptions.pie.dataLabels.minAngleToShowLabel number Slices smaller than this angle in degrees get no label. Default: 10.
plotOptions.pie.donut object Settings of the donut hole.
plotOptions.pie.donut.size string Diameter of the hole as a percentage of the pie. Default: '65%'.
plotOptions.pie.donut.background string Fill colour of the hole. Default: 'transparent'.
plotOptions.pie.donut.labels object Texts in the middle of the donut.
plotOptions.pie.donut.labels.readability WccReadability West Coast Charts: readability of the centre labels (features/readability)
plotOptions.pie.donut.labels.readability.mode 'none' | 'halo' | 'pill' | 'auto' | 'hide' '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 'pill' | 'halo' | 'hide' what 'auto' escalates to over mixed fills or when no text colour reaches minRatio. Default 'pill'
plotOptions.pie.donut.labels.readability.enabled boolean false switches the treatment off for this label kind
plotOptions.pie.donut.labels.readability.contrast boolean swap the text to light/dark when it misses minRatio against what is under it (any mode)
plotOptions.pie.donut.labels.readability.minRatio number WCAG 2 contrast ratio to reach. Default 4.5
plotOptions.pie.donut.labels.readability.light string text/backdrop colour pair used by contrast and 'auto' fills. Defaults '#ffffff' / '#111827'
plotOptions.pie.donut.labels.readability.dark string Dark colour of the pair. Default: '#111827'.
plotOptions.pie.donut.labels.readability.background 'auto' | string colour under the chart; 'auto' = chart.background, else the first opaque ancestor
plotOptions.pie.donut.labels.readability.halo object outline behind the glyphs; blur > 0 makes it a soft glow. Defaults width 3, color 'auto' (chart background), opacity 0.92
plotOptions.pie.donut.labels.readability.halo.width number Outline width in pixels. Default: 3.
plotOptions.pie.donut.labels.readability.halo.color 'auto' | string Outline colour; 'auto' uses the colour under the label or a contrasting one. Default: 'auto'.
plotOptions.pie.donut.labels.readability.halo.opacity number Outline opacity (0 to 1). Default: 0.92.
plotOptions.pie.donut.labels.readability.halo.blur number Blur in pixels; above 0 the outline becomes a soft glow. Default: 0.
plotOptions.pie.donut.labels.readability.pill object 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 'auto' | string Box colour; 'auto' uses the colour under the label or a contrasting one. Default: 'auto'.
plotOptions.pie.donut.labels.readability.pill.opacity number Box opacity (0 to 1). Default: 0.9.
plotOptions.pie.donut.labels.readability.pill.radius number Corner radius in pixels. Default: 4.
plotOptions.pie.donut.labels.readability.pill.padding number | [number, number] Space around the text in pixels: one number, or [vertical, horizontal]. Default: [1, 4].
plotOptions.pie.donut.labels.readability.pill.stroke string Outline colour of the box. Default: 'none'.
plotOptions.pie.donut.labels.readability.pill.strokeWidth number Outline width in pixels. Default: 1.
plotOptions.pie.donut.labels.readability.pill.offset [number, number] Shift of the box as [dx, dy] in pixels. Default: [0, 0].
plotOptions.pie.donut.labels.readability.shadow object | boolean drop shadow on the pill (on the text in halo mode)
plotOptions.pie.donut.labels.readability.shadow.dx number Horizontal shadow offset in pixels. Default: 0.
plotOptions.pie.donut.labels.readability.shadow.dy number Vertical shadow offset in pixels. Default: 1.
plotOptions.pie.donut.labels.readability.shadow.blur number Shadow blur in pixels. Default: 2.
plotOptions.pie.donut.labels.readability.shadow.color string Shadow colour. Default: '#000000'.
plotOptions.pie.donut.labels.readability.shadow.opacity number Shadow opacity (0 to 1). Default: 0.35.
plotOptions.pie.donut.labels.readability.raise boolean axis labels sitting on marks are moved above the series (default true)
plotOptions.pie.donut.labels.readability.each (info: WccReadabilityInfo) => WccReadability | null | undefined per label: return an override (or 'none') for this one label; called only when set
plotOptions.pie.donut.labels.show boolean Shows the middle texts. Default: false.
plotOptions.pie.donut.labels.name object The upper text: name of the hovered slice.
plotOptions.pie.donut.labels.name.show boolean Shows the name. Default: true.
plotOptions.pie.donut.labels.name.fontSize string Font size of the name. Default: '16px'.
plotOptions.pie.donut.labels.name.fontFamily string Font family of the name.
plotOptions.pie.donut.labels.name.fontWeight string | number Font weight of the name. Default: 600.
plotOptions.pie.donut.labels.name.color string Colour of the name; not set uses the slice colour.
plotOptions.pie.donut.labels.name.offsetY number Moves the name vertically. Default: -10.
plotOptions.pie.donut.labels.name.formatter() (val: string): string Function that returns the name text. The built-in one returns the slice name.
plotOptions.pie.donut.labels.value object The lower text: value of the hovered slice.
plotOptions.pie.donut.labels.value.show boolean Shows the value. Default: true.
plotOptions.pie.donut.labels.value.fontSize string Font size of the value. Default: '20px'.
plotOptions.pie.donut.labels.value.fontFamily string Font family of the value.
plotOptions.pie.donut.labels.value.fontWeight string | number Font weight of the value. Default: 400.
plotOptions.pie.donut.labels.value.color string Colour of the value; not set uses chart.foreColor.
plotOptions.pie.donut.labels.value.offsetY number Moves the value vertically. Default: 10.
plotOptions.pie.donut.labels.value.formatter() (val: string): string Function that returns the value text. The built-in one returns the value.
plotOptions.pie.donut.labels.total object Total shown while no slice is hovered.
plotOptions.pie.donut.labels.total.show boolean Shows the total when nothing is hovered. Default: false.
plotOptions.pie.donut.labels.total.showAlways boolean Keeps the total even while a slice is hovered. Default: false.
plotOptions.pie.donut.labels.total.fontFamily string Font family of the total label.
plotOptions.pie.donut.labels.total.fontWeight string | number Font weight of the total label. Default: 400.
plotOptions.pie.donut.labels.total.fontSize string Font size of the total label. Default: '16px'.
plotOptions.pie.donut.labels.total.label string Text shown in place of a slice name. Default: 'Total'.
plotOptions.pie.donut.labels.total.color string Colour of the total label.
plotOptions.pie.donut.labels.total.formatter() (w: any): string Function that returns the total value text. The built-in one returns the sum of the slice values.
plotOptions.polarArea object Settings of polar area charts.
plotOptions.polarArea.rings object Concentric guide circles.
plotOptions.polarArea.rings.strokeWidth number Line width of the rings; 0 hides them. Default: 1.
plotOptions.polarArea.rings.strokeColor string Colour of the rings. Default: '#e8e8e8'.
plotOptions.polarArea.spokes object Lines from the centre to each slice border.
plotOptions.polarArea.spokes.strokeWidth number Line width of the spokes; 0 hides them. Default: 1.
plotOptions.polarArea.spokes.connectorColors string | string[] Colour of the spokes (or one per spoke). Default: '#e8e8e8'.
plotOptions.radar object Settings of radar charts.
plotOptions.radar.size number Radius in pixels; not set fits the plot.
plotOptions.radar.offsetX number Moves the radar horizontally. Default: 0.
plotOptions.radar.offsetY number Moves the radar vertically. Default: 0.
plotOptions.radar.polygons object The web of guide polygons.
plotOptions.radar.polygons.strokeColors string | string[] Colour of the polygon lines (or one per ring). Default: '#e8e8e8'.
plotOptions.radar.polygons.strokeWidth string | string[] Width of the polygon lines. Default: 1.
plotOptions.radar.polygons.connectorColors string | string[] Colour of the lines from the centre to each corner. Default: '#e8e8e8'.
plotOptions.radar.polygons.fill object Fill between the polygons.
plotOptions.radar.polygons.fill.colors string[] Fill colours of the rings, repeated in order; not set leaves them empty.
plotOptions.radialBar WccGaugeOptions Settings of radial bar (circular progress) charts. Gauge settings (chart.type 'gauge').
plotOptions.radialBar.inverseOrder boolean Draws the first series on the outside instead of the inside. Default: false.
plotOptions.radialBar.startAngle number Start angle of the bars in degrees (0 = 12 o'clock). Default: 0.
plotOptions.radialBar.endAngle number End angle of the bars in degrees; 360 is a full circle. Default: 360.
plotOptions.radialBar.offsetX number Moves the chart horizontally. Default: 0.
plotOptions.radialBar.offsetY number Moves the chart vertically. Default: 0.
plotOptions.radialBar.hollow object The empty centre.
plotOptions.radialBar.hollow.margin number Space in pixels between the hollow and the innermost bar. Default: 5.
plotOptions.radialBar.hollow.size string Diameter of the hollow as a percentage. Default: '50%'.
plotOptions.radialBar.hollow.background string Fill colour of the hollow. Default: 'transparent'.
plotOptions.radialBar.hollow.image string URL of an image drawn in the hollow.
plotOptions.radialBar.hollow.imageWidth number Width of the image in pixels. Default: 150.
plotOptions.radialBar.hollow.imageHeight number Height of the image in pixels. Default: 150.
plotOptions.radialBar.hollow.imageOffsetX number Moves the image horizontally. Default: 0.
plotOptions.radialBar.hollow.imageOffsetY number Moves the image vertically. Default: 0.
plotOptions.radialBar.hollow.imageClipped boolean Clips the image to the circle of the hollow. Default: true.
plotOptions.radialBar.hollow.position 'front' | 'back' 'front' draws the hollow above the tracks, 'back' below them. Default: 'front'.
plotOptions.radialBar.hollow.dropShadow ApexDropShadow Shadow of the hollow.
plotOptions.radialBar.hollow.dropShadow.enabled boolean Draws the shadow. Default: false.
plotOptions.radialBar.hollow.dropShadow.top number Vertical shadow distance in pixels. Default: 2.
plotOptions.radialBar.hollow.dropShadow.left number Horizontal shadow distance in pixels. Default: 2.
plotOptions.radialBar.hollow.dropShadow.blur number Blur radius in pixels. Default: 4.
plotOptions.radialBar.hollow.dropShadow.opacity number Shadow opacity (0 to 1). Default: 0.7.
plotOptions.radialBar.hollow.dropShadow.color string Shadow colour. Default: '#000'.
plotOptions.radialBar.track object The background ring behind each bar.
plotOptions.radialBar.track.show boolean Draws the tracks. Default: true.
plotOptions.radialBar.track.startAngle number Start angle of the track; not set uses radialBar.startAngle.
plotOptions.radialBar.track.endAngle number End angle of the track; not set uses radialBar.endAngle.
plotOptions.radialBar.track.background string | string[] Track colour (or one per series). Default: '#f2f2f2'.
plotOptions.radialBar.track.strokeWidth string Track thickness as a percentage of the bar thickness. Default: '97%'.
plotOptions.radialBar.track.opacity number Track opacity (0 to 1). Default: 1.
plotOptions.radialBar.track.margin number Space in pixels between neighbouring tracks. Default: 5.
plotOptions.radialBar.track.dropShadow ApexDropShadow Shadow of the tracks.
plotOptions.radialBar.track.dropShadow.enabled boolean Draws the shadow. Default: false.
plotOptions.radialBar.track.dropShadow.top number Vertical shadow distance in pixels. Default: 2.
plotOptions.radialBar.track.dropShadow.left number Horizontal shadow distance in pixels. Default: 2.
plotOptions.radialBar.track.dropShadow.blur number Blur radius in pixels. Default: 4.
plotOptions.radialBar.track.dropShadow.opacity number Shadow opacity (0 to 1). Default: 0.7.
plotOptions.radialBar.track.dropShadow.color string Shadow colour. Default: '#000'.
plotOptions.radialBar.dataLabels object Texts in the centre.
plotOptions.radialBar.dataLabels.readability WccReadability West Coast Charts: readability of the centre labels (features/readability)
plotOptions.radialBar.dataLabels.readability.mode 'none' | 'halo' | 'pill' | 'auto' | 'hide' '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 'pill' | 'halo' | 'hide' what 'auto' escalates to over mixed fills or when no text colour reaches minRatio. Default 'pill'
plotOptions.radialBar.dataLabels.readability.enabled boolean false switches the treatment off for this label kind
plotOptions.radialBar.dataLabels.readability.contrast boolean swap the text to light/dark when it misses minRatio against what is under it (any mode)
plotOptions.radialBar.dataLabels.readability.minRatio number WCAG 2 contrast ratio to reach. Default 4.5
plotOptions.radialBar.dataLabels.readability.light string text/backdrop colour pair used by contrast and 'auto' fills. Defaults '#ffffff' / '#111827'
plotOptions.radialBar.dataLabels.readability.dark string Dark colour of the pair. Default: '#111827'.
plotOptions.radialBar.dataLabels.readability.background 'auto' | string colour under the chart; 'auto' = chart.background, else the first opaque ancestor
plotOptions.radialBar.dataLabels.readability.halo object outline behind the glyphs; blur > 0 makes it a soft glow. Defaults width 3, color 'auto' (chart background), opacity 0.92
plotOptions.radialBar.dataLabels.readability.halo.width number Outline width in pixels. Default: 3.
plotOptions.radialBar.dataLabels.readability.halo.color 'auto' | string Outline colour; 'auto' uses the colour under the label or a contrasting one. Default: 'auto'.
plotOptions.radialBar.dataLabels.readability.halo.opacity number Outline opacity (0 to 1). Default: 0.92.
plotOptions.radialBar.dataLabels.readability.halo.blur number Blur in pixels; above 0 the outline becomes a soft glow. Default: 0.
plotOptions.radialBar.dataLabels.readability.pill object 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 'auto' | string Box colour; 'auto' uses the colour under the label or a contrasting one. Default: 'auto'.
plotOptions.radialBar.dataLabels.readability.pill.opacity number Box opacity (0 to 1). Default: 0.9.
plotOptions.radialBar.dataLabels.readability.pill.radius number Corner radius in pixels. Default: 4.
plotOptions.radialBar.dataLabels.readability.pill.padding number | [number, number] Space around the text in pixels: one number, or [vertical, horizontal]. Default: [1, 4].
plotOptions.radialBar.dataLabels.readability.pill.stroke string Outline colour of the box. Default: 'none'.
plotOptions.radialBar.dataLabels.readability.pill.strokeWidth number Outline width in pixels. Default: 1.
plotOptions.radialBar.dataLabels.readability.pill.offset [number, number] Shift of the box as [dx, dy] in pixels. Default: [0, 0].
plotOptions.radialBar.dataLabels.readability.shadow object | boolean drop shadow on the pill (on the text in halo mode)
plotOptions.radialBar.dataLabels.readability.shadow.dx number Horizontal shadow offset in pixels. Default: 0.
plotOptions.radialBar.dataLabels.readability.shadow.dy number Vertical shadow offset in pixels. Default: 1.
plotOptions.radialBar.dataLabels.readability.shadow.blur number Shadow blur in pixels. Default: 2.
plotOptions.radialBar.dataLabels.readability.shadow.color string Shadow colour. Default: '#000000'.
plotOptions.radialBar.dataLabels.readability.shadow.opacity number Shadow opacity (0 to 1). Default: 0.35.
plotOptions.radialBar.dataLabels.readability.raise boolean axis labels sitting on marks are moved above the series (default true)
plotOptions.radialBar.dataLabels.readability.each (info: WccReadabilityInfo) => WccReadability | null | undefined per label: return an override (or 'none') for this one label; called only when set
plotOptions.radialBar.dataLabels.show boolean Shows the centre texts. Default: true.
plotOptions.radialBar.dataLabels.name object Upper text: name of the series.
plotOptions.radialBar.dataLabels.name.show boolean Shows the name. Default: true.
plotOptions.radialBar.dataLabels.name.fontFamily string Font family of the name.
plotOptions.radialBar.dataLabels.name.fontWeight string | number Font weight of the name. Default: 600.
plotOptions.radialBar.dataLabels.name.fontSize string Font size of the name. Default: '16px'.
plotOptions.radialBar.dataLabels.name.color string Colour of the name; not set uses the series colour.
plotOptions.radialBar.dataLabels.name.offsetY number Moves the name vertically. Default: 0.
plotOptions.radialBar.dataLabels.value object Lower text: the value.
plotOptions.radialBar.dataLabels.value.show boolean Shows the value. Default: true.
plotOptions.radialBar.dataLabels.value.fontFamily string Font family of the value.
plotOptions.radialBar.dataLabels.value.fontSize string Font size of the value. Default: '14px'.
plotOptions.radialBar.dataLabels.value.fontWeight string | number Font weight of the value. Default: 400.
plotOptions.radialBar.dataLabels.value.color string Colour of the value; not set uses chart.foreColor.
plotOptions.radialBar.dataLabels.value.offsetY number Moves the value vertically. Default: 16.
plotOptions.radialBar.dataLabels.value.formatter() (val: number): string Function that returns the value text. The built-in one appends '%'.
plotOptions.radialBar.dataLabels.total object Combined text for several series, shown while none is hovered.
plotOptions.radialBar.dataLabels.total.show boolean Shows the total. Default: false.
plotOptions.radialBar.dataLabels.total.label string Text shown in place of a series name. Default: 'Total'.
plotOptions.radialBar.dataLabels.total.color string Colour of the total label.
plotOptions.radialBar.dataLabels.total.fontFamily string Font family of the total label.
plotOptions.radialBar.dataLabels.total.fontWeight string | number Font weight of the total label. Default: 600.
plotOptions.radialBar.dataLabels.total.fontSize string Font size of the total label. Default: '16px'.
plotOptions.radialBar.dataLabels.total.formatter() (opts: any): string Function that returns the total value text. The built-in one averages the series values and appends '%'.
plotOptions.radialBar.barLabels object Series names written at the start of each bar.
plotOptions.radialBar.barLabels.enabled boolean Shows the bar labels. Default: false.
plotOptions.radialBar.barLabels.offsetX number Moves the bar labels horizontally. Default: 0.
plotOptions.radialBar.barLabels.offsetY number Moves the bar labels vertically. Default: 0.
plotOptions.radialBar.barLabels.useSeriesColors boolean Colours each bar label with its series colour. Default: true.
plotOptions.radialBar.barLabels.fontFamily string Font family of the bar labels.
plotOptions.radialBar.barLabels.fontWeight string | number Font weight of the bar labels. Default: 600.
plotOptions.radialBar.barLabels.fontSize string Font size of the bar labels. Default: '16px'.
plotOptions.radialBar.barLabels.formatter (barName: string, opts?: any) => string Function that returns the bar label text. The built-in one returns the series name.
plotOptions.radialBar.barLabels.onClick (barName: string, opts?: any) => void Called when a bar label is clicked.
plotOptions.radialBar.shape 'arc' | 'needle' 'arc' fills the ring up to the value; 'needle' points a needle at it. Default: 'arc'.
plotOptions.radialBar.min number Value at the start of the gauge. Default: 0.
plotOptions.radialBar.max number Value at the end of the gauge. Default: 100.
plotOptions.radialBar.bands object[] coloured value ranges along the track
plotOptions.radialBar.bands[].from number Start value of the band.
plotOptions.radialBar.bands[].to number End value of the band.
plotOptions.radialBar.bands[].color WccColor Band colour.
plotOptions.radialBar.bands[].label string Band name, shown as the band's SVG title and added to the accessible value text.
plotOptions.radialBar.bandsStyle object Look of the bands ring.
plotOptions.radialBar.bandsStyle.strokeWidth string | number Band thickness as a share of the track thickness or in pixels. Default: '40%'.
plotOptions.radialBar.bandsStyle.gap number px along the arc
plotOptions.radialBar.bandsStyle.hideTrackWhenPresent boolean Hides the background track when bands are defined. Default: false.
plotOptions.radialBar.bandsStyle.linecap 'butt' | 'round' | 'square' Ends of each band: 'butt', 'round' or 'square'. Default: 'butt'.
plotOptions.radialBar.bandsStyle.align 'outer' | 'center' 'outer' aligns the bands to the outer edge of the track, 'center' centres them
plotOptions.radialBar.ticks object Scale ticks and labels around the ring.
plotOptions.radialBar.ticks.show boolean Draws the ticks. Default: false.
plotOptions.radialBar.ticks.major object Major ticks, carrying the labels.
plotOptions.radialBar.ticks.major.count number Number of major ticks including both ends (at least 2). Default: 11.
plotOptions.radialBar.ticks.major.length number Tick length in pixels. Default: 10.
plotOptions.radialBar.ticks.major.width number Tick width in pixels. Default: 1.5.
plotOptions.radialBar.ticks.major.color WccColor Tick colour; not set uses the theme's muted text colour.
plotOptions.radialBar.ticks.major.placement 'outside' | 'inside' | 'center' '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 object Minor ticks between the major ticks.
plotOptions.radialBar.ticks.minor.count number Minor ticks between two neighbouring major ticks. Default: 4.
plotOptions.radialBar.ticks.minor.length number Tick length in pixels. Default: 5.
plotOptions.radialBar.ticks.minor.width number Tick width in pixels. Default: 1.
plotOptions.radialBar.ticks.minor.color WccColor Tick colour; not set uses the theme's muted text colour.
plotOptions.radialBar.ticks.minor.placement 'outside' | 'inside' | 'center' 'outside', 'inside' or 'center' (as for the major ticks); not set follows the major ticks.
plotOptions.radialBar.ticks.labels object Value labels at the major ticks.
plotOptions.radialBar.ticks.labels.show boolean Draws the labels. Default: true.
plotOptions.radialBar.ticks.labels.offset number Distance of the labels from the ticks in pixels. Default: 6.
plotOptions.radialBar.ticks.labels.fontSize string | number Font size; not set uses the theme size.
plotOptions.radialBar.ticks.labels.fontFamily string Font family; not set uses the chart font.
plotOptions.radialBar.ticks.labels.fontWeight string | number Font weight. Default: 500.
plotOptions.radialBar.ticks.labels.color WccColor Label colour; not set uses the theme's muted text colour.
plotOptions.radialBar.ticks.labels.formatter (value: number) => string Returns the label text for a tick value.
plotOptions.radialBar.needle object Needle settings (shape 'needle').
plotOptions.radialBar.needle.color WccColor Needle colour; not set uses the first series colour.
plotOptions.radialBar.needle.length number | string px or a share of the radius; default clears the inner edge of the ring
plotOptions.radialBar.needle.baseWidth number Width of the needle at its hub in pixels. Default: 8.
plotOptions.radialBar.needle.tipWidth number Width of the needle tip in pixels. Default: 1.5.
plotOptions.radialBar.needle.showValueArc boolean Also fills the ring up to the value. Default: false.
plotOptions.radialBar.needle.offsetY number Vertical shift of the needle hub in pixels. Default: 0.
plotOptions.radialBar.needle.animation object Needle animation.
plotOptions.radialBar.needle.animation.enabled boolean false moves the needle without animation. Default: true.
plotOptions.radialBar.needle.animation.duration number Duration in milliseconds; not set uses the chart animation speed.
plotOptions.radialBar.needle.animation.easing string | ((t: number) => number) | [number, number, number, number] 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 object Settings of funnel and pyramid charts.
plotOptions.funnel.shape 'rectangle' | 'trapezoid' 'rectangle' draws each stage as a bar; 'trapezoid' joins the stages into slanted segments. Default: 'rectangle'.
plotOptions.funnel.lastShape 'flat' | 'taper' Shape of the last stage: 'flat' or 'taper' (narrows to a point). Default: 'flat'.
plotOptions.waterfall object Settings of waterfall charts.
plotOptions.waterfall.colors object Colours of the bar kinds.
plotOptions.waterfall.colors.positive WccColor Colour of increases. Default: '#00A86F'.
plotOptions.waterfall.colors.negative WccColor Colour of decreases. Default: '#FF4560'.
plotOptions.waterfall.colors.subtotal WccColor Colour of subtotal bars (isSubtotal data points); not set uses the theme colour.
plotOptions.waterfall.colors.total WccColor Colour of total bars (isTotal data points); not set uses the theme colour.
plotOptions.waterfall.connectors object Lines joining the end of one bar to the start of the next.
plotOptions.waterfall.connectors.show boolean Draws the connectors. Default: true.
plotOptions.waterfall.connectors.color WccColor Connector colour; not set uses the theme colour.
plotOptions.waterfall.connectors.strokeWidth number Connector width in pixels. Default: 1.
plotOptions.waterfall.connectors.strokeDashArray number Dash length of the connectors; 0 is solid. Default: 3.
plotOptions.sunburst object Settings of sunburst charts (nested rings from series data with children).
plotOptions.sunburst.offsetX number Horizontal shift of the sunburst in pixels. Default: 0.
plotOptions.sunburst.offsetY number Vertical shift of the sunburst in pixels. Default: 0.
plotOptions.sunburst.startAngle number Angle in degrees where the rings begin. Default: 0.
plotOptions.sunburst.endAngle number Angle in degrees where the rings end. Default: 360.
plotOptions.sunburst.innerSize string | number Size of the empty centre: a percentage of the radius or pixels. Default: '15%'.
plotOptions.sunburst.borderRadius number Corner radius of the arcs in pixels. Default: 0.
plotOptions.sunburst.spacing number Gap between arcs in pixels. Default: 1.
plotOptions.sunburst.leaf 'extend' | 'stop' 'extend' stretches leaf arcs to the outer ring; 'stop' keeps them one ring deep. Default: 'extend'.
plotOptions.sunburst.partition 'normalize' | 'strict' '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 number How much deeper levels are lightened from their branch colour (0 to 1). Default: 0.14.
plotOptions.sunburst.colorBy 'branch' | 'name' 'branch' gives each top-level branch a palette colour; 'name' colours nodes by their name. Default: 'branch'.
plotOptions.sunburst.zoomOnClick boolean Clicking an arc zooms into that branch. Default: true.
plotOptions.sunburst.dataLabels WccPartitionLabels Labels on the arcs.
plotOptions.sunburst.dataLabels.show boolean Draws the labels. Default: true.
plotOptions.sunburst.dataLabels.showValue boolean Adds the value under the name where there is room (sunburst default: true; icicle: false).
plotOptions.sunburst.dataLabels.style WccTextStyle Text style (fontSize default '12px', fontWeight 500).
plotOptions.sunburst.dataLabels.style.fontSize string | number Font size.
plotOptions.sunburst.dataLabels.style.fontFamily string Font family; not set uses the chart font.
plotOptions.sunburst.dataLabels.style.fontWeight string | number Font weight.
plotOptions.sunburst.dataLabels.style.colors string[] Text colours; an array gives one per series or item.
plotOptions.sunburst.dataLabels.minAngleToShow number Arcs narrower than this many degrees get no label. Default: 8.
plotOptions.icicle object Settings of icicle charts (hierarchy drawn as stacked bands).
plotOptions.icicle.direction 'down' | 'up' | 'right' | 'left' Direction the levels grow from the root: 'down', 'up', 'right' or 'left'. Default: 'down'.
plotOptions.icicle.levelSize 'equal' | string | number Thickness of a level: 'equal' splits the space evenly; a pixel value or percentage fixes it. Default: 'equal'.
plotOptions.icicle.maxDepth 'auto' | number Number of levels shown at once; 'auto' shows all. Default: 'auto'.
plotOptions.icicle.spacing number Gap between cells in pixels. Default: 1.
plotOptions.icicle.borderRadius number Corner radius of the cells in pixels. Default: 0.
plotOptions.icicle.leaf 'extend' | 'stop' 'extend' stretches leaf cells to the last level; 'stop' keeps them one level deep. Default: 'stop'.
plotOptions.icicle.partition 'normalize' | 'strict' '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 'none' | 'value' | 'name' Order of siblings: 'none' keeps the data order, 'value' sorts largest first, 'name' alphabetically. Default: 'none'.
plotOptions.icicle.tint number How much deeper levels are lightened from their branch colour (0 to 1). Default: 0.
plotOptions.icicle.colorBy 'branch' | 'name' 'branch' gives each top-level node a palette colour; 'name' colours nodes by their name. Default: 'branch'.
plotOptions.icicle.zoomOnClick boolean Clicking a cell zooms into that branch. Default: true.
plotOptions.icicle.zoomType 'value' | 'both' 'value' rescales only the value axis on zoom; 'both' also rescales the levels. Default: 'value'.
plotOptions.icicle.dataLabels WccPartitionLabels Labels in the cells.
plotOptions.icicle.dataLabels.show boolean Draws the labels. Default: true.
plotOptions.icicle.dataLabels.showValue boolean Adds the value under the name where there is room (sunburst default: true; icicle: false).
plotOptions.icicle.dataLabels.style WccTextStyle Text style (fontSize default '12px', fontWeight 500).
plotOptions.icicle.dataLabels.style.fontSize string | number Font size.
plotOptions.icicle.dataLabels.style.fontFamily string Font family; not set uses the chart font.
plotOptions.icicle.dataLabels.style.fontWeight string | number Font weight.
plotOptions.icicle.dataLabels.style.colors string[] Text colours; an array gives one per series or item.
plotOptions.icicle.dataLabels.minSizeToShow number Cells smaller than this many pixels get no label. Default: 30.
plotOptions.icicle.dataLabels.align string Alignment of the label inside its cell. Default: 'center'.
plotOptions.icicle.dataLabels.rotate 'auto' | 'always' | 'never' 'auto' rotates labels when that fits better, 'always' always, 'never' never. Default: 'auto'.
plotOptions.unit object Settings of unit (waffle) charts: one mark per unit of value.
plotOptions.unit.layout 'grouped' | 'packed' | 'columns' | 'grid' | 'scatter' | 'arc' | 'custom' How marks are arranged: 'grouped' (one cluster per category), 'packed', 'columns', 'grid', 'scatter', 'arc' or 'custom'. Default: 'grouped'.
plotOptions.unit.positions WccUnitShape | string | WccCallback custom layouts: fn(objects, rect), a registered layout name or a unit shape
plotOptions.unit.positions.isUnitShape true
plotOptions.unit.positions.name string
plotOptions.unit.positions.kind string
plotOptions.unit.positions.category string
plotOptions.unit.positions.minUnits number
plotOptions.unit.positions.order any
plotOptions.unit.positions.source any
plotOptions.unit.positions.rings any[]
plotOptions.unit.positions.shape object Shape metadata.
plotOptions.unit.positions.fill (...args: any[]) => any Places the units inside the outline.
plotOptions.unit.positions.with (opts: any) => WccUnitShape A variant with other settings.
plotOptions.unit.positions.outlined (thickness?: number) => WccUnitShape A hollow variant.
plotOptions.unit.scatter object Settings of the 'scatter' layout.
plotOptions.unit.scatter.y 'lanes' | 'value' '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 'horizontal' | 'vertical' Lanes only: 'vertical' turns the lanes into columns with the value axis running up. Default: 'horizontal'.
plotOptions.unit.scatter.spread 'swarm' | 'jitter' Lanes only: how marks spread across the lane, 'swarm' (no overlap) or 'jitter' (fixed pseudo-random offset). Default: 'swarm'.
plotOptions.unit.scatter.xTitle string Title of the x (value) axis.
plotOptions.unit.scatter.yTitle string Title of the y axis (y: 'value').
plotOptions.unit.scatter.xFormatter (value: number) => string Formats the x tick labels.
plotOptions.unit.scatter.yFormatter (value: number) => string Formats the y tick labels (y: 'value').
plotOptions.unit.scatter.xMin number Lower end of the x axis; not set uses the data minimum.
plotOptions.unit.scatter.xMax number Upper end of the x axis; not set uses the data maximum.
plotOptions.unit.scatter.yMin number Lower end of the y axis (y: 'value').
plotOptions.unit.scatter.yMax number Upper end of the y axis (y: 'value').
plotOptions.unit.scatter.tickAmount number Number of x ticks.
plotOptions.unit.scatter.yTickAmount number Number of y ticks (y: 'value').
plotOptions.unit.scatter.laneLabelWidth number Width of the lane label column in pixels.
plotOptions.unit.scatter.gridlines boolean Draws the gridlines. Default: true.
plotOptions.unit.scatter.sizeField string Data field that sizes the marks (bubble scatter). Default: 'z'.
plotOptions.unit.scatter.sizeRange [number, number] Smallest and largest mark radius in pixels for sizeField.
plotOptions.unit.transition 'group' | 'flow' | 'identity' How marks are matched between updates: 'group', 'flow' or 'identity'. Default: 'group'.
plotOptions.unit.shape 'circle' | 'square' | 'image' | 'pictogram' Shape of a mark: 'circle', 'square', 'image' or 'pictogram'. Default: 'circle'.
plotOptions.unit.image object Image used when shape is 'image'.
plotOptions.unit.image.src string Image URL.
plotOptions.unit.image.width number Image width in pixels; not set fits the mark.
plotOptions.unit.image.height number Image height in pixels; not set fits the mark.
plotOptions.unit.image.tint boolean Tints the image with the series colour. Default: false.
plotOptions.unit.pictogram object Icon used when shape is 'pictogram'.
plotOptions.unit.pictogram.mark WccUnitMark 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 string
plotOptions.unit.pictogram.mark.path string
plotOptions.unit.pictogram.mark.viewBox string | [number, number, number, number]
plotOptions.unit.pictogram.mark.name string
plotOptions.unit.pictogram.fit 'contain' | 'cover' | string How the icon fits its box: 'contain', 'cover', 'width' or 'height'. Default: 'contain'.
plotOptions.unit.pictogram.scale number Size factor of the icon. Default: 1.
plotOptions.unit.pictogram.padding number Space around the icon. Default: 0.
plotOptions.unit.pictogram.fallback string Shape drawn when the icon is not available: 'circle' or 'square'. Default: 'circle'.
plotOptions.unit.pictogram.outline boolean Draws the icon as an outline instead of filled. Default: false.
plotOptions.unit.pictogram.outlineWidth number Outline width in screen pixels. Default: 1.5.
plotOptions.unit.size 'auto' | number Mark radius in pixels; 'auto' fits the marks to the space. Default: 'auto'.
plotOptions.unit.columns object Settings of the 'columns' layout.
plotOptions.unit.columns.size 'inherit' | number Fixed mark size in the columns; 'inherit' uses unit.size. Default: 'inherit'.
plotOptions.unit.grid object Settings of the 'grid' (waffle) layout.
plotOptions.unit.grid.columns number Cells per row. Default: 10.
plotOptions.unit.grid.total number Total number of cells; empty cells are drawn in the track colour.
plotOptions.unit.grid.fillFrom 'bottom' | 'top' | string Edge the grid fills from: 'bottom' or 'top'. Default: 'bottom'.
plotOptions.unit.grid.split boolean Draws one small waffle per category instead of one shared grid. Default: false.
plotOptions.unit.grid.tileColumns number Number of small waffles per row when split is on; not set chooses automatically.
plotOptions.unit.grid.max number Value that fills a whole small waffle when split is on.
plotOptions.unit.grid.trackColor WccColor Colour of empty cells; not set uses the theme track colour.
plotOptions.unit.arc object Settings of the 'arc' (parliament) layout.
plotOptions.unit.arc.startAngle number Start angle in degrees. Default: -90.
plotOptions.unit.arc.endAngle number End angle in degrees. Default: 90.
plotOptions.unit.arc.innerRadiusRatio number Inner radius as a share of the outer radius, clamped to 0.05 to 0.95. Default: 0.4.
plotOptions.unit.arc.rows 'auto' | number Number of rows; 'auto' picks one. Default: 'auto'.
plotOptions.unit.gather object Animation of marks moving to their new place on updates.
plotOptions.unit.gather.easing string 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 number Overshoot of the 'outBack' easing. Default: 1.70158.
plotOptions.unit.gather.enter string How new marks appear: 'burst' (from the cluster centre), 'rise' (from below) or 'fade'. Default: 'burst'.
plotOptions.unit.gather.motion string 'spring', 'tween' or 'auto' (spring unless a custom easing is set). Default: 'auto'.
plotOptions.unit.gather.spring string Spring preset: 'crisp', 'gentle' or 'snappy'. Default: 'crisp'.
plotOptions.unit.sizeByValue object Sizes each mark by its own value instead of drawing equal marks.
plotOptions.unit.sizeByValue.enabled boolean Turns value-based sizing on. Default: false.
plotOptions.unit.sizeByValue.maxRadius 'auto' | number Radius of the largest mark in pixels; 'auto' fits the space. Default: 'auto'.
plotOptions.unit.sizeByValue.minRadius number Radius of the smallest mark in pixels.
plotOptions.unit.sizeByValue.scale 'area' | string 'area' makes the mark area proportional to the value. Default: 'area'.
plotOptions.unit.spacing number Distance between mark centres as a multiple of the mark size. Default: 1.05.
plotOptions.unit.borderRadius number Corner radius of square marks.
plotOptions.unit.unitValue number how much one unit stands for
plotOptions.unit.maxUnits number Upper limit of marks; above it the counts are scaled down proportionally. Default: 5000.
plotOptions.unit.sortByGroup boolean Keeps marks of the same category together. Default: true.
plotOptions.unit.clusterLabels object Labels naming each cluster of marks.
plotOptions.unit.clusterLabels.show boolean Shows the labels; not set shows them for the grouped, columns and split-grid layouts.
plotOptions.unit.clusterLabels.position string Where the label sits; not set is 'bottom' for the columns layout and 'top' otherwise.
plotOptions.unit.clusterLabels.curved boolean Bends the label along the cluster edge. Default: false.
plotOptions.unit.clusterLabels.color WccColor Label colour; not set uses the theme text colour.
plotOptions.unit.clusterLabels.offsetY number Vertical shift of the labels in pixels. Default: 0.
plotOptions.unit.clusterLabels.formatter WccCallback Returns the label text for a cluster.
plotOptions.unit.clusterLabels.fontSize string Font size of the labels. Default: '12px'.
plotOptions.unit.clusterLabels.fontFamily string Font family; not set uses the chart font.
plotOptions.unit.clusterLabels.fontWeight string | number Font weight of the labels. Default: 600.
plotOptions.unit.clusterLabels.external object Labels placed outside the clusters with a connector line.
plotOptions.unit.clusterLabels.external.show boolean Moves the labels outside. Default: false.
plotOptions.unit.clusterLabels.external.offsetX number Horizontal shift of the external labels in pixels. Default: 0.
plotOptions.unit.clusterLabels.external.offsetY number Vertical shift of the external labels in pixels. Default: 0.
plotOptions.unit.clusterLabels.external.connector object Line from the cluster to its external label.
plotOptions.unit.clusterLabels.external.connector.show boolean Draws the connector. Default: true.
plotOptions.unit.clusterLabels.external.connector.width number Connector width in pixels. Default: 1.
plotOptions.unit.clusterLabels.external.connector.color WccColor Connector colour; not set uses the theme colour.
plotOptions.unit.clusterLabels.external.connector.gap number Gap between the cluster and the connector in pixels. Default: 4.
plotOptions.unit.clusterLabels.external.connector.length number Connector length in pixels. Default: 16.
plotOptions.unit.tooltip object Tooltip of the unit chart.
plotOptions.unit.tooltip.formatter WccCallback Returns the tooltip content for a hovered mark.
plotOptions.streamgraph object Settings of streamgraphs (stacked areas around a moving baseline).
plotOptions.streamgraph.offset 'wiggle' | 'silhouette' | 'zero' | 'expand' Baseline of the stack: 'wiggle', 'silhouette' (centred), 'zero' or 'expand' (normalised to the full height). Default: 'wiggle'.
plotOptions.streamgraph.order 'inside-out' | 'inverse' | 'none' Stacking order: 'inside-out', 'inverse' or 'none' (series order). Default: 'inside-out'.
plotOptions.streamgraph.hover object Dimming of the other layers while one is hovered.
plotOptions.streamgraph.hover.show boolean Dims the other layers on hover. Default: true.
plotOptions.streamgraph.hover.opacity number Opacity of the dimmed layers. Default: 0.35.
plotOptions.streamgraph.labels object Series names drawn inside the layers.
plotOptions.streamgraph.labels.show boolean Draws the labels. Default: true.
plotOptions.streamgraph.labels.minWidth number Layers narrower than this many pixels get no label. Default: 24.
plotOptions.streamgraph.labels.minFontSize number Smallest automatic font size in pixels. Default: 9.
plotOptions.streamgraph.labels.maxFontSize number Largest automatic font size in pixels. Default: 30.
plotOptions.streamgraph.labels.style object Text style of the labels.
plotOptions.streamgraph.labels.style.fontSize 'auto' | string Font size; 'auto' scales it with the layer thickness. Default: 'auto'.
plotOptions.streamgraph.labels.style.fontFamily string Font family; not set uses the chart font.
plotOptions.streamgraph.labels.style.fontWeight string | number Font weight. Default: 600.
plotOptions.streamgraph.labels.style.colors string[] Label colours, one per series; not set picks a contrasting colour.
plotOptions.calendar object Settings of calendar heatmaps.
plotOptions.calendar.weekStart number 0 = Sunday ... 6 = Saturday
plotOptions.calendar.start WccDate First day shown ('YYYY-MM-DD', Date or timestamp); not set uses the first data day.
plotOptions.calendar.end WccDate Last day shown; not set uses the last data day.
plotOptions.calendar.aggregate 'sum' | 'max' | 'min' | 'mean' | 'last' several values on one day
plotOptions.calendar.dayLabels 'alternate' | 'all' | false Weekday labels: 'alternate' (every second day), 'all', or false for none. Default: 'alternate'.
plotOptions.calendar.dayNames string[] 7 names, starting with Sunday
plotOptions.calendar.monthNames string[] Twelve month names, January first; not set uses the locale.
plotOptions.calendar.emptyColor WccColor Colour of days in range without a value; not set uses the theme.
plotOptions.calendar.color WccColor Base colour of the day cells.
plotOptions.calendar.formatter WccCallback Formats the value shown for a day.
plotOptions.barRace object Settings of bar race charts.
plotOptions.barRace.maxBars number Number of bars shown; the rest wait below the cut. Default: 10.
plotOptions.barRace.sort 'desc' | 'asc' 'desc' puts the largest value on top; 'asc' the smallest. Default: 'desc'.
plotOptions.barRace.nulls 'dash' | 'hide' 'dash' keeps a row without a value and shows values.nullLabel; 'hide' drops it. Default: 'dash'.
plotOptions.barRace.speed number ms per update
plotOptions.barRace.colors string[] | string Palette name or colour list for the bars; not set uses the theme colours.
plotOptions.barRace.labels object Names beside the bars.
plotOptions.barRace.labels.show boolean Draws the names. Default: true.
plotOptions.barRace.labels.fontSize number Font size of the names in pixels. Default: 12.5.
plotOptions.barRace.values object Values at the end of the bars.
plotOptions.barRace.values.show boolean Draws the values. Default: true.
plotOptions.barRace.values.fontSize number Font size of the values in pixels.
plotOptions.barRace.values.decimals number Fixed number of decimals; not set uses the locale's compact notation.
plotOptions.barRace.values.formatter WccCallback Returns the value text.
plotOptions.barRace.values.nullLabel string Text of a row without a value. Default: '–'.
plotOptions.barRace.ticker object Large period label in the background.
plotOptions.barRace.ticker.show boolean Draws the ticker. Default: true.
plotOptions.barRace.ticker.text string | number | ((opts: { w: any }) => string) 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 number Font size of the ticker in pixels.
plotOptions.barRace.ticker.color WccColor Ticker colour.
plotOptions.barRace.ticker.opacity number Ticker opacity. Default: 0.55.
plotOptions.barRace.cut object Line under the last shown bar when more names wait below it.
plotOptions.barRace.cut.show 'auto' | boolean 'auto' draws it when names wait below; true always; false never. Default: 'auto'.
plotOptions.barRace.cut.label string | false | ((opts: { shown: number total: number }) => string) 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 WccColor Colour of the cut line.
plotOptions.slope object Settings of slope charts.
plotOptions.slope.colorBy 'series' | 'direction' 'series' colours lines by series; 'direction' by up, down or flat. Default: 'series'.
plotOptions.slope.upColor WccColor Colour of rising lines with colorBy: 'direction'. Default: '#16a34a'.
plotOptions.slope.downColor WccColor Colour of falling lines with colorBy: 'direction'. Default: '#dc2626'.
plotOptions.slope.flatColor WccColor Colour of flat lines with colorBy: 'direction'. Default: '#94a3b8'.
plotOptions.slope.flatThreshold number |last - first| / |first| below this counts as flat
plotOptions.slope.highlight string[] series names drawn in colour; the others are muted
plotOptions.slope.mutedColor WccColor Colour of series not listed in highlight; not set uses a neutral grey for the mode.
plotOptions.slope.labels object Labels at both ends of the lines.
plotOptions.slope.labels.show boolean Draws the labels. Default: true.
plotOptions.slope.labels.left 'value' | 'name' | 'both' | false Left label content: 'value', 'name', 'both' or false. Default: 'value'.
plotOptions.slope.labels.right 'value' | 'name' | 'both' | false Right label content: 'value', 'name', 'both' or false. Default: 'both'.
plotOptions.slope.labels.fontSize number Font size in pixels. Default: 12.
plotOptions.slope.labels.minGap number Minimum vertical gap between labels in pixels. Default: 0.
plotOptions.slope.labels.formatter WccCallback Formats the label value.
plotOptions.slope.periods object Period names above the two axes.
plotOptions.slope.periods.show boolean Draws the period names. Default: true.
plotOptions.slope.periods.fontSize number Font size in pixels. Default: 12.
plotOptions.slope.hover object Dimming of the other lines while one is hovered.
plotOptions.slope.hover.opacity number Opacity of the dimmed lines. Default: 0.22.
plotOptions.beeswarm object Settings of beeswarm charts.
plotOptions.beeswarm.size number Dot radius in pixels; dots shrink towards minSize when a swarm is too wide. Default: 3.5.
plotOptions.beeswarm.minSize number Smallest dot radius in pixels. Default: 1.5.
plotOptions.beeswarm.padding number Gap between dots in pixels. Default: 1.
plotOptions.beeswarm.width string | number Width of a swarm as a share of the category slot or in pixels. Default: '88%'.
plotOptions.beeswarm.side 'both' | 'left' | 'right' | 'top' | 'bottom' Side the dots spread to: 'both', 'left', 'right', 'top' or 'bottom'. Default: 'both'.
plotOptions.beeswarm.maxPoints number Dots per category; above it the samples are thinned evenly. Default: 2000.
plotOptions.beeswarm.opacity number Dot opacity. Default: 0.92.
plotOptions.beeswarm.strokeWidth number Dot outline width; not set uses min(1, 0.3 × radius).
plotOptions.beeswarm.strokeColor WccColor Dot outline colour; '#fff' follows the surface colour in dark mode. Default: '#fff'.
plotOptions.beeswarm.colorScale WccColorScale Colours the dots by value instead of by series.
plotOptions.beeswarm.colorScale.colors string[] Colours from the lowest to the highest value.
plotOptions.beeswarm.colorScale.min number Value mapped to the first colour; not set uses the smallest sample.
plotOptions.beeswarm.colorScale.max number Value mapped to the last colour; not set uses the largest sample.
plotOptions.beeswarm.colorScale.steps number Number of discrete colour steps; not set gives a continuous scale.
plotOptions.beeswarm.median object Median line of each swarm.
plotOptions.beeswarm.median.show boolean Draws the median line. Default: true.
plotOptions.beeswarm.median.color WccColor Colour of the median line.
plotOptions.beeswarm.median.strokeWidth number Width of the median line in pixels. Default: 1.75.
plotOptions.violin object Settings of violin charts.
plotOptions.violin.bandwidthScale number Factor applied to the automatic kernel bandwidth; larger values give smoother shapes. Default: 1.
plotOptions.violin.kde object Kernel density estimate settings.
plotOptions.violin.kde.bandwidth number Fixed kernel bandwidth in data units; not set is estimated from the samples.
plotOptions.violin.kde.resolution number Number of points along each violin outline. Default: 64.
plotOptions.violin.normalize 'individual' | 'group' 'individual' scales each violin to its own peak; 'group' to the largest peak of all. Default: 'individual'.
plotOptions.violin.side 'both' | 'left' | 'right' | 'top' | 'bottom' Side drawn: 'both' (full violin), 'left', 'right', 'top' or 'bottom' (half violins). Default: 'both'.
plotOptions.violin.box object Box plot drawn inside the violin.
plotOptions.violin.box.show boolean Draws the inner box. Default: false.
plotOptions.violin.box.width string | number Box width as a share of the violin or in pixels. Default: '15%'.
plotOptions.violin.box.whiskers 'minmax' | 'tukey' | 'percentile' Whisker rule: 'minmax', 'tukey' (1.5 × IQR) or 'percentile'. Default: 'minmax'.
plotOptions.violin.box.strokeWidth number Outline width of the box in pixels. Default: 1.
plotOptions.violin.box.fillColor WccColor Fill colour of the box.
plotOptions.violin.box.capWidth number Width of the whisker caps as a share of the box width. Default: 0.5.
plotOptions.violin.points WccSamplePoints Raw samples drawn over the violins.
plotOptions.violin.points.show boolean | 'all' | 'outliers' false: none; true or 'all': every sample; 'outliers': only those outside the whiskers
plotOptions.violin.points.shape 'circle' | 'square' Point shape: 'circle' or 'square'. Default: 'circle'.
plotOptions.violin.points.size number Point radius in pixels. Default: 2.5.
plotOptions.violin.points.jitter number 0..1 of the lane width
plotOptions.violin.points.maxPoints number Upper limit of drawn points; above it the samples are thinned. Default: 3000.
plotOptions.violin.points.opacity number Point opacity. Default: 0.9.
plotOptions.violin.points.fillColor string 'series-dark' | 'series' | a colour
plotOptions.violin.points.strokeColor string Point outline colour. Default: '#fff'.
plotOptions.violin.points.strokeWidth number Point outline width in pixels. Default: 1.
plotOptions.violin.points.colorScale WccColorScale Colours the points by value instead of by series (violin default: 24 steps).
plotOptions.violin.points.colorScale.colors string[] Colours from the lowest to the highest value.
plotOptions.violin.points.colorScale.min number Value mapped to the first colour; not set uses the smallest sample.
plotOptions.violin.points.colorScale.max number Value mapped to the last colour; not set uses the largest sample.
plotOptions.violin.points.colorScale.steps number Number of discrete colour steps; not set gives a continuous scale.
plotOptions.violin.points.constrainToViolin boolean Keeps the jittered points inside the violin outline. Default: true.
plotOptions.violin.points.position 'center' | 'left' | 'right' | 'top' | 'bottom' Where the points lane sits: 'center', 'left', 'right', 'top' or 'bottom'. Default: 'center'.
plotOptions.violin.points.laneWidth string | number Width of the points lane as a share of the violin or in pixels. Default: '40%'.
plotOptions.histogram object Settings of histograms (raw values binned into bars).
plotOptions.histogram.bins 'auto' | number | number[] | string 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 number Fixed bin width in data units; overrides bins.
plotOptions.histogram.range [number, number] [min, max] of the binned range; not set uses the data extent.
plotOptions.histogram.normalize 'count' | 'relative' | 'density' Bar height: 'count', 'relative' (percent of the series) or 'density' (count / (n × bin width)). Default: 'count'.
plotOptions.histogram.cumulative boolean Each bar adds up all bins before it. Default: false.
plotOptions.histogram.overlap boolean 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 boolean 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 number Container width in pixels at and below which options apply.
responsive[].options any 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 string Series name shown in the legend, the tooltip and the accessible data table.
series[].type string Chart type of this series in a combined chart (for example 'column' next to 'line'); not set uses chart.type.
series[].color string Colour of this series; overrides the palette entry at its index.
series[].group string Stack name for stacked bar/column charts: series with the same group form one stack, different groups stand side by side.
series[].hidden boolean Starts the series hidden, as if switched off in the legend.
series[].zIndex number Drawing order of line and area series; higher numbers are drawn on top.
series[].data WccDatum 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 any The x value: category text, number or timestamp/date string, depending on xaxis.type.
series[].data.y any The y value; ranges and candlesticks take an array.
series[].data.fill ApexFill Fill of this single point (bar, area of a range), merged over fill.
series[].data.fill.colors any[] Fill colours; not set uses the series colours.
series[].data.fill.opacity number | number[] Fill opacity (0 to 1); an array gives one per series. Default: 0.85.
series[].data.fill.type string | string[] 'solid', 'gradient', 'pattern' or 'image'; an array gives one per series. Default: 'solid'.
series[].data.fill.gradient object Settings for type: 'gradient'.
series[].data.fill.gradient.shade string 'light' or 'dark': direction in which the series colour is shaded. Default: 'dark'.
series[].data.fill.gradient.type string Direction: 'horizontal', 'vertical', 'diagonal1', 'diagonal2' or 'radial'. Default: 'horizontal'.
series[].data.fill.gradient.shadeIntensity number Strength of the shading (0 to 1). Default: 0.5.
series[].data.fill.gradient.gradientToColors string[] End colours of the gradient per series; not set shades the series colour.
series[].data.fill.gradient.inverseColors boolean Swaps start and end colour for horizontal bars and similar shapes. Default: true.
series[].data.fill.gradient.opacityFrom number | number[] Opacity at the start of the gradient. Default: 1.
series[].data.fill.gradient.opacityTo number | number[] Opacity at the end of the gradient. Default: 1.
series[].data.fill.gradient.stops number[] Positions in percent where the gradient changes. Default: [0,50,100].
series[].data.fill.gradient.colorStops ApexColorStop[] Explicit stops; when set they replace the generated gradient. An array of arrays gives stops per series. Default: [].
series[].data.fill.gradient.colorStops[].offset number Position of the stop along the gradient, in percent (0 to 100).
series[].data.fill.gradient.colorStops[].color string Colour at this stop.
series[].data.fill.gradient.colorStops[].opacity number Opacity at this stop (0 to 1).
series[].data.fill.gradient.colorStops[].offset number Position of the stop along the gradient, in percent (0 to 100).
series[].data.fill.image object Settings for type: 'image'.
series[].data.fill.image.src string | string[] Image URL, or one URL per series. Default: [].
series[].data.fill.image.width number Width of the image tile in pixels; set together with height, otherwise the image is stretched to the shape.
series[].data.fill.image.height number Height of the image tile in pixels; set together with width.
series[].data.fill.pattern object Settings for type: 'pattern'.
series[].data.fill.pattern.style string | string[] 'verticalLines', 'horizontalLines', 'slantedLines', 'squares' or 'circles'; an array gives one per series. Default: 'squares'.
series[].data.fill.pattern.width number Width of the pattern tile in pixels. Default: 6.
series[].data.fill.pattern.height number Height of the pattern tile in pixels. Default: 6.
series[].data.fill.pattern.strokeWidth number Line width inside the pattern in pixels. Default: 2.
series[].data.fillColor string Colour of this single point.
series[].data.strokeColor string Outline colour of this single point.
series[].data.meta any Any extra data; not drawn, but available to formatters and event callbacks.
series[].data.goals object[] Target markers drawn across a bar or column at the given values.
series[].data.goals[].name string Name of the goal, shown in the tooltip and legend.
series[].data.goals[].value number Value at which the goal marker is drawn.
series[].data.goals[].strokeHeight number Thickness of the marker for vertical bars, in pixels.
series[].data.goals[].strokeWidth number Thickness of the marker for horizontal bars, in pixels.
series[].data.goals[].strokeColor string Colour of the goal marker.
series[].data.goals[].strokeDashArray number Dash length of the goal marker; 0 draws a solid line.
series[].data.goals[].strokeLineCap 'butt' | 'square' | 'round' Line ends of the goal marker.
series[].data.barHeightOffset number Pixels added to the height of this horizontal bar (centred).
series[].data.columnWidthOffset number Pixels added to the width of this column (centred).
series[].data.x any The x value: category text, number or timestamp/date string, depending on xaxis.type.
series[].data.points number[] Raw samples of a box plot point; quartiles and whiskers are computed from them.
series[].data.id string | number hierarchies (treemap, sunburst, icicle), tree and network nodes
series[].data.name string Display name of a node, slice or unit; used by labels, tooltips and the legend.
series[].data.value number | null Size of a hierarchy, sankey, chord or map item; null marks a missing value.
series[].data.children WccDatum[] & WccDatum[] Child items of a hierarchy node (treemap, sunburst, icicle, tree). Child items of a hierarchy node (treemap, sunburst, icicle, tree).
series[].data.isTotal boolean waterfall: bar that shows the running total / a subtotal
series[].data.isSubtotal boolean Waterfall: draws this bar as the running total since the previous subtotal.
series[].data.from any sankey, chord and map arcs
series[].data.to any Target node id (sankey, chord, network edges) or target location (map arcs and routes).
series[].data.highlight number | null highlight-filter feature: the filtered part of this mark
series[].data.color WccColor Colour of this item; overrides the series colour.
series[].data.nodes WccDatum[] Graph nodes (network, sankey, tree) when the graph is passed as data.
series[].data.edges WccDatum[] Network edges when the graph is passed as data.
series[].data.links WccDatum[] Sankey links when the graph is passed as data.
series[].name string Series name shown in the legend and tooltip.
series[].nodes WccDatum[] network
series[].nodes[].x any Category, timestamp or number of the point on the x axis (cartesian types, calendar dates, beeswarm groups).
series[].nodes[].y any Value of the point; an array for range-like types (e.g. [low, high] or box-plot quartiles).
series[].nodes[].id string | number hierarchies (treemap, sunburst, icicle), tree and network nodes
series[].nodes[].name string Display name of a node, slice or unit; used by labels, tooltips and the legend.
series[].nodes[].value number | null Size of a hierarchy, sankey, chord or map item; null marks a missing value.
series[].nodes[].children WccDatum[] Child items of a hierarchy node (treemap, sunburst, icicle, tree).
series[].nodes[].isTotal boolean waterfall: bar that shows the running total / a subtotal
series[].nodes[].isSubtotal boolean Waterfall: draws this bar as the running total since the previous subtotal.
series[].nodes[].points number[] raw samples: boxPlot, violin, raincloud, beeswarm
series[].nodes[].from any sankey, chord and map arcs
series[].nodes[].to any Target node id (sankey, chord, network edges) or target location (map arcs and routes).
series[].nodes[].highlight number | null highlight-filter feature: the filtered part of this mark
series[].nodes[].color WccColor Colour of this item; overrides the series colour.
series[].nodes[].fillColor string Fill colour of this item; overrides color for the fill.
series[].nodes[].strokeColor string Stroke colour of this item; overrides the series stroke colour.
series[].nodes[].meta any Free data kept with the item and passed to formatters and events; not drawn.
series[].edges Array<WccDatum | [string | number, string | number, number?]> Network edges: { from, to } objects or [from, to, weight?] tuples.
series[].links Array<WccDatum | [string | number, string | number, number?]> Sankey or network links: { from, to, value } objects or [from, to, value?] tuples.
series[].paths object[] Network: highlighted paths, each a node id sequence with a name, severity and colour.
series[].paths[].name string
series[].paths[].nodes Array<string | number>
series[].paths[].severity any
series[].paths[].color string
series[].highlightData (number | null)[] highlight-filter feature: the filtered part of every point
series[].marker string map marker series
series[].size number Map marker series: marker size in pixels.
series[].labels boolean Map marker series: draws a label next to each marker.
series[].lane string quintTimeline / quintConvergence: id of the lane (plotOptions.quint.lanes[].id) this series is drawn in.
series[].keys string[] | string quintTimeline / quintConvergence: semantic keys (service, cluster, region) for crossfilter across lanes. Default: [name].
series[].errorRate (number | null)[] quintTimeline / quintConvergence, events lane: error rate per slot in percent (0–100); colours the columns.
series[].typical (number | null)[] quintTimeline / quintConvergence, events lane: the typical day per slot, drawn as a dashed step line.
series[].availability number quintTimeline / quintConvergence, budget lane: availability target in percent, shown as "availability · p95 latency".
series[].p95 number 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 object Look of a hovered data point.
states.hover.filter object Filter applied to the hovered shape.
states.hover.filter.type string 'lighten', 'darken' or 'none'. Default: 'lighten'.
states.active object Look of a selected (clicked) data point.
states.active.allowMultipleDataPointsSelection boolean Lets several points be selected at once; a click on a selected one unselects it. Default: false.
states.active.filter object Filter applied to the selected shape.
states.active.filter.type string '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 boolean Draws lines and outlines. Default: true.
stroke.curve 'smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic' | ('smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic')[] Line shape between points: 'smooth', 'straight', 'stepline', 'linestep' or 'monotoneCubic'; an array gives one per series. Default: 'smooth'.
stroke.lineCap 'butt' | 'square' | 'round' Line ends: 'butt', 'square' or 'round'. Default: 'butt'.
stroke.colors any[] | string[] Line colours; not set uses the series colours.
stroke.width number | number[] Line width in pixels; an array gives one per series. Default: 2.
stroke.dashArray number | number[] Dash length in pixels; 0 draws solid lines; an array gives one per series. Default: 0.
stroke.fill ApexFill Fill of the line itself on area charts (for example a gradient line); same shape as fill.
stroke.fill.colors any[] Fill colours; not set uses the series colours.
stroke.fill.opacity number | number[] Fill opacity (0 to 1); an array gives one per series. Default: 0.85.
stroke.fill.type string | string[] 'solid', 'gradient', 'pattern' or 'image'; an array gives one per series. Default: 'solid'.
stroke.fill.gradient object Settings for type: 'gradient'.
stroke.fill.gradient.shade string 'light' or 'dark': direction in which the series colour is shaded. Default: 'dark'.
stroke.fill.gradient.type string Direction: 'horizontal', 'vertical', 'diagonal1', 'diagonal2' or 'radial'. Default: 'horizontal'.
stroke.fill.gradient.shadeIntensity number Strength of the shading (0 to 1). Default: 0.5.
stroke.fill.gradient.gradientToColors string[] End colours of the gradient per series; not set shades the series colour.
stroke.fill.gradient.inverseColors boolean Swaps start and end colour for horizontal bars and similar shapes. Default: true.
stroke.fill.gradient.opacityFrom number | number[] Opacity at the start of the gradient. Default: 1.
stroke.fill.gradient.opacityTo number | number[] Opacity at the end of the gradient. Default: 1.
stroke.fill.gradient.stops number[] Positions in percent where the gradient changes. Default: [0,50,100].
stroke.fill.gradient.colorStops ApexColorStop[] Explicit stops; when set they replace the generated gradient. An array of arrays gives stops per series. Default: [].
stroke.fill.gradient.colorStops[].offset number Position of the stop along the gradient, in percent (0 to 100).
stroke.fill.gradient.colorStops[].color string Colour at this stop.
stroke.fill.gradient.colorStops[].opacity number Opacity at this stop (0 to 1).
stroke.fill.gradient.colorStops[].offset number Position of the stop along the gradient, in percent (0 to 100).
stroke.fill.image object Settings for type: 'image'.
stroke.fill.image.src string | string[] Image URL, or one URL per series. Default: [].
stroke.fill.image.width number Width of the image tile in pixels; set together with height, otherwise the image is stretched to the shape.
stroke.fill.image.height number Height of the image tile in pixels; set together with width.
stroke.fill.pattern object Settings for type: 'pattern'.
stroke.fill.pattern.style string | string[] 'verticalLines', 'horizontalLines', 'slantedLines', 'squares' or 'circles'; an array gives one per series. Default: 'squares'.
stroke.fill.pattern.width number Width of the pattern tile in pixels. Default: 6.
stroke.fill.pattern.height number Height of the pattern tile in pixels. Default: 6.
stroke.fill.pattern.strokeWidth number Line width inside the pattern in pixels. Default: 2.

subtitle

Second title line under title.

Type: ApexTitleSubtitle

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

theme

Light/dark mode, colour palette and monochrome colouring.

Type: ApexTheme

Option Type Description
theme.accessibility object West Coast Charts: colour-vision palettes / high contrast
theme.accessibility.colorBlindMode '' | 'deuteranopia' | 'protanopia' | 'tritanopia' | 'highContrast' 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 'light' | 'dark' | 'auto' West Coast Charts: 'auto' follows prefers-color-scheme
theme.preset 'coastal' | 'midnight' | 'paper' | 'accessible' | 'classic' West Coast Charts: built-in design-token preset ('classic' = 4.7.0 look)
theme.tokens WccThemeTokens | boolean true: read --wcc-* / --apx-* CSS tokens (default); false: ignore them; object: token overrides
theme.tokens.fontFamily string Chart font family (CSS --wcc-font-family).
theme.tokens.fontSize string Base font size of labels, legend and tooltip (CSS --wcc-font-size); axis labels use one pixel less, at least 10px.
theme.tokens.text string Primary text colour: titles and centre values (CSS --wcc-text).
theme.tokens.textMuted string Secondary text colour: axis labels, legend, subtitle (CSS --wcc-text-muted).
theme.tokens.surface string Colour of surfaces drawn on top of the plot, such as marker outlines and slice separators (CSS --wcc-surface).
theme.tokens.background string Chart background colour (CSS --wcc-background).
theme.tokens.grid string Grid line colour; also radar polygons (CSS --wcc-grid).
theme.tokens.axis string Axis border, tick and crosshair colour (CSS --wcc-axis).
theme.tokens.track string Background track of radial bars and gauges (CSS --wcc-track).
theme.tokens.accent string Accent colour of hovered and selected menu items (CSS --wcc-accent).
theme.tokens.focusRing string Colour of the keyboard focus indicator (CSS --wcc-focus-ring).
theme.tokens.tooltipBg string Tooltip background (CSS --wcc-tooltip-bg).
theme.tokens.tooltipText string Tooltip text colour (CSS --wcc-tooltip-text).
theme.tokens.tooltipBorder string Tooltip border colour (CSS --wcc-tooltip-border).
theme.tokens.tooltipShadow string Tooltip box-shadow, any CSS shadow value (CSS --wcc-tooltip-shadow).
theme.tokens.radius string Corner radius of the tooltip (CSS --wcc-radius).
theme.tokens.radiusSm string Smaller corner radius of axis tooltips and legend items (CSS --wcc-radius-sm).
theme.tokens.barRadius string Bar corner radius in pixels, applied to the outer end (CSS --wcc-bar-radius).
theme.tokens.lineWidth string Stroke width of line-type series in pixels (CSS --wcc-line-width).
theme.tokens.gridDash string Dash length of grid lines; '0' is solid (CSS --wcc-grid-dash).
theme.tokens.motionDuration string Animation duration in milliseconds (CSS --wcc-motion-duration). Preset default: '650'.
theme.tokens.motionEasing string Animation easing name (CSS --wcc-motion-easing). Preset default: 'easeOutCubic'.
theme.tokens.palette string[] Series colours (CSS --wcc-palette as a comma-separated list).
theme.follow 'os' | false 'os': follow prefers-color-scheme
theme.name string theme registered with registerTheme()
theme.palette string Name of the built-in palette ('palette1' ... 'palette10'). Default: 'palette1'.
theme.monochrome object Derives all series colours from one base colour.
theme.monochrome.enabled boolean Turns monochrome colouring on. Default: false.
theme.monochrome.color string The base colour. Default: '#008FFB'.
theme.monochrome.shadeTo 'light' | 'dark' 'light' or 'dark': direction of the shades. Default: 'light'.
theme.monochrome.shadeIntensity number 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 string The text; not set draws nothing.
title.align 'left' | 'center' | 'right' 'left', 'center' or 'right'. Default: 'left'.
title.margin number Space in pixels below the text before the plot starts. Default: 5.
title.offsetX number Moves the text horizontally. Default: 0.
title.offsetY number Moves the text vertically. Default: 0 for title, 30 for subtitle.
title.floating boolean Takes the text out of the layout so the plot starts at the top. Default: false.
title.style object Text style.
title.style.fontSize string Font size. Default: '14px' for title, '12px' for subtitle.
title.style.fontFamily string Font family; not set uses chart.fontFamily.
title.style.fontWeight string | number Font weight. Default: 900 for title, 400 for subtitle.
title.style.color string Text colour; not set uses chart.foreColor.

tooltip

The box shown when hovering data points.

Type: ApexTooltip

Option Type Description
tooltip.enabled boolean Shows the tooltip. Default: true.
tooltip.enabledOnSeries undefined | number[] Indexes of the series that appear in the tooltip; not set means all series.
tooltip.shared boolean Shows all series at the hovered x position in one tooltip; false shows only the nearest series. Default: true.
tooltip.followCursor boolean Moves the tooltip with the pointer instead of anchoring it to the data point. Default: false.
tooltip.intersect boolean Shows the tooltip only while the pointer is over a marker or bar, not anywhere in its column. Default: false.
tooltip.inverseOrder boolean Lists the series in reverse order in a shared tooltip. Default: false.
tooltip.custom ((options: any) => any) | ((options: any) => any)[] Function (or one per series) returning the complete tooltip markup from { series, seriesIndex, dataPointIndex, w }; the output goes through chart.sanitizeHtml.
tooltip.fillSeriesColor boolean Uses the hovered series colour as tooltip background. Default: false.
tooltip.theme string Colour scheme of the tooltip box: 'light' or 'dark'. Default: 'light'.
tooltip.cssClass string CSS class added to the tooltip element. Default: ''.
tooltip.hideEmptySeries boolean Leaves out series that have no value at the hovered position. Default: false.
tooltip.style object Text style of the tooltip.
tooltip.style.fontSize string Font size of the tooltip text. Default: '12px'.
tooltip.style.fontFamily string Font family of the tooltip text; not set uses chart.fontFamily.
tooltip.onDatasetHover object What hovering a data point does to the other series.
tooltip.onDatasetHover.highlightDataSeries boolean Dims the other series while a point is hovered. Default: false.
tooltip.x object The header row of the tooltip (the x value).
tooltip.x.show boolean Shows the header row. Default: true.
tooltip.x.format string Date format of the header on datetime axes. Default: 'dd MMM'.
tooltip.x.formatter() (val: number, opts?: any): string Function that returns the header text from the x value.
tooltip.y ApexTooltipY Value rows of the tooltip; an array gives settings per series.
tooltip.y.title object Series name part of a tooltip row.
tooltip.y.title.formatter() (seriesName: string, opts?: any): string Function that returns the name text from the series name. The built-in one appends ': ' (and returns '' for an unnamed series).
tooltip.y.formatter() (val: number, opts?: any): string Function that returns the value text from the value and { series, seriesIndex, dataPointIndex, w }.
tooltip.y.title object Series name part of a tooltip row.
tooltip.y.title.formatter() (seriesName: string, opts?: any): string Function that returns the name text from the series name. The built-in one appends ': ' (and returns '' for an unnamed series).
tooltip.z object Third value of bubble charts (bubble size).
tooltip.z.title string Text in front of the z value. Default: 'Size: '.
tooltip.z.formatter() (val: number): string Function that returns the z text from the value.
tooltip.marker object The coloured dot in front of each tooltip row.
tooltip.marker.show boolean Shows the dot. Default: true.
tooltip.marker.fillColors string[] Dot colours; not set uses the series colours.
tooltip.items object Layout of the tooltip rows.
tooltip.items.display string CSS display value of each row ('flex' puts the dot and text side by side). Default: 'flex'.
tooltip.fixed object Pins the tooltip to a corner of the plot instead of next to the data point.
tooltip.fixed.enabled boolean Enables the pinned position. Default: false.
tooltip.fixed.position string Corner: 'topLeft', 'topRight', 'bottomLeft' or 'bottomRight'. Default: 'topRight'.
tooltip.fixed.offsetX number Moves the pinned tooltip horizontally. Default: 0.
tooltip.fixed.offsetY number 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 'category' | 'datetime' | 'numeric' 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 any Labels of the x positions when the series data are plain values; for datetime axes these can be dates. Default: [].
xaxis.overwriteCategories number[] | string[] | undefined Replaces the displayed x labels with these texts without changing the data or the scale.
xaxis.offsetX number Moves the x axis (labels, border, ticks) horizontally by this many pixels. Default: 0.
xaxis.offsetY number Moves the x axis vertically by this many pixels. Default: 0.
xaxis.sorted boolean Accepted for ApexCharts 4.x type compatibility; the renderer does not read it.
xaxis.labels object The text labels along the x axis.
xaxis.labels.readability WccReadability West Coast Charts: halo / pill / auto-contrast where labels overlap marks (features/readability)
xaxis.labels.readability.mode 'none' | 'halo' | 'pill' | 'auto' | 'hide' '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 'pill' | 'halo' | 'hide' what 'auto' escalates to over mixed fills or when no text colour reaches minRatio. Default 'pill'
xaxis.labels.readability.enabled boolean false switches the treatment off for this label kind
xaxis.labels.readability.contrast boolean swap the text to light/dark when it misses minRatio against what is under it (any mode)
xaxis.labels.readability.minRatio number WCAG 2 contrast ratio to reach. Default 4.5
xaxis.labels.readability.light string text/backdrop colour pair used by contrast and 'auto' fills. Defaults '#ffffff' / '#111827'
xaxis.labels.readability.dark string Dark colour of the pair. Default: '#111827'.
xaxis.labels.readability.background 'auto' | string colour under the chart; 'auto' = chart.background, else the first opaque ancestor
xaxis.labels.readability.halo object outline behind the glyphs; blur > 0 makes it a soft glow. Defaults width 3, color 'auto' (chart background), opacity 0.92
xaxis.labels.readability.halo.width number Outline width in pixels. Default: 3.
xaxis.labels.readability.halo.color 'auto' | string Outline colour; 'auto' uses the colour under the label or a contrasting one. Default: 'auto'.
xaxis.labels.readability.halo.opacity number Outline opacity (0 to 1). Default: 0.92.
xaxis.labels.readability.halo.blur number Blur in pixels; above 0 the outline becomes a soft glow. Default: 0.
xaxis.labels.readability.pill object 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 'auto' | string Box colour; 'auto' uses the colour under the label or a contrasting one. Default: 'auto'.
xaxis.labels.readability.pill.opacity number Box opacity (0 to 1). Default: 0.9.
xaxis.labels.readability.pill.radius number Corner radius in pixels. Default: 4.
xaxis.labels.readability.pill.padding number | [number, number] Space around the text in pixels: one number, or [vertical, horizontal]. Default: [1, 4].
xaxis.labels.readability.pill.stroke string Outline colour of the box. Default: 'none'.
xaxis.labels.readability.pill.strokeWidth number Outline width in pixels. Default: 1.
xaxis.labels.readability.pill.offset [number, number] Shift of the box as [dx, dy] in pixels. Default: [0, 0].
xaxis.labels.readability.shadow object | boolean drop shadow on the pill (on the text in halo mode)
xaxis.labels.readability.shadow.dx number Horizontal shadow offset in pixels. Default: 0.
xaxis.labels.readability.shadow.dy number Vertical shadow offset in pixels. Default: 1.
xaxis.labels.readability.shadow.blur number Shadow blur in pixels. Default: 2.
xaxis.labels.readability.shadow.color string Shadow colour. Default: '#000000'.
xaxis.labels.readability.shadow.opacity number Shadow opacity (0 to 1). Default: 0.35.
xaxis.labels.readability.raise boolean axis labels sitting on marks are moved above the series (default true)
xaxis.labels.readability.each (info: WccReadabilityInfo) => WccReadability | null | undefined per label: return an override (or 'none') for this one label; called only when set
xaxis.labels.show boolean Shows the x labels. Default: true.
xaxis.labels.rotate number Rotation in degrees applied when the labels would overlap (category axes). Default: -45.
xaxis.labels.rotateAlways boolean Rotates the labels even when they would fit. Default: false.
xaxis.labels.hideOverlappingLabels boolean Drops a label that would overlap the label drawn before it. Default: true.
xaxis.labels.showDuplicates boolean On datetime axes, false drops a label whose text repeats the previous label. Default: true.
xaxis.labels.trim boolean Cuts long labels to the available width and adds an ellipsis. Default: false.
xaxis.labels.minHeight number Minimum height in pixels reserved for the x labels.
xaxis.labels.maxHeight number Maximum height in pixels the (rotated) x labels may take; longer ones are cut. Default: 120.
xaxis.labels.style object Text style of the x labels.
xaxis.labels.style.colors string | string[] Label colour; an array gives one colour per label. Empty uses chart.foreColor. Default: [].
xaxis.labels.style.fontSize string Font size of the labels. Default: '12px'.
xaxis.labels.style.fontFamily string Font family of the labels; not set uses chart.fontFamily.
xaxis.labels.style.fontWeight string | number Font weight of the labels. Default: 400.
xaxis.labels.style.cssClass string CSS class added to every label text element. Default: ''.
xaxis.labels.offsetX number Moves the labels horizontally by this many pixels. Default: 0.
xaxis.labels.offsetY number Moves the labels vertically by this many pixels. Default: 0.
xaxis.labels.format string Date format string for datetime labels (for example 'dd MMM'); overrides datetimeFormatter.
xaxis.labels.formatter() (value: string, timestamp?: number, opts?: any): string | string[] Function that returns the text of each label from its value (and timestamp on datetime axes).
xaxis.labels.datetimeUTC boolean Formats datetime labels in UTC; false uses the browser's local time zone. Default: true.
xaxis.labels.datetimeFormatter object Date format per tick unit, chosen from the span of the visible range.
xaxis.labels.datetimeFormatter.year string Format of ticks that fall on a new year. Default: 'yyyy'.
xaxis.labels.datetimeFormatter.month string Format of ticks that fall on a new month. Default: 'MMM 'yy'.
xaxis.labels.datetimeFormatter.day string Format of ticks that fall on a new day. Default: 'dd MMM'.
xaxis.labels.datetimeFormatter.hour string Format of hour ticks. Default: 'HH:mm'.
xaxis.labels.datetimeFormatter.minute string Format of minute ticks. Default: 'HH:mm:ss'.
xaxis.labels.datetimeFormatter.second string Format of second ticks. Default: 'HH:mm:ss'.
xaxis.group object A second row of labels under the x labels that spans groups of categories.
xaxis.group.groups object[] The groups, left to right. Default: [].
xaxis.group.groups[].title string Text shown under the group.
xaxis.group.groups[].cols number Number of categories the group spans.
xaxis.group.style object Text style of the group labels.
xaxis.group.style.colors string | string[] Colour of the group labels; an array gives one per group. Default: [].
xaxis.group.style.fontSize string Font size of the group labels. Default: '12px'.
xaxis.group.style.fontFamily string Font family of the group labels.
xaxis.group.style.fontWeight string | number Font weight of the group labels. Default: 400.
xaxis.group.style.cssClass string CSS class added to the group label elements. Default: ''.
xaxis.axisBorder object The line along the x axis.
xaxis.axisBorder.show boolean Draws the axis line. Default: true.
xaxis.axisBorder.color string Colour of the axis line. Default: '#e0e0e0'.
xaxis.axisBorder.offsetX number Moves the axis line horizontally. Default: 0.
xaxis.axisBorder.offsetY number Moves the axis line vertically. Default: 0.
xaxis.axisBorder.strokeWidth number Accepted for ApexCharts 4.x type compatibility; the renderer does not read it.
xaxis.axisTicks object Short tick marks below the axis line.
xaxis.axisTicks.show boolean Draws the tick marks. Default: true.
xaxis.axisTicks.borderType string Accepted for ApexCharts 4.x type compatibility; the renderer does not read it.
xaxis.axisTicks.color string Colour of the tick marks. Default: '#e0e0e0'.
xaxis.axisTicks.height number Length of the tick marks in pixels. Default: 6.
xaxis.axisTicks.offsetX number Moves the tick marks horizontally. Default: 0.
xaxis.axisTicks.offsetY number Moves the tick marks vertically. Default: 0.
xaxis.tickPlacement string '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 number | 'dataPoints' Number of intervals on a numeric axis; 'dataPoints' makes one tick per data point.
xaxis.stepSize number Distance between two ticks in axis units; used instead of tickAmount.
xaxis.min number Lowest x value shown; data below it are cut off.
xaxis.max number Highest x value shown; data above it are cut off.
xaxis.range number Width of the visible x window, ending at the newest value; useful for live data with appendData.
xaxis.floating boolean 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 number Number of decimals in numeric x labels; not set picks a value from the range.
xaxis.position string 'bottom' or 'top' of the plot. Default: 'bottom'.
xaxis.title object Title text of the x axis.
xaxis.title.text string The title text; not set draws no title.
xaxis.title.offsetX number Moves the title horizontally. Default: 0.
xaxis.title.offsetY number Moves the title vertically. Default: 0.
xaxis.title.style object Text style of the title.
xaxis.title.style.color string Title colour; not set uses chart.foreColor.
xaxis.title.style.fontFamily string Title font family.
xaxis.title.style.fontWeight string | number Title font weight. Default: 900.
xaxis.title.style.fontSize string Title font size. Default: '12px'.
xaxis.title.style.cssClass string CSS class added to the title element. Default: ''.
xaxis.crosshairs object Vertical marker that follows the hovered x position.
xaxis.crosshairs.show boolean Shows the crosshair. Default: true.
xaxis.crosshairs.width number | string 'tickWidth' spans one category, 'barWidth' matches the bar width, a number is pixels. Default: 1.
xaxis.crosshairs.position string 'back' draws it behind the series, 'front' above them. Default: 'back'.
xaxis.crosshairs.opacity number Opacity of the crosshair (0 to 1). Default: 0.9.
xaxis.crosshairs.stroke object Line of a thin crosshair.
xaxis.crosshairs.stroke.color string Line colour. Default: '#b6b6b6'.
xaxis.crosshairs.stroke.width number Line width in pixels; 0 hides the line. Default: 1.
xaxis.crosshairs.stroke.dashArray number Dash length in pixels; 0 draws a solid line. Default: 3.
xaxis.crosshairs.fill object Fill of a wide crosshair (when width is more than one pixel).
xaxis.crosshairs.fill.type string 'solid' or 'gradient'. Default: 'solid'.
xaxis.crosshairs.fill.color string Fill colour for type 'solid'. Default: '#B1B9C4'.
xaxis.crosshairs.fill.gradient object Gradient for type 'gradient'.
xaxis.crosshairs.fill.gradient.colorFrom string Colour at the start of the gradient. Default: '#D8E3F0'.
xaxis.crosshairs.fill.gradient.colorTo string Colour at the end of the gradient. Default: '#BED1E6'.
xaxis.crosshairs.fill.gradient.stops number[] Gradient stop positions in percent. Default: [0,100].
xaxis.crosshairs.fill.gradient.opacityFrom number Opacity at the start of the gradient. Default: 0.4.
xaxis.crosshairs.fill.gradient.opacityTo number Opacity at the end of the gradient. Default: 0.5.
xaxis.crosshairs.dropShadow ApexDropShadow Shadow behind the crosshair.
xaxis.crosshairs.dropShadow.enabled boolean Draws the shadow. Default: false.
xaxis.crosshairs.dropShadow.top number Vertical shadow distance in pixels. Default: 2.
xaxis.crosshairs.dropShadow.left number Horizontal shadow distance in pixels. Default: 2.
xaxis.crosshairs.dropShadow.blur number Blur radius in pixels. Default: 4.
xaxis.crosshairs.dropShadow.opacity number Shadow opacity (0 to 1). Default: 0.7.
xaxis.crosshairs.dropShadow.color string Shadow colour. Default: '#000'.
xaxis.tooltip object Small box on the x axis that shows the hovered x value.
xaxis.tooltip.enabled boolean Shows the x-axis tooltip. Default: true.
xaxis.tooltip.offsetY number Moves the x-axis tooltip vertically. Default: 0.
xaxis.tooltip.formatter() (value: string, opts?: object): string Function that returns the text of the x-axis tooltip from the x value.
xaxis.tooltip.style object Text style of the x-axis tooltip.
xaxis.tooltip.style.fontSize string Font size of the x-axis tooltip. Default: '12px'.
xaxis.tooltip.style.fontFamily string 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 object West Coast Charts: y axis extras.
yaxis.wcc.alignZero boolean Puts zero on the same gridline on every axis that sets it. Default: false.
yaxis.show boolean Draws this y axis. Default: true.
yaxis.showAlways boolean Keeps the axis when all series bound to it are hidden through the legend. Default: false.
yaxis.showForNullSeries boolean Draws the axis even when all its series contain only null values. Default: true.
yaxis.seriesName string | string[] 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 boolean Puts the axis on the right side. Default: false.
yaxis.reversed boolean Turns the axis upside down (highest value at the bottom). Default: false.
yaxis.logarithmic boolean Uses a logarithmic scale. Default: false.
yaxis.logBase number Base of the logarithmic scale. Default: 10.
yaxis.tickAmount number Number of intervals; not set picks a value from the chart height.
yaxis.stepSize number Distance between two ticks in axis units; used instead of tickAmount.
yaxis.forceNiceScale boolean Rounds min, max and step to round numbers even when min or max are given. Default: false.
yaxis.min number | ((min: number) => number) Lowest value shown; a function receives the data minimum and returns the axis minimum.
yaxis.max number | ((max: number) => number) Highest value shown; a function receives the data maximum and returns the axis maximum.
yaxis.floating boolean Takes the axis out of the layout so the plot uses its width; the labels are drawn over the plot. Default: false.
yaxis.decimalsInFloat number Number of decimals in the labels; not set picks a value from the range.
yaxis.labels object The value labels of the axis. The value labels of the axis.
yaxis.labels.readability WccReadability West Coast Charts: halo / pill / auto-contrast where labels overlap marks (features/readability)
yaxis.labels.readability.mode 'none' | 'halo' | 'pill' | 'auto' | 'hide' '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 'pill' | 'halo' | 'hide' what 'auto' escalates to over mixed fills or when no text colour reaches minRatio. Default 'pill'
yaxis.labels.readability.enabled boolean false switches the treatment off for this label kind
yaxis.labels.readability.contrast boolean swap the text to light/dark when it misses minRatio against what is under it (any mode)
yaxis.labels.readability.minRatio number WCAG 2 contrast ratio to reach. Default 4.5
yaxis.labels.readability.light string text/backdrop colour pair used by contrast and 'auto' fills. Defaults '#ffffff' / '#111827'
yaxis.labels.readability.dark string Dark colour of the pair. Default: '#111827'.
yaxis.labels.readability.background 'auto' | string colour under the chart; 'auto' = chart.background, else the first opaque ancestor
yaxis.labels.readability.halo object outline behind the glyphs; blur > 0 makes it a soft glow. Defaults width 3, color 'auto' (chart background), opacity 0.92
yaxis.labels.readability.halo.width number Outline width in pixels. Default: 3.
yaxis.labels.readability.halo.color 'auto' | string Outline colour; 'auto' uses the colour under the label or a contrasting one. Default: 'auto'.
yaxis.labels.readability.halo.opacity number Outline opacity (0 to 1). Default: 0.92.
yaxis.labels.readability.halo.blur number Blur in pixels; above 0 the outline becomes a soft glow. Default: 0.
yaxis.labels.readability.pill object 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 'auto' | string Box colour; 'auto' uses the colour under the label or a contrasting one. Default: 'auto'.
yaxis.labels.readability.pill.opacity number Box opacity (0 to 1). Default: 0.9.
yaxis.labels.readability.pill.radius number Corner radius in pixels. Default: 4.
yaxis.labels.readability.pill.padding number | [number, number] Space around the text in pixels: one number, or [vertical, horizontal]. Default: [1, 4].
yaxis.labels.readability.pill.stroke string Outline colour of the box. Default: 'none'.
yaxis.labels.readability.pill.strokeWidth number Outline width in pixels. Default: 1.
yaxis.labels.readability.pill.offset [number, number] Shift of the box as [dx, dy] in pixels. Default: [0, 0].
yaxis.labels.readability.shadow object | boolean drop shadow on the pill (on the text in halo mode)
yaxis.labels.readability.shadow.dx number Horizontal shadow offset in pixels. Default: 0.
yaxis.labels.readability.shadow.dy number Vertical shadow offset in pixels. Default: 1.
yaxis.labels.readability.shadow.blur number Shadow blur in pixels. Default: 2.
yaxis.labels.readability.shadow.color string Shadow colour. Default: '#000000'.
yaxis.labels.readability.shadow.opacity number Shadow opacity (0 to 1). Default: 0.35.
yaxis.labels.readability.raise boolean axis labels sitting on marks are moved above the series (default true)
yaxis.labels.readability.each (info: WccReadabilityInfo) => WccReadability | null | undefined per label: return an override (or 'none') for this one label; called only when set
yaxis.labels.show boolean Shows the labels. Default: true.
yaxis.labels.showDuplicates boolean Keeps labels that repeat the text of the previous one. Default: false.
yaxis.labels.minWidth number Minimum width in pixels reserved for the labels. Default: 0.
yaxis.labels.maxWidth number Maximum width in pixels the labels may take; longer ones are cut. Default: 160.
yaxis.labels.offsetX number Moves the labels horizontally. Default: 0.
yaxis.labels.offsetY number Moves the labels vertically. Default: 0.
yaxis.labels.rotate number Rotation of the labels in degrees. Default: 0.
yaxis.labels.align 'left' | 'center' | 'right' Horizontal alignment of the labels: 'left', 'center' or 'right'.
yaxis.labels.padding number Space in pixels between the labels and the plot. Default: 20.
yaxis.labels.style object Text style of the labels. Text style of the labels.
yaxis.labels.style.colors string | string[] Label colour; an array gives one colour per label. Empty uses chart.foreColor. Default: [].
yaxis.labels.style.fontSize string Font size of the labels. Default: '11px'.
yaxis.labels.style.fontWeight string | number Font weight of the labels. Default: 400.
yaxis.labels.style.fontFamily string Font family of the labels; not set uses chart.fontFamily.
yaxis.labels.style.cssClass string CSS class added to every label element. Default: ''.
yaxis.labels.style.colors string | string[] Label colour; an array gives one colour per label. Empty uses chart.foreColor. Default: [].
yaxis.labels.formatter() (val: number, opts?: any): string | string[] Function that returns the label text from the value.
yaxis.labels.readability WccReadability West Coast Charts: halo / pill / auto-contrast where labels overlap marks (features/readability)
yaxis.labels.readability.mode 'none' | 'halo' | 'pill' | 'auto' | 'hide' '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 'pill' | 'halo' | 'hide' what 'auto' escalates to over mixed fills or when no text colour reaches minRatio. Default 'pill'
yaxis.labels.readability.enabled boolean false switches the treatment off for this label kind
yaxis.labels.readability.contrast boolean swap the text to light/dark when it misses minRatio against what is under it (any mode)
yaxis.labels.readability.minRatio number WCAG 2 contrast ratio to reach. Default 4.5
yaxis.labels.readability.light string text/backdrop colour pair used by contrast and 'auto' fills. Defaults '#ffffff' / '#111827'
yaxis.labels.readability.dark string Dark colour of the pair. Default: '#111827'.
yaxis.labels.readability.background 'auto' | string colour under the chart; 'auto' = chart.background, else the first opaque ancestor
yaxis.labels.readability.halo object outline behind the glyphs; blur > 0 makes it a soft glow. Defaults width 3, color 'auto' (chart background), opacity 0.92
yaxis.labels.readability.halo.width number Outline width in pixels. Default: 3.
yaxis.labels.readability.halo.color 'auto' | string Outline colour; 'auto' uses the colour under the label or a contrasting one. Default: 'auto'.
yaxis.labels.readability.halo.opacity number Outline opacity (0 to 1). Default: 0.92.
yaxis.labels.readability.halo.blur number Blur in pixels; above 0 the outline becomes a soft glow. Default: 0.
yaxis.labels.readability.pill object 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 'auto' | string Box colour; 'auto' uses the colour under the label or a contrasting one. Default: 'auto'.
yaxis.labels.readability.pill.opacity number Box opacity (0 to 1). Default: 0.9.
yaxis.labels.readability.pill.radius number Corner radius in pixels. Default: 4.
yaxis.labels.readability.pill.padding number | [number, number] Space around the text in pixels: one number, or [vertical, horizontal]. Default: [1, 4].
yaxis.labels.readability.pill.stroke string Outline colour of the box. Default: 'none'.
yaxis.labels.readability.pill.strokeWidth number Outline width in pixels. Default: 1.
yaxis.labels.readability.pill.offset [number, number] Shift of the box as [dx, dy] in pixels. Default: [0, 0].
yaxis.labels.readability.shadow object | boolean drop shadow on the pill (on the text in halo mode)
yaxis.labels.readability.shadow.dx number Horizontal shadow offset in pixels. Default: 0.
yaxis.labels.readability.shadow.dy number Vertical shadow offset in pixels. Default: 1.
yaxis.labels.readability.shadow.blur number Shadow blur in pixels. Default: 2.
yaxis.labels.readability.shadow.color string Shadow colour. Default: '#000000'.
yaxis.labels.readability.shadow.opacity number Shadow opacity (0 to 1). Default: 0.35.
yaxis.labels.readability.raise boolean axis labels sitting on marks are moved above the series (default true)
yaxis.labels.readability.each (info: WccReadabilityInfo) => WccReadability | null | undefined per label: return an override (or 'none') for this one label; called only when set
yaxis.axisBorder object The vertical axis line. The vertical axis line.
yaxis.axisBorder.show boolean Draws the axis line. Default: false.
yaxis.axisBorder.color string Colour of the axis line. Default: '#e0e0e0'.
yaxis.axisBorder.width number Width of the axis line in pixels. Default: 1.
yaxis.axisBorder.offsetX number Moves the axis line horizontally. Default: 0.
yaxis.axisBorder.offsetY number Moves the axis line vertically. Default: 0.
yaxis.axisBorder.show boolean Draws the axis line. Default: false.
yaxis.axisTicks object Short tick marks next to the axis line. Short tick marks next to the axis line.
yaxis.axisTicks.show boolean Draws the tick marks. Default: false.
yaxis.axisTicks.color string Colour of the tick marks. Default: '#e0e0e0'.
yaxis.axisTicks.width number Length of the tick marks in pixels. Default: 6.
yaxis.axisTicks.offsetX number Moves the tick marks horizontally. Default: 0.
yaxis.axisTicks.offsetY number Moves the tick marks vertically. Default: 0.
yaxis.axisTicks.show boolean Draws the tick marks. Default: false.
yaxis.title object Title text of the axis. Title text of the axis.
yaxis.title.text string The title text; not set draws no title.
yaxis.title.rotate number Rotation of the title in degrees. Default: -90.
yaxis.title.offsetX number Moves the title horizontally. Default: 0.
yaxis.title.offsetY number Moves the title vertically. Default: 0.
yaxis.title.style object Text style of the title. Text style of the title.
yaxis.title.style.color string Title colour; not set uses chart.foreColor.
yaxis.title.style.fontSize string Title font size. Default: '11px'.
yaxis.title.style.fontWeight string | number Title font weight. Default: 900.
yaxis.title.style.fontFamily string Title font family.
yaxis.title.style.cssClass string CSS class added to the title element. Default: ''.
yaxis.title.style.color string Title colour; not set uses chart.foreColor.
yaxis.title.text string The title text; not set draws no title.
yaxis.crosshairs object Horizontal line that follows the hovered value. Horizontal line that follows the hovered value.
yaxis.crosshairs.show boolean Shows the y crosshair. Default: true.
yaxis.crosshairs.position string 'front' draws it above the series, 'back' behind them. Default: 'front'.
yaxis.crosshairs.stroke object Line of the y crosshair. Line of the y crosshair.
yaxis.crosshairs.stroke.color string Line colour. Default: '#b6b6b6'.
yaxis.crosshairs.stroke.width number Line width in pixels. Default: 1.
yaxis.crosshairs.stroke.dashArray number Dash length in pixels; 0 draws a solid line. Default: 0.
yaxis.crosshairs.stroke.color string Line colour. Default: '#b6b6b6'.
yaxis.crosshairs.show boolean Shows the y crosshair. Default: true.
yaxis.tooltip object 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 boolean Shows the y-axis tooltip. Default: false.
yaxis.tooltip.offsetX number Moves the y-axis tooltip horizontally. Default: 0.
yaxis.tooltip.enabled boolean Shows the y-axis tooltip. Default: false.
yaxis.wcc object West Coast Charts: y axis extras.
yaxis.wcc.alignZero boolean 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 object Accessibility extras: the data table and custom strings.
wcc.a11y.dataTable boolean | 'hidden' | 'details' 'hidden' (default): screen-reader table; true | 'details': visible disclosure; false: none
wcc.a11y.dataTableMaxRows number Maximum number of rows in the data table. Default: 500.
wcc.a11y.strings object override any announcement / description string
wcc.performance object large-data rendering, see docs/architecture/performance.md
wcc.performance.decimate boolean M4 decimation of plain line/area paths; pixel-identical, default true
wcc.performance.denseMarks boolean | 'auto' one union path per series for columns / scatter points; default 'auto'
wcc.performance.denseThreshold number point count from which denseMarks applies; default 2000
wcc.narrative WccNarrativeOptions Settings of the narrative (guided tour) feature.
wcc.narrative.enabled boolean Turns on the narrative player. Default: false.
wcc.narrative.source 'frames' | 'record' 'frames' replays the supplied frames; 'record' records the chart's own data updates. Default: 'frames'.
wcc.narrative.frames object[] Frames to replay with source: 'frames'. Default: [].
wcc.narrative.frames[].t any Time or key of the frame, usable with seek({ t }).
wcc.narrative.frames[].series any[] Series of the frame, in the chart's series format.
wcc.narrative.frames[].label string Frame label, shown as the watermark.
wcc.narrative.frames[].caption string Caption shown and announced when the frame is reached.
wcc.narrative.frames[].options object Options applied when the frame is reached (updateOptions patch).
wcc.narrative.frames[].annotations object Annotations shown while the frame is current.
wcc.narrative.maxFrames number Ring-buffer size of source: 'record'; older frames are dropped. Default: 600.
wcc.narrative.interpolate boolean Draws in-between values while scrubbing between frames. Default: true.
wcc.narrative.keyBy 'x' | ((point: any) => any) | null 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 number Time per frame during playback, in milliseconds. Default: 800.
wcc.narrative.loop boolean Restarts from the first frame after the last. Default: false.
wcc.narrative.autoplay boolean Starts playback on mount, unless reduced motion is preferred. Default: false.
wcc.narrative.transport boolean Draws the transport bar (play, scrubber, live). Default: true.
wcc.narrative.watermark 'auto' | 'label' | false | ((frame: any, index: number) => string) 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 boolean Shows frame captions. Default: true.
wcc.narrative.liveBehaviour 'buffer' | 'follow' 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 boolean 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 object[] Inline drilldown levels; each has an id that points reference and the data to show.
drilldown.series[].id string Id of the level, referenced by the drilldown field of a point.
drilldown.series[].name string Name of the level, shown in the breadcrumb; not set uses the id.
drilldown.series[].type string Chart type of the level; not set keeps the parent's type.
drilldown.series[].data any[] Data of the level, in the format of its chart type.
drilldown.animation object Transition between levels.
drilldown.animation.enabled boolean Animates level changes; false switches instantly. Reduced-motion settings also switch instantly or fade. Default: true.
drilldown.animation.zoomFromPoint boolean With transition 'auto', zooms the new level out of the clicked point. Default: false.
drilldown.animation.speed number Duration of the level transition in milliseconds. Default: 260.
drilldown.onDrillDown (point: any, info: any) => any called before a level opens; may return the level (or a Promise of it) to load on demand
drilldown.cache boolean Keeps levels returned by onDrillDown, so revisiting a level does not call it again. Default: true.
drilldown.breadcrumb object | false Breadcrumb trail of the open levels; false hides it.
drilldown.breadcrumb.rootLabel string Text of the first breadcrumb; not set uses the name of a single root series, else the locale string drilldown.root.
drilldown.wcc object West Coast Charts drilldown extensions.
drilldown.wcc.transition string Level transition: 'auto' (morph when type and point count match, otherwise dissolve), 'morph', 'dissolve', 'zoom' or 'none'. Default: 'auto'.
drilldown.wcc.hint boolean | string Shows the drill hint on hover over drillable points and adds it to their accessible labels. Default: true.
drilldown.wcc.keepZoom boolean Restores the zoom window of a level when going back up to it. Default: false.
drilldown.wcc.prefetch boolean Calls onDrillDown shortly after a drillable point is hovered or focused, so the level is ready on click. Default: false.
drilldown.wcc.deepLink boolean | string 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 boolean | string 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 boolean Draws the filtered part of each mark over its whole when parts are given. Default: true.
highlightFilter.data (number | null)[] pie/donut/polarArea/radialBar: the filtered part of every slice
highlightFilter.fadeOpacity number Opacity of the whole behind its part. Default: 0.2.
highlightFilter.outline object Outline of the faded whole.
highlightFilter.outline.width number Outline width in pixels. Default: 1.
highlightFilter.outline.opacity number Outline opacity. Default: 1.
highlightFilter.enter 'whole' | string Where parts animate from: 'whole' (the whole's extent) or 'baseline'. Default: 'whole'.
highlightFilter.axis 'extend' | string 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 object Which value the data labels show.
highlightFilter.dataLabels.value 'part' | 'whole' | string 'part' or 'whole' value in the point labels. Default: 'part'.
highlightFilter.dataLabels.total 'part' | 'whole' | string 'part' or 'whole' value in stack total labels. Default: 'part'.
highlightFilter.tooltip object Part line in the tooltip.
highlightFilter.tooltip.show boolean Adds the part to the tooltip. Default: true.
highlightFilter.tooltip.share boolean Adds the part's percentage of the whole. Default: false.
highlightFilter.tooltip.formatter (part: number, whole: number, opts: any) => string Returns the tooltip text of the part from (part, whole, opts).
highlightFilter.line object Line and area charts.
highlightFilter.line.dashArray number Dash length of the whole line behind the part line. Default: 4.
highlightFilter.pie object Pie, donut and polar-area charts.
highlightFilter.pie.encoding 'radius' | string How a slice shows its part: 'radius' scales the radius with the share, 'area' scales the area. Default: 'radius'.
highlightFilter.wcc object West Coast Charts highlight-filter extensions.
highlightFilter.wcc.csv 'whole' | 'both' CSV export: 'whole' exports the wholes, 'both' adds a "<series> (part)" column per series. Default: 'whole'.
highlightFilter.wcc.combo boolean false draws combo charts without parts. Default: true.
highlightFilter.wcc.pattern 'auto' | boolean 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 number Delay of each series' part animation, multiplied by the series index, in milliseconds. Default: 0.
highlightFilter.wcc.labelShare boolean Adds the part's percentage to the data labels. Default: false.
highlightFilter.wcc.streamingParts boolean 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 'auto' | boolean 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 object Encoding key above the plot that explains whole and part.
highlightFilter.wcc.key.show 'auto' | boolean 'auto' shows the key when all series are lines or areas. Default: 'auto'.
highlightFilter.wcc.key.whole string Key text of the whole; not set uses the locale string highlight.keyWhole.
highlightFilter.wcc.key.part string 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 string | ((series: any) => any) Splits the series into one panel per value of this field (or function result). Ignored when row or column is set.
trellis.row string | ((series: any) => any) Field (or function) whose values form the rows of a 2-D grid.
trellis.panel (key: any, ctx: { index: number, seriesNames: string[] }) => { [key: string]: any } | null | undefined 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 string | ((series: any) => any) Field (or function) whose values form the columns of a 2-D grid.
trellis.emptyPanels 'placeholder' | 'skip' | 'hide' Empty cells of a 2-D grid: 'placeholder' draws an empty panel, 'skip' and 'hide' leave them out. Default: 'placeholder'.
trellis.data any[] Tidy rows to facet instead of series; x, y and seriesBy name their fields.
trellis.x string Field of data with the x value. Default: 'x'.
trellis.y string Field of data with the y value. Default: 'y'.
trellis.seriesBy string Field of data that names the series within a panel.
trellis.columns 'auto' | number Number of panel columns; 'auto' fits as many as minPanelWidth allows. Default: 'auto'.
trellis.minPanelWidth number Smallest panel width in pixels for columns: 'auto'. Default: 220.
trellis.gap number Space between panels in pixels. Default: 12.
trellis.aspectRatio number Panel width divided by height, used when panelHeight is not set. Default: 1.6.
trellis.panelHeight number Fixed panel height in pixels; not set derives it from aspectRatio.
trellis.minPanelHeight number Smallest panel height in pixels. Default: 80.
trellis.order 'first-seen' | 'asc' | 'desc' | any[] | ((a: any, b: any) => number) Panel order: 'first-seen', 'asc', 'desc', an array of keys or a comparator. Default: 'first-seen'.
trellis.limit number Draws only the first N panels and warns; not set draws all.
trellis.virtualize 'auto' | boolean Renders only panels near the viewport; 'auto' turns it on above 64 panels. Default: 'auto'.
trellis.scales object Which scales the panels share.
trellis.scales.x 'shared' | 'independent' | string 'shared' or 'independent' x axis per panel. Default: 'shared'.
trellis.scales.y 'shared' | 'independent' | 'independent-row' | 'independent-column' | string 'shared', 'independent', 'independent-row' or 'independent-column' y axis. Default: 'shared'.
trellis.scales.color 'shared' | string Colour scale; always shared (other values warn and fall back). Default: 'shared'.
trellis.scales.size 'shared' | string Size scale; always shared (other values warn and fall back). Default: 'shared'.
trellis.header object Panel headers.
trellis.header.show boolean Draws a header with the facet value above each panel. Default: true.
trellis.header.formatter (key: any, info: { dimension: string; index: number; count: number }) => string Returns the header text from the facet key and { dimension, index, count }.
trellis.header.style object Text style of the headers; not set uses the theme.
trellis.header.style.fontSize string | number Font size of the headers.
trellis.header.style.fontWeight string | number Font weight of the headers.
trellis.header.style.color WccColor Text colour of the headers.
trellis.axes object Axis labels across panels.
trellis.axes.labels 'edges' | 'all' | 'none' '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 'shared' | string | boolean 'shared' draws one legend for all panels; 'none' hides it. Default: 'shared'.
trellis.toolbar 'shared' | string | boolean 'shared' draws one toolbar for all panels; 'none' hides it. Default: 'shared'.
trellis.wcc object West Coast Charts trellis extensions (sort, headerValue and virtualization need trellis-extras).
trellis.wcc.headerValue 'last' | 'total' | 'max' | 'min' | WccCallback Metric shown in each header: 'last', 'total', 'max', 'min' or a function; not set shows none.
trellis.wcc.sort object | 'desc' | 'asc' Sorts 1-D panels by a metric: 'desc', 'asc' or { by, dir }; the metric is by, else headerValue, else 'total'.
trellis.wcc.sort.by any Metric to sort by (as in headerValue).
trellis.wcc.sort.dir 'asc' | 'desc' Sort direction. Default: 'desc'.
trellis.wcc.sparkline boolean Draws the panels as sparklines, at most 96 px high. Default: false.
trellis.wcc.typeMix boolean Allows different cartesian chart types per panel. Default: false.
trellis.wcc.highlight boolean Hovering or focusing a legend item highlights that series in every panel. Default: true.

WestCoast Charts 1.1.5 · generated from the library guide at commit 95f093ba. Code examples in the guide are executed by the library's docs check.