Skip to main content

​
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.
Engineers build charts with the Chart component from Charts - React (@servicetitan/anvil2-charts-kit) or Charts - React Native (@servicetitan/anvil2-rn-charts-kit). The amCharts themes are deprecated.

​
Chart Types & Usage Rules

​
A Quick Guide

Chart TypeUsageDesign Guide
Bar Chart
  • The distribution of data points within the same category
  • 4px corner radius for top left & right
Grouped Bar Chart
  • Making comparisons across different categories of data
  • 4px corner radius for top left & right
Stacked Bar Chart
  • Used to compare numeric values between levels of a categorical variable
  • 4px corner radius for top left & right 4px spacing between bar sections
Donut Chart
  • Illustrates how a total is divided among categories
  • 4px spacing between donut sections
Line Chart
  • Use a line chart to show trends or changes over time, to highlight the movement or pattern of data
  • Each color has an assigned stroke, which helps maintain consistency and clarity. Do not edit the stroke.
  • Keep the edge corners rounded
Area Chart
  • Use an area chart to show trends and data magnitude over time. The filled area highlights total values.
  • Each color has its assigned stroke, which helps maintain consistency, clarity in the UI, and adds appropriate spacing
  • Keep the edge peaks rounded
Accessibility requirements for all:
  • Utilize the defined color palettes and patterns for contrast requirements
  • Use hover states using a tooltip or popover and/or contextual labeling showcasing data required
  • Follow all labeling requirements ex: title, axis, legend, etc.

​
Category Comparison (Including Ranking)

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

Bar

A bar chart with three variablesA bar chart with three variables

Grouped Bar

A grouped bar chart with two variablesA grouped bar chart with two variables

Horizontal Bar

A horizontal bar chart with three variablesA horizontal bar chart with three variables
This category is used to display how data changes over time, helping to reveal patterns, growth, decline, or cyclical behavior.

Line Chart

A line chart with two variablesA line chart with two variables

​
Part-to-Whole

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

Stacked Chart

A stacked area chart with three variablesA stacked area chart with three variables

Pie/Donut

A stacked area chart with three variablesA stacked area chart with three variables

Stacked Area

A stacked area chart with three variablesA stacked area chart with three variables
Coming soonCurrently in progress

Funnel

Coming soonCurrently in progress

Gauge Charts

Questions? Challenges?

Contact the Visual Design team on the #ask-vizd channel
Last modified on September 24, 2026