[Chartjs]-Is it possible to make a Radar Chart have a multi-color fill using Chart.js?

by

2👍

✅

var marksCanvas = document.getElementById("canvas");

function createRadialGradient3(context) {
    const chartArea = context.chart.chartArea;
    if (!chartArea) {
        // This case happens on initial chart load
        return;
      }
    const chartWidth = chartArea.right - chartArea.left;
    const chartHeight = chartArea.bottom - chartArea.top;

    width = chartWidth;
    height = chartHeight;
    const centerX = (chartArea.left + chartArea.right) / 2;
    const centerY = (chartArea.top + chartArea.bottom) / 2;

    const ctx = context.chart.ctx;

    var gradient = ctx.createConicGradient(-1.0472, centerX, centerY);

    // The pattern is 30 degrees of blend between quadrants
    // 60 degrees of pure color in the quadrant
    gradient.addColorStop(0, 'rgba(78, 190, 235, .40)'); //blue
    gradient.addColorStop(.16667, 'rgba(78, 190, 235, .40)'); //blue
    gradient.addColorStop(0.25, 'rgba(255, 152, 49, .40)'); //orange
    gradient.addColorStop(0.41667, 'rgba(255, 152, 49, .40)'); //orange
    gradient.addColorStop(0.5, 'rgba(96, 230, 225, .40)');  // turqoise
    gradient.addColorStop(0.66667, 'rgba(96, 230, 225, .40)');  // turqoise
    gradient.addColorStop(0.75, 'rgba(45, 183, 87, .40)'); //green
    gradient.addColorStop(0.91667, 'rgba(45, 183, 87, .40)'); //green
    gradient.addColorStop(1, 'rgba(78, 190, 235, .40)'); //blue

    // Set the fill style and draw a rectangle
    ctx.fillStyle = gradient;
    ctx.fillRect(chartArea.left, chartArea.top, chartWidth, chartHeight);
  
    return gradient;
  }

const data = {
    labels: [
      'Including',
      'Aligning',
      'Owning',
      'Suggesting',
      'Analyzing',
      'Summarizing',
      'Listening',
      'Empathasizing',
      'Validating',
      'Vulnerabilty',     
      'Transparaency',
      'Recognizing',
    ],
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, 90, 81, 56, 55, 40,80,76,68,23,47],
      fill: true, 
      backgroundColor: function(context) {

        return createRadialGradient3(context);
      },
      borderColor: 'rgba(255, 99, 132, 0)',
      pointBackgroundColor: 'rgba(255, 99, 132,0)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgb(255, 99, 132)'
    }]
  };

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



var radarChart = new Chart(marksCanvas, config);

Leave a comment