每个scaleLine的chart.js雷达scaleShowLine

Question

I'm working on a radar chart and I would like to only show the last scaleline.

I found this post which could have helped me: Chart.js (Radar Chart) different scaleLineColor for each scaleLine but unfortunately, the answer is not working anymore (the jsfiddle link doesn't display anything).

I read parts of the chart.js documentation about gridLines option, then did some tests/changes on this code: [regular radar chart][2] without any result, would anyone know how to adjust it?

Thanks!

[2]: https://codepen.io/grayghostvisuals/pen/xmBpL enter code here

Answer 1

Here is a solution using the latest version of chart.js ( v2.5.0 ). It uses the scale afterTickToLabelConversion callback property to overwrite the values that were set for the scale ticks (eg scale lines).

Since you only want to display the last line, you have to overwrite them by keeping the first tick value (which is never displayed) and only the last tick value (the last line). If you only wanted to display some other line then you would keep the first tick and only the other line that you want displayed.

Here is my implementation.

afterTickToLabelConversion: function(scaleInstance) {
  // overwrite the ticks and keep the first (never shown) and last
  var oldTicks = scaleInstance.ticks;
  scaleInstance.ticks = [oldTicks[0], oldTicks[oldTicks.length - 1]];

  // overwrite the numerical representation of the ticks and 
  // keep the first (never shown) and last
  var oldTicksAsNumbers = scaleInstance.ticksAsNumbers;
  scaleInstance.ticksAsNumbers = [oldTicksAsNumbers[0], oldTicksAsNumbers[oldTicksAsNumbers.length - 1]];
}

Here is a codepen example that shows an original radar chart and one using the approach described above so that you can see the difference.