Dual value axes

Give each unit its own axis: declare two entries in valueAxes and point each series at one via axis. Here revenue bars scale against the left axis while conversion rate draws as a line against its own percent-formatted axis on the right.

Open in demo ↗

// Two value axes: revenue bars scale against the left axis, conversion rate
// (0–1) draws as a line against its own right-hand axis.
import type { MochartInputConfig } from '@mochart/core';

export const config: MochartInputConfig = {
  version: '1.0.0',
  title: { text: 'Revenue vs Conversion' },
  categoryAxis: { property: 'month', type: 'string', scale: 'ordinal' },
  valueAxes: [
    { id: 'money', title: 'Revenue' },
    { id: 'rate', title: 'Conversion', side: 'end', tickLabelFormat: '.0%' }
  ],
  series: [
    { property: 'revenue', title: 'Revenue', renderer: 'bar', axis: 'money' },
    { property: 'conversion', title: 'Conversion', renderer: 'line', axis: 'rate', valueFormat: '.1%' }
  ]
};

export const data = [
  { month: 'Jan', revenue: 42, conversion: 0.031 },
  { month: 'Feb', revenue: 48, conversion: 0.034 },
  { month: 'Mar', revenue: 45, conversion: 0.042 },
  { month: 'Apr', revenue: 61, conversion: 0.039 },
  { month: 'May', revenue: 58, conversion: 0.047 },
  { month: 'Jun', revenue: 72, conversion: 0.052 }
];

How it works

• Each axis gets an id; series reference it with axis. With a single axis none of this is needed — ids matter only when there are several.
• side: 'end' moves the second axis to the end side (right, for vertical charts).
• tickLabelFormat: '.0%' is a d3-format string; the series' own valueFormat formats the tooltip value independently.
• Mixing renderers per series (bars + line here) needs no extra configuration — set each series' renderer.