Chart.js #6289

by Akihiko Kusanagi

HTML

<script src="https://cdn.jsdelivr.net/gh/nagix/nagix.github.io@chartjs/Chart.6289.js"></script>
<canvas id="start" width=150 height=200></canvas>
<canvas id="middle" width=150 height=200></canvas>
<canvas id="end" width=150 height=200></canvas>
<canvas id="start-curve" width=150 height=200></canvas>
<canvas id="middle-curve" width=150 height=200></canvas>
<canvas id="end-curve" width=150 height=200></canvas>

CSS

canvas {
  float: left;
}

JavaScript

function draw(opts) {
  new Chart(document.getElementById(opts.gap + (opts.curve ? '-curve': '')), {
    type: 'radar',
    data: {
      labels: [0,1,2,3,4],
      datasets: [{
        data: [
        	opts.gap === 'start' ? null : 2,
          2,
          opts.gap === 'middle' ? null : 2,
          2,
          opts.gap === 'end' ? null : 2
        ],
        spanGaps: true,
        lineTension: opts.curve ? 0.4 : 0
      }],
    },
    options: {
      responsive: false,
      legend: {
        display: false
      },
      title: {
        display: true,
        text: 'Gap at ' + opts.gap
      },
      scale: {
        gridLines: {
          circular: true
        },
        ticks: {
          display: false,
          min: 0,
          max: 3,
          stepSize: 1
        },
        pointLabels: {
          display: false
        }
      },
      layout: {
        padding: 5
      }
    }
  });
}

draw({gap: 'start'});
draw({gap: 'middle'});
draw({gap: 'end'});
draw({gap: 'start', curve: true});
draw({gap: 'middle', curve: true});
draw({gap: 'end', curve: true});