Datafield in the middle of the hole of a donut chart

[Tim Hartog]

Hi,

I am using Donut charts (ejs-accumulation chart) in a pane of a dashboard layout.

In the middle of the chart (into the hole), I want to add a data field (value).

On this forum I found some code that should do this, but somehow the field value is not shown in the middle of the chart but in the left upper corner of the pane. Trying to change the css did not help.

I use the code below. Can you point me out where I go wrong?

<e-panel
        [row]="1" [col]="0">
        <ng-template #header>
          <div class="graph-title">Verbeterpunten:<br> Nog te doen ({{ improvementStock }})</div>
        </ng-template>
        <ng-template #content>
          <ejs-accumulationchart
            id="improvement-stock"
            style='display:block;  width: 190px; height: 190px'
            background="none"
            [legendSettings]="legendSettings">
            <e-accumulation-series-collection>
              <e-accumulation-annotations>
                <e-accumulation-annotation
                  content='<div style="width: 100%; height: 100%; text-align: center; padding: 5px 5px 5px 5px">{{improvementStock}}</div>'
                  region='Chart'>
                </e-accumulation-annotation>
              </e-accumulation-annotations>
              <e-accumulation-series
                name='Project'
                [dataSource]='poImprovementDataStock'
                xName='x'
                yName='y'
                [startAngle]="startAngle"
                [endAngle]="endAngle"
                [palettes]="stockPalette"
                innerRadius="70%"
                radius="70%"
                [dataLabel]="dataLabel">
              </e-accumulation-series>
            </e-accumulation-series-collection>
          </ejs-accumulationchart>
        </ng-template>
      </e-panel>

regards,

Bob

[Durga Gopalakrishnan]

Hi Bob, 

  

Greetings from Syncfusion. 

  

We have analyzed your query with attached snippet. From the snippet, we have noted that annotation is specified inside series collection. We request you to specify annotation inside accumulation chart, since it is direct property. We have prepared sample based on your requirement. Please check with below snippet and sample. 

  

<ejs-accumulationchart > 

      <e-accumulation-annotations> 

            <e-accumulation-annotation 

              content='<div style="width: 100%; height: 100%">Text</div>' 

              x='50%' 

              y='50%' 

              coordinateUnits='Pixel' 

              region='Series'> 

          </e-accumulation-annotation> 

    </e-accumulation-annotations> 

</ejs-accumulationchart> 

  

 

  

Sample : https://stackblitz.com/edit/angular-odhuzv 

  

UG : https://ej2.syncfusion.com/angular/documentation/accumulation-chart/annotation/ 

  

Kindly revert us if you have any concerns. 

  

Regards,  

Durga G 

[Tim Hartog]

Hi Durga,

Your solution is working perfect!

Many thanks for your help.

Regards,

Bob

[Durga Gopalakrishnan]

Hi Bob, 

  

Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you. 

  

Regards, 

Durga G