Donut chart with Angular

4 posts, 0 answers
  1. moran
    moran avatar
    5 posts
    Member since:
    Feb 2016

    Posted 06 Jul Link to this post

    Hi,

    I'm using kendo with Angular, and looking for a way to format the tooltip with thousand coma seperator (what I have now, is not working)

    and also have a number in the donut.

    I know how to do it in JS but not in Angular..

    this is my code (it's all on the html page) , can you please help me?

     

     

    <div class="panel panel-default" style="width: 530px; margin-left:10px;float: left;">
     <div class="panel-body">
       <div 
    kendo-chart 
    k-title="{text: 'POR vs Burden', color: '#3d3c3c'}"
    k-legend="{ position: 'bottom' }" 
    k-series-defaults="{ type: 'donut', startAngle: 270, labels: {
       visible: true,
    holeSize: 45,
       background: 'transparent' }}"
    k-series="[{
    name: 'Value',
                   field: 'Value',                
                   categoryField: 'Category',
                  labels: {
                   visible: false
               },
                            holeSize: 70,
                   visibleInLegendField: 'visibleInLegend',
                   padding: 10
                 }]"
                k-series-colors="['#b2473e', '#eb8a44']"
       k-tooltip ="{visible: true, format:'{0:N0}'}"
       k-data-source="burdenMoneydata"     
       style="height: 300px; width: 500px;">
    </div>
     </div>
    </div>

  2. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 08 Jul Link to this post

    Hello,

    The provided configuration looks correct and seems to be working at least when I tested it on my side. Could you check this example and let me know if I am missing something?

    Regards,
    Daniel
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. moran
    moran avatar
    5 posts
    Member since:
    Feb 2016

    Posted 10 Jul in reply to Daniel Link to this post

    thanks, it's the same code, but for you it's working and for me not... I'll try to convert the data.

     

    can you please help me with how can I put a value in the donut hole? with angular?

  5. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 13 Jul Link to this post

    Hello again,

    You can use the approach demonstrated here to place text in the center - updated example.

    Regards,
    Daniel
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready