Добавление вертикальной полосы прокрутки в гистограмму (chartjs)

Question

У меня есть горизонтальная гистограмма, которая может содержать от 1 до 300 баров в зависимости от выбора на приборной панели.Когда отображается много полос, они слишком тонкие.Я хотел бы установить минимальную ширину полосы и иметь вертикальную полосу прокрутки, чтобы видеть те, которые не помещаются на первой странице.

   <div class="row">
   <div class="{{chartType === 'devicesByNetwork' ? 'col-10 net' : 
   'col-12 chartWrapper'}}" style="height:auto; margin: 0 auto;" 
   *ngIf="showChart">

  <div style="max-height:250px; overflow-y: scroll; position: 
  relative"></div>
   <canvas class="devicesByNetwork" *ngIf="chartType === 
    'devicesByDept'" style="margin-top:30px;"  
       height="250px"baseChart
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptionsDevicesByDept"
        [legend]="barChartLegend"
        [chartType]="barChartType"
        [colors]="myColors"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)"></canvas>

      </div>

Answer 1

Мы не можем установить минимальную ширину или высоту для столбцов диаграммы, поэтому вместо этого мы установим высоту содержащего элемента div.В HTML:

    <div style="height:250px; overflow-y: scroll; position: relative">
            <div id="canvasContainer">
                    <canvas></canvas>
            </div>
    </div>

Затем добавьте функцию Javascript, которая вычисляет высоту элемента canvasContainer на основе количества доступных баров и минимальной высоты каждого бара:

    function calcHeight (numOfBars) {
            var maxHeightOfChart = 250;
            var minHeight = 40; //setting the min height of the bar + margin between
            var chartHeight = minHeight * numOfBars > maxHeightOfChart ? minHeight * numOfBars : maxHeightOfChart;
            document.getElementById("canvasContainer").style.height = chartHeight.toString()+"px";
    }