BarChart ADDON-CHARTS

    
      
    

      
        Copy
      
      
    
  

    
      <tui-axes
    class="axes"
    [axisXLabels]="labelsX"
    [axisYLabels]="labelsY"
>
    <tui-bar-chart
        [max]="10000"
        [value]="value"
    />
</tui-axes>

    

      
        Copy
      
      
    
  

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

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <div class="flex">
    <tui-axes
        class="axes"
        [axisXLabels]="labelsX"
        [axisYLabels]="labelsY"
    >
        <tui-bar-chart
            [max]="10000"
            [tuiHintAppearance]="appearance"
            [tuiHintContent]="hint"
            [value]="value"
        />
    </tui-axes>

    <tui-axes
        class="axes"
        [axisXLabels]="labelsX"
        [axisYLabels]="labelsY"
    >
        <tui-bar-chart
            [collapsed]="true"
            [max]="10000"
            [tuiHintAppearance]="appearance"
            [tuiHintContent]="hint"
            [value]="value"
        />
    </tui-axes>
</div>

<tui-textfield
    tuiChevron
    class="select"
>
    <label tuiLabel>Hint appearance</label>

    <input
        tuiSelect
        [(ngModel)]="appearance"
    />
    <tui-data-list-wrapper
        *tuiDropdown
        [items]="appearances"
    />
</tui-textfield>

    

      
        Copy
      
      
    
  

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

    &:first-child {
        --tui-chart-categorical-00: #ffd700;
        --tui-chart-categorical-01: #800080;
    }

    &:last-child {
        --tui-chart-categorical-00: #87ceeb;
        --tui-chart-categorical-01: #ee82ee;
    }
}

.flex {
    display: flex;
    min-inline-size: 31.25rem;
}

.select {
    max-inline-size: 20rem;
}

    

      
        Copy