CODEWITHSUNDEEP
chart.js
bachree
bachree

Reputation: 128

Changing grid color in radar chart

        //radar-chart
        const data = {
              labels: [
                'Stick Slip',
                'Whirl',
                'Bit Balling',
                'Bit Bounce',
                'test'
              ],
              datasets: [{
                label: 'My First Dataset',
                data: [0.2, 0.5, 0, 0, 1],
                fill: true,
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgb(255, 99, 132)',
                pointBackgroundColor: 'rgb(255, 99, 132)',
                pointBorderColor: '#fff',
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: 'rgb(255, 99, 132)'
              },]
            };
            const config = {
                maintainAspectRatio: false,
                elements: {
                    line: {
                        borderWidth: 3,
                    }
                },
                scales: {
                    r: {
                        suggestedMin: 0,
                        suggestedMax: 1,
                        angleLines: {
                        color: 'red'
                        }
                    },
                },
            }
            var ctx = document.getElementById('radar-chart-dysfunctions');
            var myRadarChart = new Chart(ctx, {
                type: 'radar',
                data: data,
                options: config,
            });

How can I change the grey gridlines to another color? This is my code: https://codepen.io/bahrikutlu/pen/QWdaEMp

I have found various solutions on Stack Overflow such as following but it does not work with version 3.0 With Chartjs Radar - how to modify the gray gridlines? Thanks

Upvotes: 0

Views: 1001

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31381

You will have to edit the color of the grid in the scale option like the example below

var options = {
  type: 'radar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      r: {
        grid: {
          color: 'red'
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.js" integrity="sha512-n8DscwKN6+Yjr7rI6mL+m9nS4uCEgIrKRFcP0EOkIvzOLUyQgOjWK15hRfoCJQZe0s6XrARyXjpvGFo1w9N3xg==" crossorigin="anonymous"></script>
</body>

Upvotes: 1

Related Questions