将工具提示放置在甜甜圈图的外侧

Question

我正在尝试开发应用程序，我必须创建一个包含文本的甜甜圈图。我需要使用ng2-charts，它在后台使用chart.js。但是，工具提示会与甜甜圈切口内的文本混淆，并且工具提示和文本均不可见。这是我的标记

<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>

而且这里是ts文件的一部分

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

这是图片中不需要的结果：

我尝试将以下内容添加到doughnutChartOptions，但这无济于事。

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

因此，可以选择使工具提示以其他方式显示吗？（这是一个stackblitz项目草案）：https://stackblitz.com/edit/angular-j4jfvx

Answer 1

Check This link

我添加了

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

并且它对工具提示进行了一些更改。

编辑：

将style="z-index:10000"添加到画布以进行快速破解