Adding Polyline hover effect on custom line chart - SVG/CSS

by Vijay Pancholi

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  
</head>
<body>

<svg viewBox="0 0 500 102" class="chart">
  <g>
    <!-- Polyline -->
    <polyline
      fill="none"
      stroke="#718cd2"
      stroke-width="1"
      points="00,100 20,60 40,80 200,100 220,10 240,70 420,70 440,40 460,90 480,100 500,60"
    />

    <!-- Circles for data points -->
    <circle cx="00" cy="100" r="4" class="data-point" />
    <circle cx="20" cy="60" r="4" class="data-point" />
    <circle cx="40" cy="80" r="4" class="data-point" />
    <circle cx="200" cy="100" r="4" class="data-point" />
    <circle cx="220" cy="10" r="4" class="data-point" />
    <circle cx="240" cy="70" r="4" class="data-point" />
    <circle cx="420" cy="70" r="4" class="data-point" />
    <circle cx="440" cy="40" r="4" class="data-point" />
    <circle cx="460" cy="90" r="4" class="data-point" />
    <circle cx="480" cy="100" r="4" class="data-point" />
    <circle cx="500" cy="60" r="4" class="data-point" />
    <!-- Add more circles for other data points -->
  </g>
</svg>

</body>
</html>

CSS

/* Hover effect using CSS */
.data-point {
  fill: red;
  stroke: #fff;
  stroke-width: 2;
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease-in-out;
}

.data-point:hover {
  opacity: 1; /* Show on hover */
}