Center text in the middle of the chart

[Miguel Angel]

Hi my friends

I am trying to put the values ​​of the graph in the center of the Doughnut, in a few words I want to visualize the values ​​of the tooltip in a text in the center of the graph.

I appreciate the help with this topic, if this requirement is possible.

I want some like this:

 thanks for helping.

[Kalaimathi Chellaiah]

Hi Miguel, 

 

Greetings from Syncfusion. 

 

We have analyzed your requirement with attached screenshot. We can achieve this requirement using  chart annotation feature and PointRegionMouseMove event. Using this event we can get current point values and use this information in annotation which is placed to the center of the donut. 

Code Snippet:  

//Annotation content div 

<div id="watermark" style="display:none"> 

        <span></span><label style=";font-size:30px; position: relative;" id="lblMsg"></label> 

</div> 

<div> 

@(Html.EJ().Chart("container").Annotations(an => 

          { 

              //Used to place the text in center of the chart 

              an.Visible(true).Content("watermark").Region(Syncfusion.JavaScript.DataVisualization.Region.Series).Add(); 

          }) 

) 

</div> 

function pointregionmousemove(args) { 

   var label = document.getElementById('lblMsg'); 

           label.style.color = args.model.series[0].points[args.data.pointData[0].PointIndex].fill; 

           label.innerHTML = args.model.series[0].points[args.data.pointData[0].PointIndex].y + '%' + '<br/>' + ' ' + args.model.series[0].points[args.data.pointData[0].PointIndex].x ; 

          //some code here 

      } 

 

Screenshot: 

 

 

Sample:  http://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionMvcApplication4_(2)1661947901.zip 

Regards, 

Kalai