Chart.js Radar Chart

A radar chart is a way to display multiple data points and their variations.

A radar chart is a graphical method for displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.

The relative positions and angles of the axes are typically uninformative.

The mixed chart type property is radar.

const config = {
  type: 'radar',
  data: data,
  options: {
    elements: {
      line: {
        borderWidth: 3 // Set line width
      }
    }
  },
};

Next, we will create a simple radar chart:

Example

const ctx = document.getElementById('myChart');
const data = {
  labels: [
    'Eating',
    'Drinking',
    'Sleeping',
    'Designing',
    'Coding',
    'Cycling',
    'Running'
  ],
  datasets: [{
    label: '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: '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: {
    responsive: true, // Set chart to be responsive, changes according to screen window
    maintainAspectRatio: false, // Maintain the original aspect ratio of the chart
    elements: {
      line: {
        borderWidth: 3 // Set line width
      }
    }
  }
};
const myChart = new Chart(ctx, config);

The above example outputs the following result: