# Mixed chart

Compare totals and benchmarks in one plot.

## Install

~~~~sh
pnpm dlx @mielui/svelte add chart
~~~~

## Usage

Compose Bar, Line, and Area in the same Plot. All marks use the same numeric axis, so their values must use compatible units.

Lines do not reserve bar slots or contribute to stacked bar totals. Keep target series in config so legends and tooltips can name them.

Use the [Chart API reference](/docs/components/chart.md) for all exported parts and their props.

## Examples

### Totals and target

Bars show measured totals and a line shows the target for the same period.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { month: 'Jan', revenue: 186, target: 160 },
        { month: 'Feb', revenue: 242, target: 190 },
        { month: 'Mar', revenue: 218, target: 220 },
        { month: 'Apr', revenue: 304, target: 250 },
        { month: 'May', revenue: 286, target: 280 },
        { month: 'Jun', revenue: 372, target: 310 }
    ];
    const config = {
        revenue: { label: 'Revenue', color: 'var(--chart-1)' },
        target: { label: 'Target', color: 'var(--chart-2)' }
    };
</script>

<Chart.Root {data} {config} x="month" aria-label="Monthly revenue and target" class="w-full">
    <Chart.Legend />
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Bar key="revenue" />
        <Chart.Line key="target" />
    </Chart.Plot>
    <Chart.Tooltip />
</Chart.Root>
~~~~

### Continuous motion

Bar sweeps and the line highlight continue after entry without changing the dataset.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { month: 'Jan', revenue: 186, target: 160 },
        { month: 'Feb', revenue: 242, target: 190 },
        { month: 'Mar', revenue: 218, target: 220 },
        { month: 'Apr', revenue: 304, target: 250 },
        { month: 'May', revenue: 286, target: 280 },
        { month: 'Jun', revenue: 372, target: 310 }
    ];
    const config = {
        revenue: { label: 'Revenue', color: 'var(--chart-1)' },
        target: { label: 'Target', color: 'var(--chart-2)' }
    };
</script>

<Chart.Root
    {data}
    {config}
    x="month"
    aria-label="Monthly revenue and target"
    class="w-full"
    animation="live"
>
    <Chart.Legend />
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Bar key="revenue" />
        <Chart.Line key="target" />
    </Chart.Plot>
    <Chart.Tooltip />
</Chart.Root>
~~~~

### Custom legend and tooltip

Move the legend above the plot, omit the grid and Y-axis, and render tooltip values through its snippet.

~~~~svelte
<script lang="ts">
    import * as Chart from '@mielui/svelte/components/chart';

    const data = [
        { day: 'Mon', requests: 420, target: 500 },
        { day: 'Tue', requests: 670, target: 600 },
        { day: 'Wed', requests: 590, target: 650 },
        { day: 'Thu', requests: 810, target: 750 },
        { day: 'Fri', requests: 940, target: 800 }
    ];
    const config = {
        target: { label: 'Target', color: 'var(--chart-2)' },
        requests: {
            label: 'API requests',
            color: 'var(--chart-1)',
            format: (value: number) => `${value.toLocaleString()} requests`
        }
    };
</script>
<Chart.Root
    {data}
    {config}
    x="day"
    animation="live"
    aria-label="API requests by weekday"
    class="w-full"
>
    <Chart.Legend>
        {#snippet children({ label, color })}
            <div class="flex items-center gap-2 text-sm">
                <span class="h-0.5 w-5 rounded-full" style:background={color}></span>
                {label}
            </div>
        {/snippet}
    </Chart.Legend>
    <Chart.Plot class="h-56">
        <Chart.XAxis />
        <Chart.Bar key="requests" />
        <Chart.Line key="target" />
    </Chart.Plot>
    <Chart.Tooltip>
        {#snippet children({ label, values })}
            <div class="flex flex-col gap-1">
                <span class="text-foreground-muted">{label}</span>
                {#each values as item (item.key)}
                    <strong class="text-sm font-medium tabular-nums">{item.formatted}</strong>
                {/each}
            </div>
        {/snippet}
    </Chart.Tooltip>
</Chart.Root>
~~~~

For the rendered guide, visit [Mixed chart](/docs/components/chart/mixed).