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

# Intro

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

## Getting Started

Getting data visualization right starts with determining the goal of your visualization and selecting a suitable chart type.

The purpose of data visualization is to transform complex information into clear, actionable insights. Charts are the most effective tool for this purpose. Selecting the right chart depends on the data you’re working with and the message you want to communicate. Common chart types with their appropriate use cases are outlined below to help you present data clearly, accurately, and with maximum impact.

<Note>Engineers can check out [our documentation for our extended charting library here](/docs/extended-libraries/charts).</Note>

## Chart Types & Usage Rules

### A Quick Guide

<table>
  <tr>
    <td className="pr-2">Chart Type</td>
    <td className="pr-2">Usage</td>
    <td className="pr-2">Design Guide</td>
  </tr>

  <tr>
    <td className="pr-2">Bar Chart</td>

    <td className="pr-2">
      <ul>
        <li>The distribution of data points within the same category</li>
      </ul>
    </td>

    <td className="pr-2">
      <ul>
        <li>4px corner radius for top left & right</li>
      </ul>
    </td>
  </tr>

  <tr>
    <td className="pr-2">Grouped Bar Chart</td>

    <td className="pr-2">
      <ul>
        <li>Making comparisons across different categories of data</li>
      </ul>
    </td>

    <td className="pr-2">
      <ul>
        <li>4px corner radius for top left & right</li>
      </ul>
    </td>
  </tr>

  <tr>
    <td className="pr-2">Stacked Bar Chart</td>

    <td className="pr-2">
      <ul>
        <li>Used to compare numeric values between levels of a categorical variable</li>
      </ul>
    </td>

    <td className="pr-2">
      <ul>
        <li>4px corner radius for top left & right 4px spacing between bar sections</li>
      </ul>
    </td>
  </tr>

  <tr>
    <td className="pr-2">Donut Chart</td>

    <td className="pr-2">
      <ul>
        <li>Illustrates how a total is divided among categories</li>
      </ul>
    </td>

    <td className="pr-2">
      <ul>
        <li>4px spacing between donut sections</li>
      </ul>
    </td>
  </tr>

  <tr>
    <td className="pr-2">Line Chart</td>

    <td className="pr-2">
      <ul>
        <li>Use a line chart to show trends or changes over time, to highlight the movement or pattern of data</li>
      </ul>
    </td>

    <td className="pr-2">
      <ul>
        <li>Each color has an assigned stroke, which helps maintain consistency and clarity. Do not edit the stroke.</li>
        <li>Keep the edge corners rounded</li>
      </ul>
    </td>
  </tr>

  <tr>
    <td className="pr-2">Area Chart</td>

    <td className="pr-2">
      <ul>
        <li>Use an area chart to show trends and data magnitude over time. The filled area highlights total values.</li>
      </ul>
    </td>

    <td className="pr-2">
      <ul>
        <li>Each color has its assigned stroke, which helps maintain consistency, clarity in the UI, and adds appropriate spacing</li>
        <li>Keep the edge peaks rounded</li>
      </ul>
    </td>
  </tr>
</table>

Accessibility requirements for all:

<ul>
  <li>Utilize the defined color palettes and patterns for contrast requirements</li>
  <li>Use hover states using a tooltip or popover and/or contextual labeling showcasing data required</li>
  <li>Follow all labeling requirements ex: title, axis, legend, etc.</li>
</ul>

#### Category Comparison (Including Ranking)

This category is used to evaluate and contrast values across distinct groups to highlight differences, similarities, or order of magnitude.

<Columns cols={4}>
  <Card title="Bar" href="/docs/web/data-visualization/bar-charts" arrow="false">
    <img src="https://mintcdn.com/servicetitan/JOXKXxZG3fxsW6pa/images/docs/web/data-visualization/introduction/bar-light.png?fit=max&auto=format&n=JOXKXxZG3fxsW6pa&q=85&s=080c2af114fcfe3f357a008e6f3327ef" alt="A bar chart with three variables" className="block dark:hidden" width="600" height="600" data-path="images/docs/web/data-visualization/introduction/bar-light.png" />

    <img src="https://mintcdn.com/servicetitan/CeN0_C35yWeoo5-G/images/docs/web/data-visualization/introduction/bar-dark.png?fit=max&auto=format&n=CeN0_C35yWeoo5-G&q=85&s=94bd907578c42a1c2141d34b4e61e103" alt="A bar chart with three variables" className="hidden dark:block" width="600" height="600" data-path="images/docs/web/data-visualization/introduction/bar-dark.png" />
  </Card>

  <Card title="Grouped Bar" href="/docs/web/data-visualization/bar-charts#rules-on-the-usage-of-grouped-bar-charts" arrow="false">
    <img src="https://mintcdn.com/servicetitan/JOXKXxZG3fxsW6pa/images/docs/web/data-visualization/introduction/grouped-bar-light.png?fit=max&auto=format&n=JOXKXxZG3fxsW6pa&q=85&s=3817e5e3cd022aa33615fddf9b0bd1ba" alt="A grouped bar chart with two variables" className="block dark:hidden" width="600" height="600" data-path="images/docs/web/data-visualization/introduction/grouped-bar-light.png" />

    <img src="https://mintcdn.com/servicetitan/JOXKXxZG3fxsW6pa/images/docs/web/data-visualization/introduction/grouped-bar-dark.png?fit=max&auto=format&n=JOXKXxZG3fxsW6pa&q=85&s=0a972a9173f31c8211c1baf725f6344a" alt="A grouped bar chart with two variables" className="hidden dark:block" width="600" height="600" data-path="images/docs/web/data-visualization/introduction/grouped-bar-dark.png" />
  </Card>

  <Card title="Horizontal Bar" href="/docs/web/data-visualization/bar-charts" arrow="false">
    <img src="https://mintcdn.com/servicetitan/Pixp9VdUcd3IunYS/images/docs/web/data-visualization/introduction/horizontal-bar-light.png?fit=max&auto=format&n=Pixp9VdUcd3IunYS&q=85&s=19e1c5dc31c02325290c54fce8ac3b4f" alt="A horizontal bar chart with three variables" className="block dark:hidden" width="600" height="600" data-path="images/docs/web/data-visualization/introduction/horizontal-bar-light.png" />

    <img src="https://mintcdn.com/servicetitan/Pixp9VdUcd3IunYS/images/docs/web/data-visualization/introduction/horizontal-bar-dark.png?fit=max&auto=format&n=Pixp9VdUcd3IunYS&q=85&s=7631b30a9a846c478515f6fdeaf5f903" alt="A horizontal bar chart with three variables" className="hidden dark:block" width="600" height="600" data-path="images/docs/web/data-visualization/introduction/horizontal-bar-dark.png" />
  </Card>
</Columns>

#### Trends (Over Time)

This category is used to display how data changes over time, helping to reveal patterns, growth, decline, or cyclical behavior.

<Columns cols={4}>
  <Card title="Line Chart" href="/docs/web/data-visualization/line-charts" arrow="false">
    <img src="https://mintcdn.com/servicetitan/JOXKXxZG3fxsW6pa/images/docs/web/data-visualization/introduction/line-chart-light.png?fit=max&auto=format&n=JOXKXxZG3fxsW6pa&q=85&s=4c12f69f26dcef1f97a84411108faf0e" alt="A line chart with two variables" className="block dark:hidden" width="600" height="600" data-path="images/docs/web/data-visualization/introduction/line-chart-light.png" />

    <img src="https://mintcdn.com/servicetitan/JOXKXxZG3fxsW6pa/images/docs/web/data-visualization/introduction/line-chart-dark.png?fit=max&auto=format&n=JOXKXxZG3fxsW6pa&q=85&s=499673547231d872cf061296921510a5" alt="A line chart with two variables" className="hidden dark:block" width="600" height="600" data-path="images/docs/web/data-visualization/introduction/line-chart-dark.png" />
  </Card>
</Columns>

#### Part-to-Whole

This category shows how individual segments contribute to a total, allowing audiences to understand proportions and overall composition.

<Columns cols={4} className="mb-4 ">
  <Card title="Stacked Chart" href="/docs/web/data-visualization/bar-charts#rules-on-the-usage-of-stacked-bar-charts" arrow="false">
    <img src="https://mintcdn.com/servicetitan/JOXKXxZG3fxsW6pa/images/docs/web/data-visualization/introduction/stacked-chart-light.png?fit=max&auto=format&n=JOXKXxZG3fxsW6pa&q=85&s=7c16c6f21dbe4e805b2d35143de0b679" alt="A stacked area chart with three variables" className="block dark:hidden" width="600" height="600" data-path="images/docs/web/data-visualization/introduction/stacked-chart-light.png" />

    <img src="https://mintcdn.com/servicetitan/CeN0_C35yWeoo5-G/images/docs/web/data-visualization/introduction/stacked-chart-dark.png?fit=max&auto=format&n=CeN0_C35yWeoo5-G&q=85&s=635eb07d54d797bd1d94b81c981573b9" alt="A stacked area chart with three variables" className="hidden dark:block" width="600" height="600" data-path="images/docs/web/data-visualization/introduction/stacked-chart-dark.png" />
  </Card>

  <Card title="Pie/Donut" href="/docs/web/data-visualization/donut-charts" arrow="false">
    <img src="https://mintcdn.com/servicetitan/JOXKXxZG3fxsW6pa/images/docs/web/data-visualization/introduction/pie-donut-light.png?fit=max&auto=format&n=JOXKXxZG3fxsW6pa&q=85&s=faaeab7388c570f6c30cb2ab062f7843" alt="A stacked area chart with three variables" className="block dark:hidden" width="600" height="600" data-path="images/docs/web/data-visualization/introduction/pie-donut-light.png" />

    <img src="https://mintcdn.com/servicetitan/CeN0_C35yWeoo5-G/images/docs/web/data-visualization/introduction/pie-donut-dark.png?fit=max&auto=format&n=CeN0_C35yWeoo5-G&q=85&s=7e90d32dd8ebf07bad91f0fbbbb60c21" alt="A stacked area chart with three variables" className="hidden dark:block" width="600" height="600" data-path="images/docs/web/data-visualization/introduction/pie-donut-dark.png" />
  </Card>

  <Card title="Stacked Area" href="/docs/web/data-visualization/area-charts" arrow="false">
    <img src="https://mintcdn.com/servicetitan/Pixp9VdUcd3IunYS/images/docs/web/data-visualization/introduction/stacked-area-light.png?fit=max&auto=format&n=Pixp9VdUcd3IunYS&q=85&s=891e6997156f69fa4bf521463eae48bc" alt="A stacked area chart with three variables" className="block dark:hidden" width="600" height="600" data-path="images/docs/web/data-visualization/introduction/stacked-area-light.png" />

    <img src="https://mintcdn.com/servicetitan/Pixp9VdUcd3IunYS/images/docs/web/data-visualization/introduction/stacked-area-dark.png?fit=max&auto=format&n=Pixp9VdUcd3IunYS&q=85&s=ae0366e60e1a0a4ec182315424fb1b1a" alt="A stacked area chart with three variables" className="hidden dark:block" width="600" height="600" data-path="images/docs/web/data-visualization/introduction/stacked-area-dark.png" />
  </Card>
</Columns>

<Columns cols={4}>
  <Frame caption="Funnel" className="px-4 pt-4 text-center flex flex-col gap-2">
    <span>Coming soon</span>
    <span className="text-xs">Currently in progress</span>
  </Frame>

  <Frame caption="Gauge Charts" className="px-4 pt-4 text-center flex flex-col gap-2">
    <span>Coming soon</span>
    <span className="text-xs">Currently in progress</span>
  </Frame>
</Columns>

<Card title="Questions? Challenges?" icon="link" href="https://servicetitan.enterprise.slack.com/archives/C0881LFTGDR" arrow="true" cta="Click here">
  Contact the Visual Design team on the #ask-vizd channel
</Card>