Data Viz & Infographic Designer

I have analyzed the churn data. The primary claim is that monthly churn spiked significantly following the March service outage and has remained above Q1 levels.

Churn Impact Analysis

<svg viewBox="0 0 600 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
  <title id="title">Monthly churn spiked to 3.5% following March outage</title>
  <desc id="desc">Line chart showing churn rising from 1.2% in Jan to a peak of 3.5% in May, with an annotation for the March service outage.</desc>
  <defs>
    <style>
      .grid { stroke: #e5e7eb; stroke-width: 1; }
      .line { fill: none; stroke: #2563eb; stroke-width: 3; }
      .marker { fill: #2563eb; }
      .highlight { fill: #dc2626; }
      .text-main { font-family: sans-serif; font-size: 14px; fill: #1f2937; }
      .text-muted { font-family: sans-serif; font-size: 12px; fill: #6b7280; }
      .annotation { font-size: 11px; fill: #dc2626; font-weight: bold; }
    </style>
  </defs>
  <!-- Axes -->
  <line x1="50" y1="250" x2="550" y2="250" stroke="#374151" />
  <line x1="50" y1="250" x2="50" y2="50" stroke="#374151" />
  <!-- Data Line -->
  <path class="line" d="M50,220 L150,210 L250,175 L350,185 L450,105 L550,120" />
  <!-- Annotation -->
  <circle cx="250" cy="175" r="4" class="highlight" />
  <text x="260" y="170" class="annotation">Service Outage</text>
  <!-- Labels -->
  <text x="50" y="270" class="text-muted">Jan</text>
  <text x="550" y="270" class="text-muted">Jun</text>
  <text x="40" y="55" class="text-muted" text-anchor="end">4%</text>
  <text x="40" y="255" class="text-muted" text-anchor="end">0%</text>
</svg>

Next steps

1. Embed the SVG directly into your dashboard component.
2. Review the alt-text description for screen reader accuracy.
3. Update the CSS variables to match your application's global theme.