Generate a growth chart comparing normal and GHD in children

by Ben Gillbanks

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <h2>Growth Curve: Normal vs. GHD in Children (Boys)</h2>
  <canvas id="growthChart" width="800" height="400"></canvas>

JavaScript

const ctx = document.getElementById('growthChart').getContext('2d');

    const data = {
      labels: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      datasets: [
        {
          label: 'Typical Growth',
          data: [87, 95, 103, 110, 116, 122, 128, 134, 139, 144, 150],
          borderColor: 'blue',
          backgroundColor: 'blue',
          tension: 0.3
        },
        {
          label: 'GHD Growth',
          data: [87, 91, 95, 98, 101, 104, 107, 110, 113, 116, 119],
          borderColor: 'red',
          backgroundColor: 'red',
          borderDash: [5, 5],
          tension: 0.3
        }
      ]
    };

    const config = {
      type: 'line',
      data: data,
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'top'
          },
          title: {
            display: true,
            text: 'Growth Curve: Normal vs. GHD in Children'
          }
        },
        scales: {
          y: {
            title: {
              display: true,
              text: 'Height (cm)'
            },
            min: 80,
            max: 160
          },
          x: {
            title: {
              display: true,
              text: 'Age (years)'
            }
          }
        }
      }
    };

    new Chart(ctx, config);