PieChart ADDON-CHARTS v5.0.0+

    
      
    

      
        Copy
      
      
    
  

    
      <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>

    

      
        Copy
      
      
    
  

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

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <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>

    

      
        Copy
      
      
    
  

    
      :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;
}

    

      
        Copy