> ## 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. # Line Charts > A line chart is a simple and effective type of graph used to visualize how values change over time. It displays data points (called markers) on a two-dimensional XY grid and connects them with straight lines to illustrate progression. Time is shown on the horizontal (X) axis, while the measured value (also known as the variable of interest) appears on the vertical (Y) axis. Line charts are ideal for tracking trends or changes over a continuous time period, comparing multiple datasets across the same timeline, and presenting clear, easy-to-read patterns within the data. 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}}

} ; }; For line charts, we recommend an ideal state of 3 data sets for optimal readability and immediate understanding. Our color palette offers additional options, allowing users to add more lines as needed. However, we advise limiting the total to no more than 6 data sets to prevent visual clutter and maintain clarity. This approach balances a clean default view with flexibility for more complex analysis. Note: Use only when data points are continuous; the chart assumes a logical progression and meaningful connection between all points. Example of a line chart using and hover state: A line chart with redlines
  1. Headline
  2. Axis label
  3. Legend label
  4. Direct labeling
  5. Hover state tooltip
 ## Variable ordering | **1 Variable** | **2 Variables** | **3 Variables** | **4+ Variables** | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | If your chart has **one** variable, start with the default blue hue in the palette. | If your chart has **two** variables, use the default and dark blue. | If your chart has **three** variables, add the cyan. | For 4+ variables, continue with the categorical color palette. | | variable ordering, 1 variable | variable ordering, 2 variables | variable ordering, 1 variable | variable ordering, 4+ variables |
One Variable 1 variable line chart example
Two Variables 2 variables line chart example
Three Variables 3 variables line chart example
Four Variables 4+ variables line chart example
## Shapes Shapes in line charts help tell data series apart. When using 3 or more variables, adding distinct shapes improves accessibility for color-blind or visually impaired users. Make sure the legend uses shapes only to clearly show each series. Follow the shape order as it is displayed below. Note: Working with an edge case and need more shape options? Feel free to reach out in the #askvizd channel, we're happy to help!
Triangle
Square
Circle
Additional shapes for edge case scenarios:
Rhombus
Hexagon
Kite
## Real Example #1 The following is a real-world example from our product. This example displays 3 variables in a single line chart. It uses the first three colors of the categorical color palette and shapes to show the difference between each line. Average ranking in Google's local pack when searching for the business's categories (chart) ### How to Use The following Do's and Don'ts illustrate best practices and common mistakes to help guide effective use of line charts in data visualizations. line chart with consistent shape sizing line chart with inconsistent shape sizing line chart with shapes for data points at 3+ variables line chart with shapes for data points with less than 3 variables line chart with balanced axises line chart without balanced axises line chart with line ending on the year the data ends line chart with line ending on the year the chart ends line chart with six variables line chart with random color choices ## Area of Focus & Hover States Below is an example of Area of Focus charts that use subtle emphasis of color to highlight key data without losing overall context. In contrast, hover states apply stronger, interactive visual changes to indicate active user engagement and selection. ### Area of Focus To highlight a single variable, use the default blue for the focused variable and grey 600 for all others. In this scenario, there should be no cursor for the area of focus, this represents a focus state, not a hover interaction. ### Hover State When in [hover states](/docs/web/data-visualization/accessibility#hover-states), set all non-hovered elements to 20% opacity to keep focus on the highlighted data point, and use Anvil's [Tooltip component](/docs/web/components/tooltip/design) to display the value/label on hover.
Line chart with the highlighted line
Line chart with the highlighted line with a hover state
## Keep the Content Consistent On the “Progress Over Time January” line chart below, the viewer can toggle six variables. To ensure each variable keeps its assigned color when toggled: turning a variable off should only hide it, not reassign or shift colors among the remaining series. For example, if Completed Tasks is unchecked, its color remains reserved so the visible lines, legend, and visual mapping stay stable. Do not change the styling or reassign colors (for example, altering color, stroke, or pattern).
All checked variables are visible Line chart with the highlighted line with a hover state
Unchecked, one variable Line chart with the highlighted line with a hover state
Contact the Visual Design team on the #ask-vizd channel