← Back to Module 08

Annotations: CWV Threshold Bands

This chart shows Largest Contentful Paint (LCP) values for different pages on your site. The background bands are drawn by the chartjs-plugin-annotation plugin and represent Google's Core Web Vitals thresholds: green (Good, under 2500ms), yellow (Needs Improvement, 2500–4000ms), and red (Poor, over 4000ms).

Good (< 2.5s)
Needs Improvement (2.5–4s)
Poor (> 4s)

The annotation plugin supports box (shaded regions), line (reference lines), point, and label annotation types. Here we use three box annotations to create the threshold bands.