Charts

Try the three latency charts with one shared service filter, or pick a chart below and copy its React example. For setup in React or Next.js, see Installation.

Trends and comparisons

• LineChart shows how a measure changes over time. Compare this week with last week on the same scale.
• Sparkline shows a small trend beside a value in a table or summary.
• BarChart compares categories. Group series to compare actual and planned values, or use percent stacks to compare their shares.
• BarList ranks named values, such as traffic sources, where the labels and counts matter as much as the bars.
• BulletChart compares a single value with a target and optional reference bands.

Distributions and relationships

• Histogram shows how often values fall into intervals. Use it to see whether requests cluster near 100 ms or have a long tail.
• BoxPlot compares the median, quartiles and endpoints across groups, such as latency by service.
• ScatterChart shows the relationship between two measurements, such as throughput and response time.
• Heatmap shows patterns across two dimensions, such as activity by day and hour.
• RangeChart shows an interval for each item, such as a forecast range.

Parts of a whole and change

• DonutChart shows a few shares of one whole, such as spending by category.
• WaterfallChart explains how individual increases and decreases add up to a final value.
• DumbbellChart compares two values for each category, such as before and after a rollout.

Inspecting values

Give each chart a name that includes its measure. Keep units consistent across axis labels and value formatting. Hover or focus interactive plots to inspect values, then use the arrow keys to move through the data. Where readers need to scan or copy many exact values, provide the data in a table alongside the chart.