Change border Color of the Chart (radar)

[empessah]

I reviewed an issue that was earlier closed, but it did not help with my problem on a radar chart
the issue for reference "Change border Color of the Chart #2443"

The rings are getting styled correctly, but the spokes are staying as default.
I have tried what I think is everything and just wanted to see if anyone has a solution or is this a bug.
Most of what I tried was through the global changes.

`
var ctx = document.getElementById("WeightChart");
Chart.defaults.global.tooltips.titleFontSize = 18;
Chart.defaults.global.tooltips.bodyFontSize = 18;
Chart.defaults.global.tooltips.titleMarginBottom = 10;
Chart.defaults.global.elements.line.tension = .01;
Chart.defaults.global.elements.point.hoverRadius = 10;
Chart.defaults.global.elements.point.hitRadius = 3;
Chart.defaults.global.legend.display = false;
Chart.defaults.scale.lineArc = false;
Chart.defaults.global.defaultFontColor = "rgba(255,255, 255, 1)"

Chart.defaults.scale.gridLines.color = "rgba(255,0,0,1)";
Chart.defaults.scale.gridLines.zeroLineColor = "rgba(255,0,0,1)";
Chart.defaults.global.defaultColor = "rgba(255,0,0,1)";
Chart.defaults.global.elements.arc.backgroundColor = "rgba(255,0,0,1)";
Chart.defaults.global.elements.line.backgroundColor = "rgba(255,0,0,1)";
Chart.defaults.global.elements.point.backgroundColor = "rgba(255,0,0,1)";
Chart.defaults.global.elements.rectangle.backgroundColor = "rgba(255,0,0,1)"
Chart.defaults.global.elements.arc.borderColor = "rgba(255,0,0,1)";
Chart.defaults.global.elements.line.borderColor = "rgba(255,0,0,1)";
Chart.defaults.global.elements.point.borderColor = "rgba(255,0,0,1)";
Chart.defaults.global.elements.rectangle.borderColor = "rgba(255,0,0,1)";

new Chart(ctx, {
type: "radar",

data: {
  labels: ["E01", "E02", "E03", "E04", "E05", "E06", "E07", "E08", "E09", "E10"],
  datasets: [{
    label: " character name goes here",
    backgroundColor: "rgba(0, 153, 247,.5)",
    borderColor: "rgba(0, 153, 247,1)",
    pointBackgroundColor: "rgba(0, 153, 247,1)",
    pointBorderColor: "rgba(0, 153, 247,1)",
    pointHoverBackgroundColor: "rgba(0, 153, 247,1)",
    pointHoverBorderColor: "rgba(0, 153, 247,1)",
    data: [19, 21, 23, 18, 16, 24, 15, 5, 8, 13]
  }]
},

options: {
  scale: {
    pointLabels: {
      fontSize: 18
    },
    ticks: {
      backdropColor: 'black',
      maxTicksLimit: 10,
      max: 30,
      stepSize: 5,
      beginAtZero: true,
      fontSize: 10,
      backdropPaddingX: 5,
      backdropPaddingY: 5
    }
  }
}

});

`

here is a Fiddle to show what I am talking about
https://jsfiddle.net/kzco8m49/16/

[etimberg]

@empessah the lines that radiate outward are controller by a different setting options.angleLines.color.

I've updated your fiddle to set this and it works as expected
https://jsfiddle.net/hvenb74o/1/

[morenoh149]

I had to change Chart.defaults.scale.gridLines.color in the fiddle not angleLines.