LegendItem ADDON-CHARTS

    
      
    

      
        Copy
      
      
    
  

    
      <div class="wrapper">
    <tui-ring-chart
        [value]="value"
        [(activeItemIndex)]="activeItemIndex"
    >
        <span>{{ sum | tuiAmount: 'RUB' }}</span>
        <div>Total</div>
    </tui-ring-chart>

    <div class="legend">
        @for (label of labels; track label) {
            <tui-legend-item
                size="s"
                class="item"
                [active]="isItemActive($index)"
                [color]="`var(--tui-chart-categorical-${$index.toString().padStart(2, '0')})`"
                [text]="label"
                (tuiHoveredChange)="onHover($index, $event)"
            >
                <span>{{ value[$index] || 0 | tuiAmount: 'RUB' }}</span>
            </tui-legend-item>
        }
    </div>
</div>

    

      
        Copy
      
      
    
  

    
      @import '@taiga-ui/styles/utils.less';

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

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

    @media @tui-mobile {
        flex-direction: column;
    }
}

.legend {
    margin: 0 0 0 2rem;

    @media @tui-mobile {
        margin: 2rem 0 0;
    }
}

.item {
    margin: 0 0.5rem 0.75rem 0;
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <div tuiNotification>
    In case you need to be able to toggle a category by separate action, for example, if clicking on it should expand it
    for more details
</div>

<div class="wrapper">
    <tui-ring-chart
        size="s"
        class="chart"
        [value]="value"
    />

    <div class="legend">
        @for (label of labels; track label) {
            <tui-legend-item
                #item
                class="item"
                [color]="`var(--tui-chart-categorical-${$index.toString().padStart(2, '0')})`"
                [disabled]="!isEnabled($index)"
                [text]="label"
                (click)="onClick($index)"
                (keydown.delete)="toggle($index)"
            >
                <input
                    size="s"
                    tuiCheckbox
                    type="checkbox"
                    [checked]="!item.disabled()"
                />
                <span>{{ data[$index] || 0 | tuiAmount: 'RUB' }}</span>
                <tui-icon
                    icon="@tui.x"
                    class="disable"
                    [class.disable_rotated]="item.disabled()"
                    (click.stop)="toggle($index)"
                />
            </tui-legend-item>
        }
    </div>
</div>

    

      
        Copy
      
      
    
  

    
      @import '@taiga-ui/styles/utils.less';

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

.chart {
    pointer-events: none;
}

.wrapper {
    display: flex;
    align-items: center;
    margin-block-start: 1rem;

    @media @tui-mobile {
        flex-direction: column;
    }
}

.disable {
    .transition(~'transform, color');

    margin-inline-start: 0.5rem;
    will-change: transform;
    color: var(--tui-text-secondary);
    pointer-events: auto;

    &::before {
        font-size: 1rem;
    }

    &:hover {
        color: var(--tui-text-primary);
    }

    &_rotated {
        transform: rotate(45deg);
    }
}

.legend {
    margin: 0 0 0 2rem;
    justify-content: center;

    @media @tui-mobile {
        margin: 2rem 0 0;
    }
}

.item {
    margin: 0 0.5rem 0.75rem 0;
}

    

      
        Copy