Custom Series (Marks)

Marks lets you register a custom series type from a single renderItem function and get a first-class series in return: events, shared tooltip, legend, and keyboard navigation all work with no extra wiring. It is how you add a mark shape ApexCharts does not ship built in, without forking the renderer.

Enable the feature

import ApexCharts from 'apexcharts'
import 'apexcharts/features/marks'

ApexCharts.registerSeriesType and ApexCharts.crossfilter exist on the class even without the import, but they warn and no-op until the feature is bundled.

Register a series type

ApexCharts.registerSeriesType(name, def) defines a new type. The renderItem callback draws one datum using a small drawing API and the current scales:

ApexCharts.registerSeriesType('lollipop', {
  renderItem({ x, y, api, color }) {
    api.line({ x1: x, y1: api.zeroY, x2: x, y2: y, stroke: color })
    api.circle({ cx: x, cy: y, r: 5, fill: color })
  },
})

Use it like any built-in type

Reference the registered name from series[].type (or chart.type):

const options = {
  series: [{ type: 'lollipop', data: [[0, 3], [1, 6], [2, 4]] }],
}

The marks carry their datum identity, so hover, the shared tooltip, and the legend toggle work automatically.

The renderItem API

renderItem receives the datum's resolved x / y in pixels, the series color, the scales, and an api with primitive draw calls (line, circle, rect, path, text) plus helpers such as api.zeroY (the baseline pixel). Draw whatever shape represents the datum.

Shipped examples

Dumbbell, lollipop, and bullet ship as samples in the Custom Series demos. Built-in type names are guarded against shadowing, so registering 'line' or 'bar' is rejected.

When to use Marks

Use a custom series when your data needs a mark ApexCharts does not have (a lollipop, a bullet, a dumbbell, a domain-specific glyph) but you still want the standard series behaviors. For decorative or one-off drawing that is not tied to each datum, a Weave plugin or an annotation is a better fit.

Marks ships as a tree-shakeable entry point; see the tree-shaking guide.