Remove the fill on a Radar chart

Wappler General Need Help
1

I'm using a chart on a page and it's a Radar chart but I don't want there to be a fill colour, only the lines. There isn't the option in the UI. Can anyone tell me how I switch off the fills?

1 Like
2

try this in your chart config:

      fill: true, // Set to false if you want no fill at all
      backgroundColor: 'rgba(0, 0, 0, 0)', // Fully transparent
3

Thanks Tom. Where do you mean by 'chart config'?

4

Load the chart using a JS script, similar to this, it'll give you granular control over the chart:

<div style="width: 600px; height: 600px;" class="bg-white col ">
    <canvas id="radarChart"></canvas>
</div>

<script>
    const data = {
    labels: [
      'Eating',
      'Drinking',
      'Sleeping',
      'Designing',
      'Coding',
      'Cycling',
      'Running'
    ],
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, 90, 81, 56, 55, 40],
      fill: false,
      backgroundColor: 'rgba(0, 0, 0, 0)', // Fully transparent
      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: false,
      backgroundColor: 'rgba(0, 0, 0, 0)', // Fully transparent
      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: {
      elements: {
        line: {
          borderWidth: 3
        }
      }
    }
  };

  window.addEventListener('load', () => {
    const ctx = document.getElementById('radarChart').getContext('2d');
    new Chart(ctx, config);
  });
</script>
1 Like
5

For live data you should be able to use your existing SC like this:

      label: 'My First Dataset',
      data: dmx.parse("content.scChart.data.custAIPrompt"),
      fill: false,
      backgroundColor: 'rgba(0, 0, 0, 0)', // Fully transparent
      borderColor: 'rgb(255, 99, 132)',
      pointBackgroundColor: 'rgb(255, 99, 132)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgb(255, 99, 132)'
    },
1 Like
6

Here's an updated version of the charts component:

dmxCharts.zip (8.5 KB)

It includes the fill option. You can disable it by simply adding the following attribute to the chart component:

 fill="false"
1 Like
7

Wow! And while on summer vacation, too.

Thanks @TMR and @Teodor - the updated dmxCharts works a dream.

For when you're back... can this be added to the UI?

Cheers again.

8

Yes this will be added to the UI on the next update.

2 Likes
9

This is now available in the latest Wappler update.

2 Likes