AnApprentice
AnApprentice

Reputation: 110980

With Chartjs Radar - how to modify the gray gridlines?

I have the following Chart.js Radar graph rendering in my react app using react-chartjs-2:

example

          <Radar
            data={chartData}
            options={{
              legend: false,
              gridLines: {
                 display: false,
              },
              scale: {
                gridLines: {
                  color: ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white']
                },
                pointLabels :{
                  fontSize: 12,
                },
                ticks: {
                  suggestedMin: 0,
                  suggestedMax: 10,
                  display: false,
                  maxTicksLimit: 5
                }
              }
            }}
          />

How can I hide the gray lines and/or modify the color to white?

Upvotes: 1

Views: 3698

Answers (2)

Nelh Amstrong
Nelh Amstrong

Reputation: 51

if you want to hide the gray line,

options: {
    scale: {
      gridLines: {
        color: 'transparent'
      },
      angleLines: {
        color: 'transparent' 
      }
    }
  }
};

Now if you want to make the line white, just change the color from transparent to white

Upvotes: 3

Bill
Bill

Reputation: 4646

Try adding angleLines to your scale config. This JSFiddle provides an example with a lot of configuration changes.

scale: {
    angleLines: {
        color: 'white' // lines radiating from the center
    }
}

Upvotes: 2

Related Questions