> ## 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.

# Look & Feel

> It's important to visualize your data consistently to create clear and effective charts. This guide provides the main rules to help you design consistent, accessible, and legible data stories.

## A Quick Guide

| Palette Type | Use When | Best for Chart Types |
| - | - | - |
| Monochrome default | <ul><li>Visualizing data with a natural order or progression</li><li>Showing increasing or decreasing values (e.g. volume, intensity, time)</li></ul> | <ul><li>Bar charts</li><li>Grouped bar charts</li><li>Stacked bar charts</li><li>Donut charts</li></ul> |
| Pattern | <ul><li>Used as the second visual variable in charts with four variables and under.</li></ul> | <ul><li>Bar charts</li><li>Grouped bar charts</li><li>Stacked bar charts</li><li>Donut charts</li></ul> |
| Categorical Palette | <ul><li>Displaying 5+ distinct values</li></ul> | <ul><li>Data visualizations with over 5+ variables</li></ul> |
| Semantic (Status) | <ul><li>Showing deviation from a central point (e.g. baseline, average, or target)</li><li>Semantic colors showing positive, negative, and neutral</li><li>Emphasizing both direction and magnitude of change</li></ul> | <ul><li>Bar charts</li></ul> |

## Color Palette

Utilize this monochrome palette in this specific order for charts with 4
variables or less.

![default, dark, pattern, and outline for the blue palette](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/data-viz-color-palette.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=986d914bb0279ebfdfdd405329bfff9d)

Data Visualization Color Palette, Light & Dark mode

## Variable Ordering

<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>

One Variable

![variable ordering, 1 variable](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/variable-ordering-1.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=a58f60c75b1c85e03e3b59b825eb9be8)

Two Variables

![variable ordering, 2 variables](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/variable-ordering-2.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=0227e7c61b18dfc053e724b468bc2eaf)

> [!NOTE]
>
> When adding a 4th variable to a stacked bar chart, place it at the bottom to support visual accessibility and maintain consistency.

Three Variables

![variable ordering, 3 variables](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/variable-ordering-3.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=d7799b3fba36963644c2bc771ccd2d1a)

Four Variables

![variable ordering, 4 variables](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/variable-ordering-4.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=7483ec5e349d9a7b1b2e3e83216b839a)

### General Design Guidelines

### Bar charts

![bar chart with three
variables](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/charts-bar.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=5abe77c7627f0a6bf1463a8851a8561d)

<ol>
  <li>
    **Top left and right corner**: Border radius is 4px
  </li>

  <li>
    **Space between bars**: Space between bars should abide by
    Anvil spacing rules and be appropriate for the width of the total graph
  </li>

  <li>
    **Stroke and pattern**: The lightest color and pattern
    requires a 1px stroke for accessibility
  </li>
</ol>

### Grouped bar charts

![grouped bar charts, each with three
variables](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/charts-group-bar.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=d57947e57ca008a4d008cfc048843846)

<ol>
  <li>
    **General guidance from Bar Charts apply**: See guidance
    above
  </li>

  <li>
    **Space between bars**: Space between bars should abide by
    Anvil spacing rules and be appropriate for the width of the total graph
  </li>

  <li>
    **Space between sections**: Space between bars should abide
    by Anvil spacing rules, should be larger than the space between bars,
    and be appropriate for the width of the total graph
  </li>
</ol>

### Stacked bar charts

![three stacked bar charts, each with three
variables](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/charts-stack-bar.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=06861501fb588734896f17fba23e9acc)

<ol>
  <li>
    **General guidance from Bar Charts apply**: See guidance
    above
  </li>

  <li>
    **Space between sections**: 4px spacing is recommended
  </li>
</ol>

### Donut charts

![donut bar chart with four
variables](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/charts-donut.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=b510d7a8467fc469a58b8c88b21f22f9)

<ol>
  <li>
    **Space between pie sections**: 4px spacing is recommended
  </li>

  <li>
    **Direct labeling**: It’s best practice to have the value
    directly on the corresponding donut slice. If this is not possible, a
    hover state is required. More info on direct labeling here.
  </li>
</ol>

## Real Example

The following is a possible real-world example. This example displays multiple
datasets on a single page, including a donut chart, a single stacked bar chart,
a horizontal bar graph, and a larger bar graph all utilizing our monochrome
palette.

![page with several donut charts and a stacked bar chart](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/real-example-1.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=d27965fa26198a8b80d7f70c94c6335f)

> **[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.