Taiga UI 5.0 is out!

PieChart ADDON-CHARTS

Examples API GitHub

On this page

Sizes 

    
      
    

      
      
    

  
    
      <div class="wrapper">
    <tui-pie-chart
        size="xs"
        class="tui-space_right-4"
        [value]="value"
    />
    <tui-pie-chart
        size="s"
        class="tui-space_right-4"
        [value]="value"
    />
    <tui-pie-chart
        size="m"
        class="tui-space_right-4"
        [value]="value"
    />
    <tui-pie-chart
        size="l"
        class="tui-space_right-4"
        [value]="value"
    />
    <tui-pie-chart
        size="xl"
        class="tui-space_right-4"
        [value]="value"
    />
</div>

    

      
      
    

  
    
      .wrapper {
    display: flex;
    align-items: center;
}

With labels

Use ChartHint directive to enable hints with tuiHintContent
    
      
    

      
      
    

  
    
      <tui-pie-chart
    [tuiHintContent]="content"
    [value]="value"
/>

<ng-template
    #content
    let-index
>
    <span>{{ value[index] || 0 | tuiAmount: 'RUB' }}</span>
    <div>{{ labels[index] }}</div>
</ng-template>

    

      
      
    

  
    
      :host {
    --tui-chart-categorical-00: #c779d0;
    --tui-chart-categorical-01: #feac5e;
    --tui-chart-categorical-02: #ff5f6d;
    --tui-chart-categorical-03: #4bc0c8;
    --tui-chart-categorical-04: #9795cd;
}
GitHub StackBlitz