CODEWITHSUNDEEP
javascriptchart.js
spideyinf
spideyinf

Reputation: 31

Chartjs - Add backgroundColor for labels radar chart

>>> Radar chart labels with background color

I want an option to add the background color (a rounded rect with bg color) for labels (individually) in Chartjs. Is there any callback that I can apply for changing this?

This is the current code:

let chart = new Chart('chart-0', {
  type: 'radar',
  data: radarChartData,
  options: {
    responsive: true,
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Radar Chart | Chart.js',
      fontSize: 16
    },
    scale: {
      ticks: {
        beginAtZero: true
      },
      pointLabels: {
        fontSize: 14, // fontSize is ok
        fontColor: presets.blue, // fontColor is accessible
        backgroundColor: presets.yellow //This is not working for sure!
      }
    },
    animation: {
        animateScale: true,
        animateRotate: true
    }
  }
});

Upvotes: 2

Views: 2643

Answers (2)

spideyinf
spideyinf

Reputation: 31

In case someone needs the answer, I did posted in in chartjs and Tim has done it so well: https://github.com/chartjs/Chart.js/issues/5085

Rgrds,

Upvotes: 0

Rahul Chauhan
Rahul Chauhan

Reputation: 1554

You can do using backgroundColor.

data: {
    labels: chart_label,
    datasets: [{
        label: '# of Votes',
        data: chart_data,
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
},

Upvotes: 1

Related Questions