Währungsbeschriftungen auf zwei Achsen
Euro- und US-Dollar-Achsen mit kompakten Währungsbeschriftungen.
Diagramm ohne Website-Rahmen öffnen ↗
// 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() Warten auf das Diagramm.
Open Data & agent view to read this chart through chart.describe().
Aus der laufenden Bibliothek über das optionale agent/describe -Modul gelesen. Text, Tabelle und JSON zeigen denselben Zustand. Ausschließlich Demonstrationsdaten.
$ 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. Speichern Sie zuerst eine JSON-Spezifikation und prüfen Sie vor dem Rendern die geladene Runtime und die unterstützten Module. Befehlsreferenz
Loading /gallery/mixed/dual-axis-currency-labels/index.md …