Related Snippets

93 in Charts category
3–8 of 60
ApexCharts Line Chart with Annotations and Target Lines

ApexCharts Line Chart with Annotations and Target Lines

ApexCharts Donut Chart with Live Center Total

ApexCharts Donut Chart with Live Center Total

ApexCharts Sparkline KPI Cards

ApexCharts Sparkline KPI Cards

ApexCharts Gantt Timeline with Range Bars

ApexCharts Gantt Timeline with Range Bars

ApexCharts Weekly Activity Heatmap (Day × Hour)

ApexCharts Weekly Activity Heatmap (Day × Hour)

ApexCharts Radial Bar Goal Rings

ApexCharts Radial Bar Goal Rings

ApexCharts Line Chart with Annotations and Target Lines — Free Snippet

ApexCharts Line Chart with Annotations and Target Lines · Charts · Plain HTML, CSS & JS · Live preview

CategoryCharts
TagsData VisualizationJS Libraries

What's included

Features

Target line
A dashed y-axis annotation with a label.
Tolerance band
y and y2 shade the zone below the target.
Event markers
Vertical x-axis lines with rotated labels.
Labelled outlier
A point annotation on the worst value.
Interactive threshold
A slider rebuilds annotations in place.
Breach summary
Days over target counted in text.
Stable scale
Fixed y-range avoids jumping while dragging.
Deterministic data
Seeded values with a realistic incident.

About this UI Snippet

ApexCharts Annotations — Turning a Line Chart Into an Explanation

Screenshot of the ApexCharts Line Chart with Annotations and Target Lines snippet rendered live

A line chart shows what happened. Annotations explain why. A target line tells you whether a value is good, a band shows the zone to worry about, vertical markers line changes up with events like deploys, and a point label calls out the outlier that everyone will ask about. This snippet uses all four on one latency chart.

Three annotation groups

ApexCharts accepts annotations.yaxis, annotations.xaxis and annotations.points. A y-axis annotation with only y draws a horizontal line; adding y2 turns it into a shaded band between two values. X-axis annotations draw vertical lines at timestamps, with labels that can be rotated with orientation: 'vertical' so several fit without overlapping. Point annotations place a marker and label on a specific x, y coordinate.

Annotations built from one function

Because the SLO line and the warning band depend on the slider, all annotations come from annotations(slo). On every slider change, updateOptions({ annotations: ... }) replaces the whole set. Using addYaxisAnnotation instead would stack a new line on each input event unless the previous one were removed by id.

The numbers under the chart

The footer counts days above the current SLO and the share within it. The chart shows where breaches happened; the text states how many, so the result is available without reading the graphic.

A fixed y-range

yaxis.min and max are fixed so moving the SLO doesn't rescale the chart under the slider, which would make the line appear to jump.

Deterministic data with a story

Seeded data includes a cache-outage spike and a lasting improvement after a query fix, so the deploy markers line up with visible changes.

Step by step

How to Use

  1. 1
    Load ApexChartsInclude apexcharts.min.js from the CDN.
  2. 2
    Paste the snippetA latency line renders with target, band, deploy and peak annotations.
  3. 3
    Move the SLO sliderThe line and band move together and the breach count updates.
  4. 4
    Hover the lineThe tooltip shows the day's p95 latency.
  5. 5
    Add your eventsEdit DEPLOYS with day offsets and labels.
  6. 6
    Plot your metricReplace the generated data with [timestamp, value] pairs.

Real-world uses

Common Use Cases

SRE and uptime dashboards
Show latency against an SLO line with a shaded warning band below it. The slider moves the target and recounts how many points breach it.
Sales against quota
Plot revenue with a dashed quota line and vertical campaign markers, so a jump in sales can be tied to the launch that caused it.
Health readings against a safe range
Shade the safe zone with y and y2 and let readings drift outside it, making out-of-range values obvious without reading axis numbers.
Release analytics
Mark deploys as vertical lines with rotated labels, then check whether a release changed the metric that followed it.
Reports with one headline number
Call out the single value everyone will ask about with a labelled point annotation on the worst or best reading, instead of leaving readers to hunt for it.
Related: ApexCharts Brush Chart
Navigate longer histories with ApexCharts Brush Chart with Range Navigator.
Related: Control Chart
Statistical limits instead of fixed targets: Control Chart with Upper/Lower Control Limits.

Got questions?

Frequently Asked Questions

Add an object to annotations.yaxis with y set to the target value, a borderColor, optionally strokeDashArray for a dashed line, and a label.

Give a y-axis annotation both y and y2. ApexCharts fills the area between them using fillColor and opacity. The same works on the x-axis with x and x2 for time windows.

Add objects to annotations.xaxis with x set to the event timestamp. Set label.orientation to 'vertical' so several nearby labels don't overlap.

Rebuild the full annotations object and pass it to updateOptions, which replaces the previous set. If you use addYaxisAnnotation, give each annotation an id and remove it before adding a new one.

Yes, use annotations.points with x and y coordinates, a marker style and a label. It is useful for peaks, records or anomalies.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Give this snippet to an AI assistant like Claude and ask it to explain the difference between y, y2, x and point annotations and why the snippet rebuilds all annotations on each slider change. Then ask it to load deploy events from an API, add an error-budget burn-down below the chart, or let users click the chart to add their own notes. Ask whether counting breached days is the right SLO measure for your service or whether a rolling window would be fairer.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build an annotated latency line chart with ApexCharts (loaded from a CDN) in plain HTML, CSS and JavaScript.

Requirements:
- Generate 42 days of seeded p95 latency data on a UTC datetime axis, including one large spike and a lasting improvement after a later date.
- Add a dashed horizontal SLO target line with a label, and a shaded warning band 30 ms below the target.
- Add vertical dashed markers with rotated labels for three events (two deploys and an outage).
- Label the highest point with a marker and a text annotation.
- Add a slider that moves the SLO between 180 and 320 ms, rebuilding the annotations with a single update so lines never duplicate.
- Show a text summary of how many days breached the current SLO and the percentage within it.
- Keep the y-axis range fixed so dragging the slider doesn't rescale the chart.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Source Code

Requires
JS · apexcharts.min.js
<div class="aan-wrap">
  <div class="aan-card">
    <div class="aan-head">
      <div>
        <div class="aan-title">API p95 Latency</div>
        <div class="aan-sub">SLO target, a tolerance band, deploy markers and the worst spike are all annotations</div>
      </div>
      <label class="aan-slo">SLO
        <input type="range" id="aanSlo" min="180" max="320" step="10" value="250">
        <output id="aanSloOut">250 ms</output>
      </label>
    </div>
    <div id="aanChart"></div>
    <div class="aan-foot" id="aanFoot"></div>
  </div>
</div>