> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Area Charts

> An area chart is similar to a line chart, but with one key difference: it fills the space under the line with color or shading. This makes it useful not just for showing how values change over time, but also for helping you quickly understand the volume or size of those values.

## Area charts include two main types:

* Stacked area charts show how multiple series add up to a total over time, highlighting the contribution of each part.
* Overlapped area charts display individual series on top of each other with transparency, making it easier to compare trends, but harder to read when there are many categories.

> [!NOTE]
>
> We do not use overlapped area charts to avoid visual clutter and misinterpretation.

## Variable Ordering

> [!NOTE]
>
> Each color has its assigned stroke.

<table>
  <tr>
    <td>**1 Variable**</td>
    <td>**2 Variables**</td>
    <td>**3 Variables**</td>
    <td>**4 Variables**</td>
    <td>**5+ Variables**</td>
  </tr>

  <tr>
    <td>If your chart has **one** variable, start with the default hue in the palette.</td>
    <td>If your chart has **two** variables, use the default and dark blue.</td>
    <td>If your chart has **three** variables, add the diagonal pattern.</td>
    <td>If your chart has **four** variables, add the lightest blue with a stroke.</td>
    <td>For **five +** variables, see our extended color palette.</td>
  </tr>

  <tr>
    <td>
      ![1 variable, blue palette](https://mintcdn.com/servicetitan/xuNyaefLU8rAWiT_/images/docs/web/data-visualization/introduction/1-variable-light.png?fit=max\&auto=format\&n=xuNyaefLU8rAWiT_\&q=85\&s=3578af7a0c5765cf0700ec92344a2f93)
    </td>

    <td>
      ![2 variables, blue palette](https://mintcdn.com/servicetitan/CeN0_C35yWeoo5-G/images/docs/web/data-visualization/introduction/2-variables-light.png?fit=max\&auto=format\&n=CeN0_C35yWeoo5-G\&q=85\&s=ced539ea631eceba3e085dbb8c45b97e)
    </td>

    <td>
      ![3 variables, blue palette](https://mintcdn.com/servicetitan/CeN0_C35yWeoo5-G/images/docs/web/data-visualization/introduction/3-variables-light.png?fit=max\&auto=format\&n=CeN0_C35yWeoo5-G\&q=85\&s=ac35215bbd10537983f95ca463ad9f6b)
    </td>

    <td>
      ![4 variables, blue palette](https://mintcdn.com/servicetitan/CeN0_C35yWeoo5-G/images/docs/web/data-visualization/introduction/4-variables-light.png?fit=max\&auto=format\&n=CeN0_C35yWeoo5-G\&q=85\&s=cce2951a318a67402a1c28539a3490ff)
    </td>

    <td>
      ![5 plus variables, categorical palette](https://mintcdn.com/servicetitan/CeN0_C35yWeoo5-G/images/docs/web/data-visualization/introduction/5-plus-variables-light.png?fit=max\&auto=format\&n=CeN0_C35yWeoo5-G\&q=85\&s=1a0916fe81302e500dc4d7b9c7859eeb)
    </td>
  </tr>
</table>

## How to incorporate color:

Below are example sof Area of Focus charts that use both monochrome and categorical color palettes. See examples on how to implement color below.

### Monochrome palette for area charts

Use the monochromatic color palette for charts that have 4 variables or less.

![Monochrome area chart with progress over time](https://mintcdn.com/servicetitan/LXKsjszJQqtNIgup/images/docs/web/data-visualization/area-charts/area-charts-monochrome.png?fit=max\&auto=format\&n=LXKsjszJQqtNIgup\&q=85\&s=d46d6b4db945a0927d1237f022791e50)

### Categorical palette for area charts

Use the monochromatic color palette for charts that have 4 variables or less.

![Categorical area chart with progress over time](https://mintcdn.com/servicetitan/UjzR2VvA6ZE_Niqw/images/docs/web/data-visualization/area-charts/area-charts-categorical.png?fit=max\&auto=format\&n=UjzR2VvA6ZE_Niqw\&q=85\&s=78015f747f474ba5e82d3df4e5a745c6)

## How to Use

![area chart showing how individual parts contribute to total over time](https://mintcdn.com/servicetitan/LXKsjszJQqtNIgup/images/docs/web/data-visualization/area-charts/area-charts-do.png?fit=max\&auto=format\&n=LXKsjszJQqtNIgup\&q=85\&s=da373d8a050f51d29ec470022db3c97f)

**Do**
use a stacked area chart when you want to clearly show how individual parts contribute to the total over time - it's visually easier to compare both overall trends and segment sizes.

![area chart with overlapping, multiple categories](https://mintcdn.com/servicetitan/UjzR2VvA6ZE_Niqw/images/docs/web/data-visualization/area-charts/area-charts-dont.png?fit=max\&auto=format\&n=UjzR2VvA6ZE_Niqw\&q=85\&s=7827835f00cd99ac8288b37c8447ad90)

**Don’t**
use an overlapped area chart when comparing multiple categories overlapping can make it hard to see individual values and leads to visual confusion.

> **[Questions? Challenges?](https://servicetitan.enterprise.slack.com/archives/C0881LFTGDR)**
>
> Contact the Visual Design team on the #ask-vizd channel


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.