inpchart

by teknohippy

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Radar Chart with Optional Animation</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@600&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        position: relative;
      }

      .chart-container {
        position: relative;
        width: 600px;
        height: 500px;
      }

      .label {
        position: absolute;
        padding: 7px 12px;
        background-color: #f2f6fd;
        color: #354c91;
        border-radius: 12px;
        font-family: "Roboto", sans-serif;
        font-size: 13px;
        font-weight: 500;
        text-align: center;
        white-space: nowrap;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div id="chart1-container" class="chart-container">
      <svg id="radar-chart-1" width="1200" height="1000"></svg>
    </div>

    <div id="chart2-container" class="chart-container">
      <svg id="radar-chart-2" width="1200" height="1000"></svg>
    </div>

    <div id="chart3-container" class="chart-container">
      <svg id="radar-chart-3" width="1200" height="1000"></svg>
    </div>

    <script>
      const width = 1200
      const height = 1000
      const centerX = width / 2
      const centerY = height / 2
      const maxRadius = 332
      const innerRadius = 120
      const stepInRadius = 60
      const minScore = 0
      const maxScore = 10
      const numLevels = 5
      
      const rotationOffset = -Math.PI / 2
      const labelOffset = 15

      const labels = [
        "Label 1",
        "Label 2",
        "Label 3",
        "Label 4",
        "Label 5",
        "Label 6",
      ]

      const numAxes = labels.length
      const angleStep = (2 * Math.PI) / numAxes

      function calculatePoint(angle, radius) {
        return {
          x: centerX + radius *...