# Area chart

Show the amount over time with a filled series.

## Install

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

## Usage

Place Area inside Plot. The fill extends to zero and fades toward the baseline.

Multiple areas overlap on the same scale. They are not stacked; use grouped bars when overlap would obscure the comparison.

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

## Examples

### One series

Monthly revenue uses one filled series with an outlined edge.

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

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

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

### Overlapping series

Desktop and mobile sessions share a scale. Their legend and tooltip keep the two measurements identifiable.

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

    const data = [
        { month: 'Jan', desktop: 186, mobile: 120 },
        { month: 'Feb', desktop: 242, mobile: 150 },
        { month: 'Mar', desktop: 218, mobile: 180 },
        { month: 'Apr', desktop: 304, mobile: 220 },
        { month: 'May', desktop: 286, mobile: 240 }
    ];
    const config = {
        desktop: { label: 'Desktop', color: 'var(--chart-1)' },
        mobile: { label: 'Mobile', color: 'var(--chart-2)' }
    };
</script>

<Chart.Root {data} {config} x="month" aria-label="Desktop and mobile sessions" class="w-full">
    <Chart.Plot>
        <Chart.Grid />
        <Chart.XAxis />
        <Chart.YAxis />
        <Chart.Area key="desktop" />
        <Chart.Area key="mobile" />
    </Chart.Plot>
    <Chart.Tooltip />
    <Chart.Legend />
</Chart.Root>
~~~~

### Changing values

Switch forecasts while the chart is moving. The next transition starts from the current display.

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

    let revised = $state(false);
    const data = $derived(
        revised
            ? [
                  { month: 'April', orders: 240 },
                  { month: 'May', orders: 190 },
                  { month: 'June', orders: 320 }
              ]
            : [
                  { month: 'April', orders: 170 },
                  { month: 'May', orders: 280 },
                  { month: 'June', orders: 210 }
              ]
    );
    const config = { orders: { label: 'Orders', color: 'var(--chart-1)' } };

    function switchRevision() {
        revised = !revised;
    }
</script>
<div class="w-full">
    <Button variant="secondary" onclick={switchRevision}>
        {revised ? 'Show original forecast' : 'Show revised forecast'}
    </Button>
    <Chart.Root
        {data}
        {config}
        x="month"
        aria-label="Order forecasts for April through June"
        class="mt-4"
    >
        <Chart.Plot>
            <Chart.Grid />
            <Chart.XAxis />
            <Chart.YAxis />
            <Chart.Area key="orders" />
        </Chart.Plot>
        <Chart.Tooltip />
        <Chart.Legend />
    </Chart.Root>
</div>
~~~~

### Continuous motion

A light sweep travels through the filled area without changing its values.

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

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

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

For the rendered guide, visit [Area chart](/docs/components/chart/area).