How to add title inside doughnut chart in Angular Chart?

Question

I'm using a doughnut chart in Angular Chart. I want to place some text in the center of the doughnut. I've read this question's answers but none of them works for me, because I have tooltips and for some reason the text disappears when you hover the chart. Moreover, I need to provide this text from "outside" - custom text, e.g. a title.

So, my idea is to have something like:

var options = {
    innerTitle = "This should be placed in the center of the doughnut"
}

Any ideas?

Edit: I've added a JS Bin by changing a few lines of this answer.

Answer 1

I'll take a stab at this. This approach just absolutely positions a label over top of the canvas. The only downside to this is that you have to set the height and width of both the #canvas-holder and canvas. I've created a plunkr to demonstrate: http://plnkr.co/edit/kT63Ur5ebNm1A6bQWSlO

<!-- css -->
#canvas-holder {
  height: 100px;
  width: 100px;
  position: relative;
}

.chart-title {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

<!-- canvas -->
<div id="canvas-holder">
    <label class="chart-title">My Chart Title</label>
    <canvas id="chart-area" height="100" width="100" />
</div>