Chart - mixed type

[emololftw]

Hey everyone! 👋

Has anyone implemented a mixed chart type (bar + line in the same container)? Or does anyone have a wrapper/component for this already?

Would be great to combine bar and line series in a single chart.

Thanks in advance!

[MILLERMARRU]

No wrapper needed, this is a direct Unovis capability and shadcn-vue's chart component is intentionally a thin, unabstracted layer over it (per the docs: "not wrapped in an abstraction layer, allowing direct use of Unovis features"). Since bar and line are just two separate visual components sharing one VisXYContainer, you render both as siblings:

<script setup lang="ts">
import type { ChartConfig } from '@/components/ui/chart'
import { VisGroupedBar, VisLine, VisXYContainer, VisAxis } from '@unovis/vue'
import { ChartContainer, ChartTooltip, ChartTooltipContent, componentToString } from '@/components/ui/chart'

const data = [
  { month: 'Jan', revenue: 4000, target: 3800 },
  { month: 'Feb', revenue: 3000, target: 3900 },
  { month: 'Mar', revenue: 5000, target: 4200 },
]
type Data = (typeof data)[number]

const chartConfig = {
  revenue: { label: 'Revenue', color: 'var(--chart-1)' },
  target: { label: 'Target', color: 'var(--chart-2)' },
} satisfies ChartConfig
</script>

<template>
  <ChartContainer :config="chartConfig" class="min-h-[400px] w-full">
    <VisXYContainer :data="data">
      <VisGroupedBar :x="(d: Data) => d.month" :y="(d: Data) => d.revenue" :color="chartConfig.revenue.color" />
      <VisLine :x="(d: Data) => d.month" :y="(d: Data) => d.target" :color="chartConfig.target.color" />
      <VisAxis type="x" :tick-format="(d: number) => data[d]?.month" />
      <ChartTooltip :template="componentToString(chartConfig, ChartTooltipContent)" />
    </VisXYContainer>
  </ChartContainer>
</template>

VisGroupedBar and VisLine both read from the same data array passed to VisXYContainer, and both accept their own independent x/y accessors, so the bar series and line series don't have to represent the same field. ChartTooltip picks up both series automatically since it reads from the shared container context, not from either mark individually.

If you want the line to sit on a secondary scale (say revenue in dollars, target as a percentage), that needs a second VisAxis/scale configuration on Unovis's side, worth checking their multi-axis examples if that's your case, but for two series on the same scale the snippet above is the whole thing, no extra component or plugin required.