samples/datalimits.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>
    <script src="https://unpkg.com/d3-random@latest/dist/d3-random.min.js"></script>
    <script src="./utils.js"></script>
  </head>

  <body>
    <div id="container" style="width: 75%">
      <canvas id="canvas"></canvas>
    </div>
    <button id="limitMinMax">Limit to min/max</button>
    <button id="limitWhiskers">Limit to whiskers</button>
    <script>
      const samples = this.Samples.utils;
      const color = Chart.helpers.color;
      const b = d3.randomNormal();
      const random = (min, max) => () => b() * ((max || 1) - (min || 0)) + (min || 0);
      const boxplotData = {
        labels: samples.months({ count: 7 }),
        datasets: [
          {
            label: 'Dataset 1',
            backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
            borderColor: window.chartColors.red,
            borderWidth: 1,
            data: samples.boxplots({ count: 7, random: random }),
            outlierBackgroundColor: '#999999',
          },
          {
            label: 'Dataset 2',
            backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
            borderColor: window.chartColors.blue,
            borderWidth: 1,
            data: samples.boxplotsArray({ count: 7, random: random }),
            outlierBackgroundColor: '#999999',
          },
        ],
      };
      const options = {
        responsive: true,
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: 'Chart.js Box Plot Chart',
        },
        minStats: 'min',
        maxStats: 'max',
      };

      window.onload = () => {
        const ctx = document.getElementById('canvas').getContext('2d');
        let myBar = new Chart(ctx, {
          type: 'boxplot',
          data: boxplotData,
          options: options,
        });

        document.getElementById('limitMinMax').onclick = () => {
          options.minStats = 'min';
          options.maxStats = 'max';
          myBar.destroy();
          myBar = new Chart(ctx, {
            type: 'boxplot',
            data: boxplotData,
            options: options,
          });
        };
        document.getElementById('limitWhiskers').onclick = () => {
          options.minStats = 'whiskerMin';
          options.maxStats = 'whiskerMax';
          myBar.destroy();
          myBar = new Chart(ctx, {
            type: 'boxplot',
            data: boxplotData,
            options: options,
          });
        };
      };
    </script>
  </body>
</html>