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" derives one from the data, preferring the value axis tickLabel.format when that is set. 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.