Taiga UI 5.0 is out!

Axes ADDON-CHARTS

Examples API GitHub

On this page

Just axes for charts

Cool one

Target
 
25%
50%
75%
100%
Jan 2019
Feb
Mar
 
80 k
100 k
120 k
Sum 
    
      
    

      
      
    

  
    
      <tui-axes
    axisYName="Target"
    axisYSecondaryName="Sum"
    class="axes"
    [axisXLabels]="axisXLabels"
    [axisYInset]="true"
    [axisYLabels]="axisYLabels"
    [axisYSecondaryLabels]="axisYSecondaryLabels"
    [horizontalLines]="3"
    [verticalLines]="4"
    [verticalLinesHandler]="verticalLinesHandler"
/>

    

      
      
    

  
    
      .axes {
    block-size: 18.75rem;
    inline-size: 37.5rem;
}

With bars

Q1
Q2
Q3
Q4
 
20 k
40 k 
    
      
    

      
      
    

  
    
      <tui-axes
    axisY="none"
    class="axes"
    [axisXLabels]="axisXLabels"
    [axisYSecondaryLabels]="axisYSecondaryLabels"
    [centeredXLabels]="true"
    [horizontalLines]="3"
    [horizontalLinesHandler]="horizontalLinesHandler"
    [verticalLines]="5"
    [verticalLinesHandler]="verticalLinesHandler"
>
    <tui-bar-chart
        class="chart"
        [max]="maxValue"
        [tuiHintContent]="hint"
        [value]="value"
    />
</tui-axes>

<ng-template
    #hint
    let-setIndex
>
    @for (item of value; track item) {
        <p class="hint">
            <span
                class="dot"
                [style.background]="`var(--tui-chart-categorical-${$index.toString().padStart(2, '0')})`"
            ></span>
            <span class="name">{{ getSetName($index) }}</span>
            <span>{{ (item[setIndex] || 0) * 1000 | tuiAmount: 'RUB' }}</span>
        </p>
    }
</ng-template>

    

      
      
    

  
    
      :host,
.hint {
    --tui-chart-categorical-00: #c779d0;
    --tui-chart-categorical-01: #feac5e;
    --tui-chart-categorical-02: #ff5f6d;
    --tui-chart-categorical-03: #4bc0c8;
}

.axes {
    block-size: 18.75rem;
    inline-size: 37.5rem;
}

.chart {
    block-size: 100%;
}

.wrapper {
    position: relative;
    display: flex;
    flex: 1;
    align-items: flex-end;
    justify-content: center;
    block-size: 100%;
    margin-block-end: -0.0625rem;
    cursor: pointer;

    &:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }
}

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

.dot {
    border-radius: 100%;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    margin-inline-end: 0.5rem;
}

.name {
    margin-inline-end: 0.5rem;
}

With horizontal bars

0
25
50
75
100 
    
      
    

      
      
    

  
    
      <tui-axes
    class="axes"
    [axisXLabels]="axisXLabels"
    [verticalLines]="5"
>
    <div class="t-horizontal-bars">
        @for (bar of value; track bar) {
            <tui-bar
                size="m"
                [style.background-color]="`var(--tui-chart-categorical-${$index.toString().padStart(2, '0')})`"
                [style.height.%]="getHeight(bar)"
            />
        }
    </div>
</tui-axes>

    

      
      
    

  
    
      .axes {
    block-size: 18.75rem;
    inline-size: 37.5rem;
}

.t-horizontal-bars {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    inline-size: 16.75rem;
    block-size: 37.5rem;
    transform-origin: bottom left;
    transform: rotate(90deg) translate(-16.75rem, 0);
}
GitHub StackBlitz