2

I am trying to develop an application and i have to create a doughnut chart with the text within. I am required to use ng2-charts which uses chart.js under the hood. However the tooltip messes with the text within the cutout of the doughnut and neither the tooltip nor the text are visible. Here is my markup

<div class="my-3">
      <div class="model-statbox mx-auto">
        <canvas baseChart
                [data]="doughnutChartData"
                [labels]="doughnutChartLabels"
                [colors]="doughnutColors"
                [chartType]="doughnutChartType"
                [options]="doughnutChartOptions"
                class="grades-chart">
        </canvas>
        <div class="grades-content text-center text-color-theme font-weight-bold px-5 mx-auto">
          <div class="row justify-content-center font-4xl">{{this.passed}}/{{this.all}}</div>
          <div class="row justify-content-center mt-n2 font-lg">{{'Model.Passed' | translate}}</div>
        </div>
      </div>
    </div>

and I here is a part of my ts file 

this.doughnutChartOptions = Object.assign({
      cutoutPercentage: 80,
      legend: {
        display: false
      },
      centerText: {
        display: true,
        text: text
      }
    });

Here is the unwanted result in a picture:

enter image description here

I have tried adding the following to the doughnutChartOptions but this doesn't help.

tooltips:{
 position: 'nearest',
 yAlign: 'bottom'
}

So is there an option to make the tooltip face the other way?
(Here is a draft stackblitz project) : https://stackblitz.com/edit/angular-j4jfvx

pkarakal
  • 90
  • 1
  • 7
  • It looks like the doughnut chart is positioned at the side on the screen so that's why it's tooltip is going into the middle try align the doughnut have some space on the left side from the screen and check if still it is not aligning outside some changes has to be done if their is space on the left side still it is coming in center then make a simple stackblitz for the support – Hitech Hitesh Dec 06 '19 at 02:16
  • Maybe a duplicate of https://stackoverflow.com/q/43211497/2358409 – uminder Dec 06 '19 at 06:40
  • I added a draft stackblitz demo of what I have already implemented. I couldn't get it to show in the outer side of the chart still – pkarakal Dec 06 '19 at 15:35

1 Answers1

0

Check This link

I added 

tooltips: {
        callbacks: {
            labelColor: function(tooltipItem, chart) {
                return {
                    borderColor: 'rgb(255, 0, 0)',
                    backgroundColor: 'rgb(255, 0, 0)'
                };
            },
            labelTextColor: function(tooltipItem, chart) {
                return '#543453';
            }
        }
    }

and it made some changes to the tooltip.

Edit:

Add style="z-index:10000" to canvas for a quick hack

Garine
  • 574
  • 5
  • 21
  • how changing the color of the tooltip helps the position? The text of both the tooltip and the text behind the tooltip isn't visible :/ – pkarakal Dec 06 '19 at 15:56
  • I'm just saying it changed the properties of the tooltip. check the link for reference. – Garine Dec 07 '19 at 04:13
  • 1
    the style of the tooltip is useless. Only the setting the z-index will actually help. The color will just make it "more pleasant (subjective)" and make it stand out more. – pavlkara1 Dec 09 '19 at 18:50