Tooltip formatting

How a value appears in the tooltip is per-series config: a d3-format string plus optional label, prefix, and suffix. Click or hover the chart to compare the two series' formatting.

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.
import type { MochartInputConfig } from '@mochart/core';

export const config: MochartInputConfig = {
  version: '1.0.0',
  title: { text: 'Store Performance' },
  categoryAxis: { property: 'month', type: 'string', scale: 'ordinal' },
  valueAxes: [
    { id: 'money', title: 'Revenue' },
    { id: 'rate', title: 'Refund rate', side: 'end', tickLabelFormat: '.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: {
    rightAlignValues: true
  }
};

export const data = [
  { month: 'Jan', revenue: 41.2, refunds: 0.021 },
  { month: 'Feb', revenue: 46.8, refunds: 0.018 },
  { month: 'Mar', revenue: 44.1, refunds: 0.024 },
  { month: 'Apr', revenue: 52.6, refunds: 0.016 },
  { month: 'May', revenue: 57.9, refunds: 0.019 },
  { month: 'Jun', revenue: 63.4, refunds: 0.014 }
];

How it works

• valueFormat is a d3-format string (,.1f, .1%, …); "auto" derives one from the data, preferring the axis tickLabelFormat. 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 null for none.
• Chart-wide behavior lives in tooltip: rightAlignValues lines the values up in a column, showMissingValues / missingValueText control gaps, and followPointer vs closeOnClick decide when the tooltip opens and closes.
• Exclude a series from the tooltip entirely with showInTooltip: false.