samples/fivenum.html

<!DOCTYPE html>
<html>
  <head>
    <title>Box Plot Chart</title>
    <script src="https://unpkg.com/chart.js@3.8.0/dist/chart.js"></script>
    <script src="../build/index.umd.js"></script>
  </head>

  <body>
    <div id="container" style="width: 75%">
      <canvas id="canvas"></canvas>
      <canvas id="canvas2"></canvas>
    </div>
    <script>
      const boxplotData = {
        labels: ['A'],
        datasets: [
          {
            itemRadius: 2,
            borderColor: 'black',
            data: [[18882.492, 7712.077, 5830.748, 7206.05]],
          },
        ],
      };

      const boxplotData2 = {
        labels: ['A'],
        datasets: [
          {
            itemRadius: 2,
            borderColor: 'black',
            data: [[18882.492, 7712.077, 5830.748, 7206.05]],
          },
        ],
      };

      window.onload = () => {
        new Chart(document.getElementById('canvas').getContext('2d'), {
          type: 'boxplot',
          data: boxplotData,
          options: {
            responsive: true,
            legend: {
              position: 'top',
            },
            title: {
              display: true,
              text: 'Quantiles type 7',
            },
            quantiles: 'quantiles',
          },
        });

        new Chart(document.getElementById('canvas2').getContext('2d'), {
          type: 'boxplot',
          data: boxplotData2,
          options: {
            responsive: true,
            legend: {
              position: 'top',
            },
            title: {
              display: true,
              text: 'Quantiles Fivenum',
            },
            quantiles: 'fivenum',
          },
        });
      };
    </script>
  </body>
</html>