Radarchart: possible to have values "between" the axes and fill it up

[bartplessers]

Hi,

I'm trying to make a radarchart.
Things work well, but not all of my axes contain always a value.
This leeds sometimes to something like:

Now I'm wondering if there is an option to have the values in above example "between" the axes and fill the area? This would look something like

and would make more sense for me.

Can this be done? How?

kind regards,
Bart

[stockiNail]

@bartplessers I think you probably need to use a polarArea chart instead of radar one. The radar is based on a line controller therefore is not drawing the sector if there is not a segment.

Maybe you can have a look to the following codepen, it should be similar to your need:

https://codepen.io/stockinail/pen/mdQVVpO

[bartplessers]

Perfect!
Exactly what I wanted.
I even prefer the "rounded" option, so it looks now like:

The only thing I can't figure out is how you made it possible to get different colors for each sector. I can't see any config for this in your example.

But with my config:

  // --------------------------------------------------------
  // create chart dataset
  // --------------------------------------------------------
  const data = {
    labels: myDataLabels,
    datasets: [{
      label: 'ECTS Score',
      data: myData
    }]
  };

  // --------------------------------------------------------
  // set chart options
  // --------------------------------------------------------
  const config = {
    type: 'polarArea',
    data: data,
    options: {
      responsive: true,
      plugins:{
         legend:{
            display:true
         }
      },
      elements: {
        line: {
          borderWidth: 3,
          borderJoinStyle: 'round'
        }
      },
      scales: {
        r: {
          angleLines: {
            display: true
          },
          pointLabels: {
            display: true,
            centerPointLabels: true,
            font: {
              size: 14
            }
          },
          suggestedMin: 0,
          suggestedMax: 3,
          ticks: {
                  stepSize: 1
              }
          }	
      }
    },
  };



  // --------------------------------------------------------
  // Draw Chart
  // --------------------------------------------------------
  myLog("drawing chart...")
  myChart = new Chart(ctx, config);

it's monochrome...

Is there somewhere an other option to get different colors?

grtz
B

[stockiNail]

@bartplessers You can add an array of colors (for each label) or you can use a scriptable option. From version 4 there is also the colors plugin which is using a predefined palette of colors (this is the reason why you don't see any configured color in my sample).

In your case:

  // --------------------------------------------------------
  // create chart dataset
  // --------------------------------------------------------
  const data = {
    labels: myDataLabels,
    datasets: [{
      label: 'ECTS Score',
      data: myData,
      // COLOR!
      backgroundColor: ['red', 'blue', 'rgb()', 'rgba()', 'hsl()', 'hsla()', .....]
    }]
  };

To have different colors on borders of the sectors, use bordeColor option, in the same way of backgroundColor.

[stockiNail]

@bartplessers if the answer is good for you, feel free to set the discussion as answered, to help whoever else will have the same use case!