The DualChart component overlays line charts on top of bar charts, allowing you to visualize different metrics simultaneously (e.g., actuals vs. targets). It supports multiple bar series (grouped or stacked) and multiple line series. It is responsive and includes interactive tooltips and customizable legends.
<script setup lang="ts">
import { DualChart, LegendPosition } from 'vue-charts';
type DataItem = {
month: string;
revenue: number;
costs: number;
profit: number;
};
const data: DataItem[] = [
{ month: "January", revenue: 45000, costs: 30000, profit: 15000 },
{ month: "February", revenue: 52000, costs: 35000, profit: 17000 },
];
const barCategories = {
revenue: { name: "Revenue", color: "#3b82f6" },
costs: { name: "Costs", color: "#ef4444" },
};
const lineCategories = {
profit: { name: "Profit", color: "#22c55e" },
};
</script>
<template>
<DualChart
:data="data"
:bar-categories="barCategories"
:line-categories="lineCategories"
:bar-y-axis="['revenue', 'costs']"
:line-y-axis="['profit']"
:height="300"
:x-formatter="(tick: number): string => data[tick]?.month || ''"
:tooltip-title-formatter="(d: DataItem) => d.month"
y-label="Amount ($)"
/>
</template>
