Chart.js Radar Chart

A radar chart is a way to display multiple data points and the variations between them.

A radar chart is a graphical method of 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 position and angle of the axes are usually uninformative.

Mixed CharttypeThe attribute isradar。

const config = {
  type: 'radar',
  data: data,
  options: {
    elements: {
      line: {
        borderWidth: 3 // 设置线条宽度
      }
    }
  },
};

Next, let's 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 the chart to be responsive, changing according to the screen window
    maintainAspectRatio: false,// Maintain the chart's original aspect ratio
    elements: {
      line: {
        borderWidth: 3 // Set the line width
      }
    }
  }
};
const myChart = new Chart(ctx, config);

Try it »

The output of the above example is:

Other Extensions