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

# Bar Charts

![different types of data viz typography options outlined in the ordered list](https://mintcdn.com/servicetitan/H6IrrYy_BHqQ84Cc/images/docs/web/data-visualization/typography/typography-redlines.png?fit=max\&auto=format\&n=H6IrrYy_BHqQ84Cc\&q=85\&s=8f843d9218b0c8b476fe2bc723571585)

<ol>
  <li>Headline</li>
  <li>Body text or subtitle</li>
  <li>Axis label</li>
  <li>Legend label</li>
  <li>Hover state tooltip</li>
</ol>

## Rules on the usage of Bar Charts

Grouped bar charts are best for showing a distribution of data points or making
comparisons across different categories of data. This chart shows a division of
data points across three different categorical variables (months), not just one.

**Note:** If comparing the totals for a categorical variable are important, then
a different chart type like a standard bar chart or stacked bar chart will be
better at performing the task.

## Rules on the usage of Grouped Bar Charts

Grouped bar charts are best for showing a distribution of data points or making
comparisons across different categories of data. This chart shows a division of
data points across three different categorical variables (months), not just one.

**Note:** If comparing the totals for a categorical variable are important, then
a different chart type like a standard bar chart or stacked bar chart will be
better at performing the task.

![bar chart using 3 variables for each bar](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/bar-charts/bar-charts-do-arrange.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=0c130b6f2f2402addeb421c43dd0a822)

**Do**
arrange bars and their segments intentionally, sorting by descending total value when no natural order exists, and grouping related categories by importance or magnitude to enhance readability and clarity.

![bar chart with 3 variables where each group is displayed in a random order](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/bar-charts/bar-charts-dont-stack-randomly.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=f35d2cff1a11286caa65e499e22ad142)

**Don’t**
stack bar segments in a random or inconsistent order, as it makes the chart hard to interpret and reduces its effectiveness by obscuring patterns and data significance.

## Rules on the usage of Stacked Bar Charts

Used to compare numeric values between levels of a categorical variable.

We use a stacked bar chart when we want to see how each main bar is broken down
into parts based on a second or third category. Each bar is split into sections
that represent the levels of the other categories. The total length of the bar
stays the same, but now we can see how the parts add up to the total.

![stacked bar chart using 3 variables for each bar](https://mintcdn.com/servicetitan/X7UCc5xRXSxfS9Y-/images/docs/web/data-visualization/bar-charts/bar-charts-do-arrange-intentionally.png?fit=max\&auto=format\&n=X7UCc5xRXSxfS9Y-\&q=85\&s=a75c85f4171cc13f8f92405688c089ea)

**Do**
arrange bars and their segments intentionally, sorting by descending total value when no natural order exists, and grouping related categories by importance or magnitude to improve readability and insights.

![stacked bar chart with 3 variables where each group is displayed in a random order](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/bar-charts/bar-charts-dont-arrange-randomly.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=74456dfa0ce2a911c7336dc16f3b98ca)

**Don’t**
stack bar segments randomly or inconsistently, as it makes the chart harder to interpret, obscures patterns, and reduces its effectiveness.

### Real Example

The stacked bar chart shown below demonstrates the correct application of a
monochrome color palette. This visualization compares leads generated, jobs
booked, and new customers over time, making it an ideal candidate for a
monochromatic approach to maintain clarity and reduce cognitive load.

In this chart, the highest (tallest) value segment utilizes the lightest shade
with a pattern, outlined with a 1px stroke for definition. The mid-range value
is represented using the default blue, while the lowest value is displayed in
the darkest shade of blue. To preserve visual consistency and readability, apply
a 4px corner radius to the top of each bar and maintain a 4px vertical
separation between each stacked segment.

![stacked bar chart with monochrome color palette showing leads generated, jobs booked, and new customers over time](https://mintcdn.com/servicetitan/eSZwLejs8pME2ERY/images/docs/web/data-visualization/bar-charts/bar-charts-dontreal-example-2.png?fit=max\&auto=format\&n=eSZwLejs8pME2ERY\&q=85\&s=d33646f31343919ee620ec2995ba508f)

### How to Use:

![bar chart with short labels](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/typography/typography-do-short-labels.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=ae205d65a43e3eaa8c608299655fc6fd)

**Do**
keep text labels short in charts to improve readability and maintain a
clean, uncluttered layout.

![bar chart with long labels that are rotated](https://mintcdn.com/servicetitan/cBm7KXEGzmK35qoE/images/docs/web/data-visualization/typography/typography-dont-rotated-labels.png?fit=max\&auto=format\&n=cBm7KXEGzmK35qoE\&q=85\&s=a3539e41acb6898f4579d85fee0e7f5e)

**Don’t**
use rotated text. Keep all text horizontal for
better readability. If labels overlap, try adjusting the chart type or intervals
instead of rotating—this helps maintain clarity and accessibility.

![bar chart with abbreviated number values, e.g., '6B' for '6 billion'](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/typography/typography-do-large-number-formats.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=c31b552b4b3d1fd7fd36a224dbf9de84)

**Do**
use compact number formats for large values (e.g., write 7B instead of
7,000,000,000) to keep charts clean and easy to read. Use \$, %, km to show
meaning, and add units or timeframes near the data for clarity.

![bar chart with large number values spelled out in full](https://mintcdn.com/servicetitan/cBm7KXEGzmK35qoE/images/docs/web/data-visualization/typography/typography-dont-large-number-formats.png?fit=max\&auto=format\&n=cBm7KXEGzmK35qoE\&q=85\&s=4997cbdbc9ec9bf6c77eeff800701568)

**Don’t**
display long numbers in full like 7,000,000,000.

![bar chart with long labels, turned on its side](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/typography/typography-do-adjust-layout.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=6fb86994241bb33b9d9576eeaf8e36f9)

**Do**
adjust the layout to fit the text—use horizontal labels or a stacked bar chart when it improves readability. Clear, full labels make the chart easier to understand.

![bar chart with long labels that are rotated](https://mintcdn.com/servicetitan/cBm7KXEGzmK35qoE/images/docs/web/data-visualization/typography/typography-dont-force-labels.png?fit=max\&auto=format\&n=cBm7KXEGzmK35qoE\&q=85\&s=4ad9cf86bd24b2aa64a9073703c6e7d1)

**Don’t**
force long labels in layouts that make the text difficult to
read.

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