> ## 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. export const DoDont = ({text, type, children}) => { return <> {type === "do" &&
{children &&
{children}
}

Do {text && {text}}

} {type === "dont" &&
{children &&
{children}
}

Don't {text && {text}}

} {type === "caution" &&
{children &&
{children}
}

Caution {text && {text}}

} ; }; ## 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. We do not use overlapped area charts to avoid visual clutter and misinterpretation. ## Variable Ordering Each color has its assigned stroke.
1 Variable 2 Variables 3 Variables 4 Variables 5+ Variables
If your chart has one variable, start with the default hue in the palette. If your chart has two variables, use the default and dark blue. If your chart has three variables, add the diagonal pattern. If your chart has four variables, add the lightest blue with a stroke. For five + variables, see our extended color palette.
1 variable, blue palette 1 variable, blue palette 2 variables, blue palette 2 variables, blue palette 3 variables, blue palette 3 variables, blue palette 4 variables, blue palette 4 variables, blue palette 5 plus variables, categorical palette 5 plus variables, categorical palette
## 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
### 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
## How to Use area chart showing how individual parts contribute to total over time area chart with overlapping, multiple categories Contact the Visual Design team on the #ask-vizd channel