Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

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

Polar Chart - Labels on the Polar chart #5232

Closed
meghanavc2b opened this issue Feb 4, 2018 · 3 comments
Closed

Polar Chart - Labels on the Polar chart #5232

meghanavc2b opened this issue Feb 4, 2018 · 3 comments

Comments

@meghanavc2b
Copy link

meghanavc2b commented Feb 4, 2018

#344 I want to display labels on the base of the sectors around the arc (like in picture 1). I went through #344 but couldn't find a solution to achieve this. Does latest chart.js support this feature?

image

image

Thanks in advance.

@nibhatt9
Copy link

nibhatt9 commented Aug 3, 2018

I have one solution which is good for my problem which may also useful for you all.

first labels array which you want to show on top add in datasets property with key labels and then add below code to your options property

        hover: {
            animationDuration: 0
          },
        animation: {
            duration: 1,
            onComplete: function() {
              var chartInstance = this.chart,
                ctx = chartInstance.ctx;

              ctx.font = "15px Arial";
              ctx.textAlign = 'right';
              ctx.textBaseline = 'bottom';
              ctx.fillStyle = "#000";

              this.data.datasets.forEach(function(dataset, i) {
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function(bar, index) {
                  var myangl=((bar._model.startAngle)+(bar._model.endAngle))/2;
                  var xpoint= (parseFloat(bar._model.outerRadius)+20)*(Math.cos(myangl)) + (bar._model.x);
                  var ypoint= (parseFloat(bar._model.outerRadius)+20)*(Math.sin(myangl)) + (bar._model.y);
                  ctx.fillText(bar._model.label,xpoint ,ypoint);
                });
              });
            }
          }

@foria
Copy link

foria commented Aug 22, 2018

I need to add labels as well.
Can you give some help on how to implement this please?

@arthabus
Copy link

here is a hack that I ended up with - radar has the labels so you can draw the"radar" behind "polar area". Just add two canvases one above the other and setup the radar so only the labels are visible (like transparent colors for the chart lines etc).

@kurkle kurkle closed this as completed Apr 17, 2021
@chartjs chartjs locked and limited conversation to collaborators Apr 17, 2021

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Projects
None yet
Development

No branches or pull requests

6 participants