---
title: Tracking
summary: Component for visualizing activity logs or other monitoring-related data. With its ability to show data in a visually appealing and easily understandable way, the tracking component is an essential tool for any organization that relies on data monitoring and analysis to optimize performance and user experience.
description: Visualize activity logs and uptime data with the tracking component - a compact row of colored blocks that show status over time.
related: [/ui/components/tooltip, /ui/plugins/chart]
source: core/scss/ui/_tracking.scss
classnames:
component:
- class: tracking
desc: Container element
part:
- class: tracking-block
desc: One block in the strip, colored with a bg-{color} utility
modifier:
- class: tracking-squares
desc: Draws the blocks as equal squares instead of tall bars
---
import Subheader from '@ui/Subheader.astro';
import Example from '@components/Example.astro';
import CodeDocs from '@components/CodeDocs.astro';
import Icon from '@ui/Icon.astro'
## Basic example
Build a tracking view from a `.tracking` wrapper with one `.tracking-block` element per time period. Use background classes such as `bg-success` or `bg-danger` to show each status, and add [tooltips](/ui/components/tooltip) for details.
## Tracking inside a card
You can add a tracking component inside the cards to give your reports a fresh look and visualize the status of your system in an attractive way. If you want to read how to add other elements to a card it is worth reading [documentation of card](/ui/components/card).
## Square blocks
Add `tracking-squares` to draw the blocks as squares of equal size instead of tall bars. Use it for a compact status strip, for example one square per day.
## Accessibility
- A tracking strip is a chart made of blocks. Give the container `role="img"` and an `aria-label` that sums it up, for example "Uptime over the last 90 days, 3 incidents".
- The tooltips on the blocks are mouse-only. Put the same information in a table or a summary line so it can be reached another way.
- Green and red blocks look identical to many users. Add a shape, a label, or a legend next to the strip.
- Do not make each block focusable. Ninety focus stops for one chart is worse than none.
## SCSS variables
Use these SCSS variables to customize the tracking component. The default values are: