chart.js radar scaleShowLine for each scaleLine

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/xmBpLenter code here

What chart.js version are you planning to use? v2.5.0 I assume? — jordanwillis, Mar 26 '17 at 22:33
I currently use this version: https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/Chart.min.js but I don't mind changing the version if necessary. — runoneway, Mar 27 '17 at 14:24

score 0 · Accepted Answer · answered Mar 27 '17 at 16:25

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 (e.g. 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.

That perfectly answers my question! I took time to read each part and links of your post to be sure to understand everything and it's very clear and complete: thank you very much for being so helpful and for taking time to explain all this in detail! — runoneway, Mar 28 '17 at 11:10

chart.js radar scaleShowLine for each scaleLine

1 Answers1