score:12

Accepted answer

edit [2021-10-27]: chart.js v3 has removed scale option in favor of options.scales.r. here's an updated way of making the radar grid circular.

const red = "rgb(255, 99, 132)";
const color = chart.helpers.color;
const config = {
  type: 'radar',
  data: {
    labels: [['eating', 'dinner'], ['drinking', 'water'], 'sleeping', ['designing', 'graphics'], 'coding', 'cycling', 'running'],
    datasets: [{
      label: 'my dataset',
      backgroundcolor: color(red).alpha(0.2).rgbstring(),
      bordercolor: red,
      pointbackgroundcolor: red,
      data: [
        80,
        90,
        60,
        65,
        78,
        97,
        55
      ]
    }]
  },
  options: {
    scales: { // <-- note change in options from scale to scales
        r: {
          grid: {
             circular: true
          },
          beginatzero: true
        }
    }
  }
};

window.onload = function () {
  window.myradar = new chart(document.getelementbyid('chart'), config);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.6.0/chart.min.js"></script>
<canvas id="chart"></canvas>

edit: kudos to @timclutton for pointing to the axes styling section of the docs, which lists the circular property for the radar chart.

original answer: after some digging it turned out that it is in fact possible. the trick is to add scale: { gridlines: { circular: true } } to options of the chart. please see the snippet below. note. as of 19 jul 2019 i couldn't find this information in the official docs. so, it's either not documented yet or this feature might be changed / removed in future.

chart.js circular / round shaped radar chart

const red = "rgb(255, 99, 132)";
const color = chart.helpers.color;
const config = {
  type: 'radar',
  data: {
    labels: [['eating', 'dinner'], ['drinking', 'water'], 'sleeping', ['designing', 'graphics'], 'coding', 'cycling', 'running'],
    datasets: [{
      label: 'my dataset',
      backgroundcolor: color(red).alpha(0.2).rgbstring(),
      bordercolor: red,
      pointbackgroundcolor: red,
      data: [
        80,
        90,
        60,
        65,
        78,
        97,
        55
      ]
    }]
  },
  options: {
    scale: {
      gridlines: {
        circular: true
      },
      ticks: {
        beginatzero: true
      },
    }
  }
};

window.onload = function () {
  window.myradar = new chart(document.getelementbyid('chart'), config);
};
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/chart.min.js"></script>
<canvas id="chart"></canvas>

score:1

perhaps not exactly what you are looking for; chart.js documents a polar area chart on it's samples page:

polar area chart example

a quick example:

new chart(document.getelementbyid("chart"), {
  type: "polararea",
  data: {
    labels: ["a", "b", "c"],
    datasets: [{
      data: [10, 20, 30]
    }]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.8.0/chart.min.js"></script>
<canvas id="chart"></canvas>

score:3

you have to change line tension:

data:{
        labels: ['visionary', 'determination', 'extraversion', 'agreeableness', 'emotionality'],
        datasets: [{
          data: [
            34, 45, 67, 89, 22
          ],          
          label: 'me',
          linetension: 0.5,
          bordercolor: '#00ffff',
          backgroundcolor: '#00ffff',
         
    }

then your radar charts will be rounded just as you showed in the desired fashion

score:5

since version 3, the scale option has been deprecated. so to make the radar chart with circle gridlines, you have to pass the following option:

scales: {
  r: {
    grid: {
      circular: true,
    },
  },
},


const ctx = document.getelementbyid('radar-chart');

const data = {
  labels: [
    'eating',
    'drinking',
    'sleeping',
    'designing',
    'coding',
    'cycling',
    'running'
  ],
  datasets: [{
    label: 'my first dataset',
    data: [65, 59, 90, 81, 56, 55, 40],
    fill: true,
    backgroundcolor: 'rgba(255, 99, 132, 0.2)',
    bordercolor: 'rgb(255, 99, 132)',
    pointbackgroundcolor: 'rgb(255, 99, 132)',
    pointbordercolor: '#fff',
    pointhoverbackgroundcolor: '#fff',
    pointhoverbordercolor: 'rgb(255, 99, 132)'
  }, {
    label: 'my second dataset',
    data: [28, 48, 40, 19, 96, 27, 100],
    fill: true,
    backgroundcolor: 'rgba(54, 162, 235, 0.2)',
    bordercolor: 'rgb(54, 162, 235)',
    pointbackgroundcolor: 'rgb(54, 162, 235)',
    pointbordercolor: '#fff',
    pointhoverbackgroundcolor: '#fff',
    pointhoverbordercolor: 'rgb(54, 162, 235)'
  }]
};

const config = {
  type: 'radar',
  data: data,
  options: {
    scales: {
      r: {
        grid: {
          circular: true,
        },
      },
    },
    elements: {
      line: {
        borderwidth: 3
      }
    }
  },
};

const radarchart = new chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.2.1/chart.min.js"></script>
<canvas id="radar-chart"></canvas>


Related Query

More Query from same tag