Non Criping - Radar Scatter chart

by SAiTO TOSHiKi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<body>
  <div class="container">
    <div class="chart-container">
      <canvas id="myChart1"></canvas>
    </div>
    <div class="chart-container">
      <canvas id="myChart2"></canvas>
    </div>
    <div class="chart-container">
      <canvas id="myChart3"></canvas>
    </div>
    <div class="chart-container">
      <canvas id="myChart4"></canvas>
    </div>
  </div>

  <button id="randomizeData">Randomize Data</button>

  <script>
    window.chartColors = {
      red: 'rgb(255, 99, 132)',
      orange: 'rgb(255, 159, 64)',
      yellow: 'rgb(255, 205, 86)',
      green: 'rgb(75, 192, 192)',
      blue: 'rgb(54, 162, 235)',
      purple: 'rgb(153, 102, 255)',
      grey: 'rgb(231,233,237)'
    };

    window.randomScalingFactor = function() {
      return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    }

  </script>

CSS

.chart-container {
          width: 500px;
          margin-left: 40px;
          margin-right: 40px;
          margin-bottom: 40px;
        }
        
        .container {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
        }

JavaScript

//Chart.defaults.global.animation.duration = 10000;

var color = Chart.helpers.color;

var data_radar = {
            labels: [["Eating", "Dinner"], ["Drinking", "Water"], "Sleeping", ["Designing", "Graphics"], "Coding", "Cycling", "Running"],
            datasets: [{
                label: "My First dataset",
                backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
                borderColor: window.chartColors.red,
                pointBackgroundColor: window.chartColors.red,
                data: [
                    randomScalingFactor(), 
                    randomScalingFactor(), 
                    randomScalingFactor(), 
                    randomScalingFactor(), 
                    randomScalingFactor(), 
                    randomScalingFactor(), 
                    randomScalingFactor()
                ]
            }, {
                label: "My Second dataset",
                backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
                borderColor: window.chartColors.blue,
                pointBackgroundColor: window.chartColors.blue,
                data: [
                    randomScalingFactor(), 
                    randomScalingFactor(), 
                    randomScalingFactor(), 
                    randomScalingFactor(), 
                    randomScalingFactor(), 
                    randomScalingFactor(), 
                    randomScalingFactor()
                ]
            },]
};

var config_radar = {
        type: 'radar',
        data: data_radar,
        options: {
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: 'Radar Chart'
            },
            scale: {
              ticks: {
                beginAtZero: true
              }
            }
        }

};

var config_radar2 = {
        type: 'radar',
        data: data_radar,
        options: {
            legend: {
    ...