Chart.js: Circular radar chart with labels

[damienmoulard]

Hi,

Not really an issue but more of a little new feature: I needed to have a circular radar chart but with labels outside the chart like the regular radar chart (see the result below), and I couldn't find a way to do this with the available options.

_Expected result_

After taking a look into the code I figured that it couldn't be done when the parameter scale.lineArc is true... this being the parameter that sets the chart circular :(

To fix this I added a new boolean parameter so I can pass the condition when scale.lineArc is true, scale.lineArcWithLabels, and changed a bit the code in LinearRadialScale.draw by replacing:

if (!opts.lineArc) {
[...]
}

with:

if (!opts.lineArc || opts.lineArcWithLabels) {
[...]
}

It was enough for me, there is maybe a cleaner way to do this but I didn't dive much more than that into the code. Just suggesting a new feature here since I needed it!

[etimberg]

That sounds like a good feature. I think there could be some improvements as you suggest, but off the top of my head I don't know what exactly they would be

[hamxabaig]

@damienmoulard How did you create this chart ? Can you paste the configuration settings if you have it now. Thanks

[pretentiousgit]

@damienmoulard @etimberg Hey there! How would we use this option in radar charts?

[domenu]

For people who want to switch from straight gridlines in the radar chart to circular ones:

options: {               
                scale: {                    
                     gridLines: {
                        circular: true
                    }

[hnql]

I wrote a sample https://jsfiddle.net/5quzhwmc/1/
used:

    ...
    datasets: [
        {
                ...
                lineTension: 0.4
                ...
            }
    },
    ...

and

  ...
  options: {
    scale: {
      gridLines: {
        circular: true
      },
      ...
    }
  }
  ...