highlightFilter

Draw the parts. false keeps them in the data and draws the plain chart, so a pick can be switched off without rebuilding the series.

Available Options:

• true (default)
• false

Pie, donut, polarArea, radialBar and gauge: one part per slice (or ring), in slice order, with null where a slice has none. A plain number series has nowhere to carry a part, so it goes here. A slice written as { x, y, highlight } wins over it.

chart: { type: 'donut' },
series: [44, 55, 13],
labels: ['Organic', 'Paid', 'Referral'],
highlightFilter: { data: [20, 31, 4] },

Ignored, with a console warning, while its length differs from the number of slices. A row of one value ([[20], [null], [4]], the shape set() takes on an axis chart) reads as that value; a row of several values is ignored with a warning. Set it to null to clear the parts.

Opacity of the faded whole. On a radialBar or gauge drawing arcs it is the ring's stroke opacity, and on a needle gauge the gauge's own needle fades to it. A line's whole is dashed rather than faded; see line.dashArray.

Width of the thin outline, in the series colour, that keeps a faded whole readable. 0 draws none.

Opacity of the outline around a faded whole.

How a first pick draws its parts.

Available Options:

• 'whole' (default): each part starts as its whole and drains (or grows) to its size while the whole fades, so the first frame is the chart as it was
• 'baseline': each part rises from the baseline

What a part outside the value axis does. Only an average or a ratio can run past its whole; a part that is a subset of its whole never reaches this.

Available Options:

• 'extend' (default): the axis stretches to fit the part. On a polarArea, the radial scale does.
• 'clamp': the axis stays as the wholes set it, and a part beyond it is cut off at the edge of the plot

A funnel stage, a 100% stack, a pie or donut rim, a treemap tile and the end of a gauge have a fixed edge either way: a part is drawn to that edge, and labels and tooltips state its true value.

What the data labels state while parts are drawn.

Available Options:

• 'part' (default): the part. A data point with no part has no label.
• 'whole': the whole, as without the highlight filter

What a total states: the stacked total on a stacked chart, and the centre total on a donut or radialBar.

Available Options:

• 'part' (default): the sum of the parts, drawn at the edge of the part stack on a stacked chart
• 'whole': the total of the wholes

With 'part', w.globals.seriesTotals holds the parts while a centre total's formatter runs.

Write each tooltip row as "part / whole", the part bold and the whole muted, beside a marker drawn half solid and half faded. A data point with no part shows its whole alone, muted. false keeps the plain row.

Available Options:

• true (default)
• false

Append the part's share of its whole to each row, as in 50 / 66 · 76%.

Available Options:

• false (default)
• true

Returns a row's value text, as plain text or HTML, in place of "part / whole". It receives (part, whole, opts), where part is null at a data point with no part and opts carries seriesIndex, dataPointIndex and w.

highlightFilter: {
  tooltip: {
    formatter: (part, whole) =>
      part == null ? `${whole}` : `${part} of ${whole}`,
  },
}

On a ring split into lanes (radialBar.indicator: 'lanes'), opts.lane says which lane is under the pointer: 'part' or 'whole'.

For a tooltip of your own, read the part in tooltip.custom with opts.ctx.highlightFilter.valueAt(opts.seriesIndex, opts.dataPointIndex).

Line, spline and step line charts: the whole is drawn dashed at full strength instead of faded, with this dash length in pixels, and the part solid over it.

Pie and donut charts: how a part's share of its slice sets the part's radius, measured from the centre (pie) or the hole (donut).

Available Options:

• 'radius' (default): linear in the radius, so a half share reaches halfway out
• 'area': the part's area is its share of the slice's area

A polarArea always draws a part out to its own value on the chart's radial scale.

How a radialBar or gauge draws a part.

Available Options:

• 'arc': the ring is faded on its track and the part is a solid arc in front of it, from the same start. Where a part runs past its whole, a short tick across the track marks where the whole ends.
• 'needle': a second needle points at the part, on the first ring, and the ring keeps its look. Other rings show arcs.
• 'lanes': each ring's band splits in two, the outer lane the whole drawn light and the inner lane the part, solid, each on a track of its own. Made for a part that can be larger than its whole, such as an average. Each lane shows its own tooltip row, and the centre adds a smaller, muted line with the whole under the part.

Unset, every radialBar and gauge uses 'arc', except a gauge drawn with plotOptions.radialBar.shape: 'needle', which uses 'needle' and fades its own needle while a pick is active. A part past max is drawn to the end of the dial and carries the apexcharts-highlight-overflow class.

With indicator: 'lanes', the strength of the whole's lane against its own colour.

Colour of the part's needle. Unset, the series colour, so it reads apart from the gauge's own needle.

Length of the part's needle: a number in pixels, or a percentage string relative to the gauge radius, such as '85%'. Unset, plotOptions.radialBar.needle.length.

Width of the part's needle at its base. Unset, plotOptions.radialBar.needle.baseWidth.

Width of the part's needle at its tip. Unset, plotOptions.radialBar.needle.tipWidth.

Vertical offset of the part's needle pivot, in pixels. Unset, plotOptions.radialBar.needle.offsetY.