Dual axis currency labels
Euro and US-dollar axes with compact currency labels.
Open the chart without page chrome ↗
// First chart on this page. The example combines several charts or controls;
// open the standalone example for the full source.
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "line",
toolbar: {
show: false
}
},
series: [
{
name: "EU revenue",
type: "column",
data: [3163049, 2954905, 2677562, 3179511, 2438222, 2192909, 2027017, 1283402]
},
{
name: "US revenue",
type: "line",
data: [1113266, 1866497, 1422396, 1410777, 2138920, 2029703, 2415855, 2464698]
}
],
stroke: {
width: [0, 3]
},
xaxis: {
categories: ["Q1 25", "Q2 25", "Q3 25", "Q4 25", "Q1 26", "Q2 26", "Q3 26", "Q4 26"]
},
yaxis: [
{
labels: {
formatter: (v) => ((v) => { if (v == null || isNaN(v)) return '–'; const a = Math.abs(v), s = v < 0 ? '\u2212' : ''; if (a >= 1e9) return s + '€' + (Math.round(a / 1e8) / 10) + 'B'; if (a >= 1e6) return s + '€' + (Math.round(a / 1e5) / 10) + 'M'; if (a >= 1e4) return s + '€' + (Math.round(a / 100) / 10) + 'k'; return s + '€' + Math.round(a).toLocaleString('en'); })(v)
},
title: {
text: "EUR"
}
},
{
opposite: true,
labels: {
formatter: (v) => '$' + (Math.round((v / 1e6) * 10) / 10) + 'M'
},
title: {
text: "USD"
}
}
],
tooltip: {
y: {
formatter: (v, o) => (o.seriesIndex ? '$' + v.toLocaleString('en') : ((v) => { if (v == null || isNaN(v)) return '–'; const a = Math.abs(v), s = v < 0 ? '\u2212' : ''; if (a >= 1e9) return s + '€' + (Math.round(a / 1e8) / 10) + 'B'; if (a >= 1e6) return s + '€' + (Math.round(a / 1e5) / 10) + 'M'; if (a >= 1e4) return s + '€' + (Math.round(a / 100) / 10) + 'k'; return s + '€' + Math.round(a).toLocaleString('en'); })(v))
}
},
title: {
text: "Revenue by market"
},
theme: {
mode: "light",
preset: "coastal"
}
}import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
WestCoastCharts.use(types)
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "line",
toolbar: {
show: false
}
},
series: [
{
name: "EU revenue",
type: "column",
data: [3163049, 2954905, 2677562, 3179511, 2438222, 2192909, 2027017, 1283402]
},
{
name: "US revenue",
type: "line",
data: [1113266, 1866497, 1422396, 1410777, 2138920, 2029703, 2415855, 2464698]
}
],
stroke: {
width: [0, 3]
},
xaxis: {
categories: ["Q1 25", "Q2 25", "Q3 25", "Q4 25", "Q1 26", "Q2 26", "Q3 26", "Q4 26"]
},
yaxis: [
{
labels: {
formatter: (v) => ((v) => { if (v == null || isNaN(v)) return '–'; const a = Math.abs(v), s = v < 0 ? '\u2212' : ''; if (a >= 1e9) return s + '€' + (Math.round(a / 1e8) / 10) + 'B'; if (a >= 1e6) return s + '€' + (Math.round(a / 1e5) / 10) + 'M'; if (a >= 1e4) return s + '€' + (Math.round(a / 100) / 10) + 'k'; return s + '€' + Math.round(a).toLocaleString('en'); })(v)
},
title: {
text: "EUR"
}
},
{
opposite: true,
labels: {
formatter: (v) => '$' + (Math.round((v / 1e6) * 10) / 10) + 'M'
},
title: {
text: "USD"
}
}
],
tooltip: {
y: {
formatter: (v, o) => (o.seriesIndex ? '$' + v.toLocaleString('en') : ((v) => { if (v == null || isNaN(v)) return '–'; const a = Math.abs(v), s = v < 0 ? '\u2212' : ''; if (a >= 1e9) return s + '€' + (Math.round(a / 1e8) / 10) + 'B'; if (a >= 1e6) return s + '€' + (Math.round(a / 1e5) / 10) + 'M'; if (a >= 1e4) return s + '€' + (Math.round(a / 100) / 10) + 'k'; return s + '€' + Math.round(a).toLocaleString('en'); })(v))
}
},
title: {
text: "Revenue by market"
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render() Waiting for the chart.
Open Data & agent view to read this chart through chart.describe().
Read from the running library through its optional agent/describe module. Text, table and JSON share the same snapshot. Demo data only.
$ wcc chart export mixed-dual-axis-currency-labels.json --out mixed-dual-axis-currency-labels.svg --with-table Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Save a JSON spec first and check the loaded runtime and supported modules before rendering. Command reference
Loading /gallery/mixed/dual-axis-currency-labels/index.md …