angularchart.jsstylingradar-chart

Chart.js different scaleLine color of radar chart (angular)

currently I am using radar-charts (chart.js) in my angular project. I' m want to change the scaleLineColor of the different section and don't know how to achieve this result:

enter image description here

according to this new fix it should be possible: https://github.com/chartjs/Chart.js/pull/2732

I also tried this: Chart.js (Radar Chart) different scaleLineColor for each scaleLine

but no effect at all ;( (I think because it's written in a older version)

Solution

  • Set the gridlines color property to an array of the colours you want to use (emphasis mine):

    The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.

    Example:

    var chart1 = new Chart(document.getElementById('chart'), {
  type: 'radar',
  data: {
    labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
    datasets: [{
      label: 'series1',
      data: [1, 2, 3, 6, 3, 2, 4]
    }]
  },
  options: {
    scale: {
      gridLines: {
        color: ['black', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo']
      }
    }
  }
});
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>