PackedCircle about chart.js HOT 4 OPEN

 <canvas id="canvas" style="width:450px; height:450px;"></canvas>

// include the calculation code from https://jsfiddle.net/TDzVE/

  var radiuses = [];
  for(var i=0; i<15; i++) {
    radiuses.push(Math.random() * (200) + 1)
  }
    
  var packer = new Packer (radiuses, 1);

  var chart = $("#canvas")

  var margin_factor = 0.1;
  var mx = chart.width() * margin_factor / 2;
  var my = chart.height() * margin_factor / 2;
  dx=Number(packer.w)/2
  dy=Number(packer.h)/2
  var zx = chart.width() / packer.w;
  var zy = chart.height() / packer.h;
  var zoom = zx < zy ? zx : zy;

  datapoints = [];
  for (var i=0; i<packer.list.length;i++) {
    circle = packer.list[i]
    datapoints.push({'x':(circle.c.x+dx)*zoom+mx, 'y':(circle.c.y+dy)*zoom+my, 'r':circle.r*zoom}) 
  }

  const data = {
    datasets: [
      {
        label: 'Dataset 1',
        data: datapoints,
        backgroundColor: "rgba(123,123,123,1)",
      },
    ]
  };

  var myBarChart = new Chart(chart, {
    type: 'bubble',
    data: data,
    options: {
      responsive : false,
      maintainAspectRatio : true,
      layout : {
        autoPadding : false,
      },
      scales: {
                      x: {
                        ticks: {display: false,},
                        grid: { display: false },
                        border: {display: false}
                      },
                      y: {display:false,
                          ticks: {display: false,},
                          grid: { display: false, },
                          border: {display: false}
                        }
                  },    
      plugins: {
        legend: {display: false,},
        title: {display: false,}
      }
    },
  })