Taiga UI 5.0 is out!

BarSet ADDON-CHARTS

Examples API GitHub

On this page

A group of bars for bar chart

Dynamic size 

    
      
    

      
      
    

  
    
      <tui-bar-set
    class="bars"
    [size]="null"
    [value]="value"
/>

    

      
      
    

  
    
      .bars {
    block-size: 6.25rem;
    inline-size: 10rem;
    box-shadow: 0 1px var(--tui-border-normal);
}

Fixed size 

    
      
    

      
      
    

  
    
      <tui-bar-set
    size="m"
    class="bars"
    [value]="value"
/>

    

      
      
    

  
    
      .bars {
    block-size: 6.25rem;
    inline-size: 10rem;
    box-shadow: 0 1px var(--tui-border-normal);
}

With negative values 

    
      
    

      
      
    

  
    
      <tui-bar-set
    class="bars"
    [value]="value"
/>

    

      
      
    

  
    
      .bars {
    block-size: 6.25rem;
    inline-size: 3.75rem;
    margin-block-end: 3.125rem;
    box-shadow: 0 1px var(--tui-border-normal);

    --tui-chart-categorical-00: var(--tui-background-accent-1);
    --tui-chart-categorical-01: var(--tui-background-accent-1);
}

Horizontal 

    
      
    

      
      
    

  
    
      <div class="wrapper">
    <tui-bar-set
        class="bars"
        [value]="value"
    />
</div>

    

      
      
    

  
    
      .wrapper {
    block-size: 6.25rem;
}

.bars {
    block-size: 12.5rem;
    inline-size: 6.25rem;
    margin-block-end: 3.125rem;
    box-shadow: 0 1px var(--tui-border-normal);
    transform-origin: bottom left;
    transform: rotate(90deg) translate(-12.5rem, 0);

    --tui-chart-categorical-00: linear-gradient(#ffc500, #c21500);
    --tui-chart-categorical-01: linear-gradient(#26a0da, #314755);
    --tui-chart-categorical-02: linear-gradient(#f64f59, #c471ed, #12c2e9);
    --tui-chart-categorical-03: linear-gradient(#c94b4b, #4b134f);
    --tui-chart-categorical-04: linear-gradient(#114357, #f29492);
}

With value label

1 145 
    
      
    

      
      
    

  
    
      <tui-bar-set
    class="bars"
    [collapsed]="true"
    [value]="value"
>
    {{ sum | tuiFormatNumber }}
</tui-bar-set>

    

      
      
    

  
    
      .bars {
    block-size: 7.5rem;
    inline-size: 5rem;
    margin-block-start: 2rem;
    box-shadow: 0 1px var(--tui-border-normal);
}
GitHub StackBlitz