Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Circular radar chart with labels #3082

Closed
damienmoulard opened this issue Aug 3, 2016 · 5 comments
Closed

Circular radar chart with labels #3082

damienmoulard opened this issue Aug 3, 2016 · 5 comments

Comments

@damienmoulard
Copy link

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.

capture d ecran 2016-08-03 a 15 53 57
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
Copy link
Member

etimberg commented Aug 3, 2016

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

etimberg added a commit that referenced this issue Jan 15, 2017
… new settings.

gridLines.circular is a new option that toggles circular lines. This allows radar charts with circular lines #3082
pointLabels.display is a new option that toggles the display of point labels.
The existing angleLines.display is used with the new pointLabels.display setting is used to trigger the radar like settings.
This required changing the default polar area config.
etimberg added a commit that referenced this issue Jan 15, 2017
… new settings.

gridLines.circular is a new option that toggles circular lines. This allows radar charts with circular lines #3082
pointLabels.display is a new option that toggles the display of point labels.
The existing angleLines.display is used with the new pointLabels.display setting is used to trigger the radar like settings.
This required changing the default polar area config.
@etimberg etimberg added this to the Version 2.6 milestone Feb 11, 2017
etimberg added a commit that referenced this issue Mar 3, 2017
… new settings.

gridLines.circular is a new option that toggles circular lines. This allows radar charts with circular lines #3082
pointLabels.display is a new option that toggles the display of point labels.
The existing angleLines.display is used with the new pointLabels.display setting is used to trigger the radar like settings.
This required changing the default polar area config.
@hamxabaig
Copy link

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

roicos pushed a commit to roicos/Chart.js that referenced this issue Aug 21, 2017
… new settings.

gridLines.circular is a new option that toggles circular lines. This allows radar charts with circular lines chartjs#3082
pointLabels.display is a new option that toggles the display of point labels.
The existing angleLines.display is used with the new pointLabels.display setting is used to trigger the radar like settings.
This required changing the default polar area config.
@pretentiousgit
Copy link

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

@domenu
Copy link

domenu commented Mar 28, 2019

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

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

@hnql
Copy link

hnql commented Sep 18, 2019

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

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

and

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

exwm pushed a commit to exwm/Chart.js that referenced this issue Apr 30, 2021
… new settings.

gridLines.circular is a new option that toggles circular lines. This allows radar charts with circular lines chartjs#3082
pointLabels.display is a new option that toggles the display of point labels.
The existing angleLines.display is used with the new pointLabels.display setting is used to trigger the radar like settings.
This required changing the default polar area config.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants