Tooltip formatting

The category axis config determines how the category line is formatted, and a series' config how its own line is formatted. Each offers the same four properties: a d3-format string plus an optional label, prefix and suffix. Click the chart to compare them.

Open in demo ↗

// Per-series tooltip formatting: a d3-format string plus optional prefix and
// suffix around the formatted value, with the series title as the label. The
// category axis formats the tooltip's category line separately from its ticks.
import type { MochartInputConfig } from '@mochart/core';

export const config: MochartInputConfig = {
  version: '1.0.0',
  title: { text: 'Store Performance' },
  categoryAxis: {
    property: 'month',
    type: 'date',
    scale: 'ordinal',
    tickLabel: { format: '%b' },
    valueFormat: '%B'
  },
  valueAxes: [
    { id: 'money', title: { text: 'Revenue' } },
    { id: 'rate', title: { text: 'Refund rate' }, side: 'end', tickLabel: { format: '.1%' } }
  ],
  series: [
    {
      property: 'revenue',
      title: 'Revenue',
      renderer: 'bar',
      axis: 'money',
      valueFormat: ',.1f',
      valuePrefix: '$',
      valueSuffix: 'k'
    },
    {
      property: 'refunds',
      title: 'Refund rate',
      renderer: 'line',
      axis: 'rate',
      valueFormat: '.1%'
    }
  ],
  tooltip: {
    valueAlign: 'right'
  }
};

export const data = [
  { month: '2025-01-01', revenue: 41.2, refunds: 0.021 },
  { month: '2025-02-01', revenue: 46.8, refunds: 0.018 },
  { month: '2025-03-01', revenue: 44.1, refunds: 0.024 },
  { month: '2025-04-01', revenue: 52.6, refunds: 0.016 },
  { month: '2025-05-01', revenue: 57.9, refunds: 0.019 },
  { month: '2025-06-01', revenue: 63.4, refunds: 0.014 }
];

How it works

• The category axis config determines the formatting of the line at the top of the tooltip: categoryAxis.valueFormat is a d3-format string for a number axis or a d3-time-format one for a date axis, with "auto" (the default) following the axis tickLabel.format and null showing the raw value; a string axis has nothing to format. Above, the ticks use %b and the tooltip line %B, so the axis reads Jan where the tooltip reads January. categoryAxis.valueLabel puts a label before the value (none by default), and categoryAxis.valuePrefix / categoryAxis.valueSuffix wrap it.
• A series' config determines the formatting of its own line: valueFormat is a d3-format string (,.1f, .1%, …); "auto" takes the value axis tickLabel.format when that is set, and otherwise an SI prefix and two significant digits at each value's own magnitude (4.5, 45, 1.2k). valuePrefix and valueSuffix wrap the formatted value ($41.2k above).
• The label before the value defaults to the series title (via useTitleForValueLabel); set valueLabel to override it, or useTitleForValueLabel: false for no label at all. valueLabel: null is the default and falls back to the title.
• tooltipProperty shows another data property in place of the series value: the heatmap uses it to show cell values instead of band coordinates. A series with a rangeProperty shows both ends joined by the tooltip's rangeValueSeparator (default " - "), and a markerProperty value follows the series value in parentheses.
• Chart-wide behavior lives in tooltip: valueAlign ('right' by default) lines the values up in a column, showMissingValues / missingValueText control gaps, showCategory heads the tooltip with the category value, and followPointer makes the tooltip track the pointer instead of toggling on click. See Interaction for the rest.
• Exclude a series from the tooltip entirely with showInTooltip: false.