Горизонтальная гистограмма не начинается с 0

Question

У меня есть компонент гистограммы, и этот компонент многократно используется в проекте несколько раз. Я немного изменил этот компонент и повторно использовал его для визуализации горизонтальной гистограммы, но он не начинается с индекса 0 и всегда показывает только одну полосу. Я пробовал использовать beginAtZero:true и min:0, но они не работают.

ts-файл компонента bar: -

 this.bar_chart = new Chart(this.dataCtx, {
      type: this.chartType || 'bar',
      data: {
        labels: this.nameObj.map(obj => obj.name),
        datasets: this.setChartData()
      },
      options: {
        legend: {
          display: this.showLabel,
          labels: {
            padding: 20,
            fontStyle: 'bold',
            fontSize: 16,
          }
        },
        title: {
          display: this.label ? true : false,
          text: this.label,
          fontStyle: 'bold',
          fontSize: 20,
        },
        showAllTooltips: true,
        toolTips: {
          mode: 'index',
          intersect: true
        },
        scales: {
          xAxes: [{
            categoryPercentage: 0.65,
            // barPercentage: 1.0,
            // barThickness: 50,
            maxBarThickness: 50,
            display: true,
            scaleLabel: {
              display: true,
              fontStyle: 'bold',
              labelString: this.yLabel
            },
            ticks: {
              autoSkip: false
            },
            gridLines: {
              color: 'rgba(88, 88, 88, 0.35)',
              lineWidth: 2.5
            }
          }],
          yAxes: [{
            // stacked: true,
            display: true,
            scaleLabel: {
              display: true,
              fontStyle: 'bold',
              labelString: this.xLabel
            },
            ticks: {
              beginAtZero: true,
              min: 0,
              // max: 100,
            },
            gridLines: {
              color: 'rgba(0, 78, 162, 0.5)',
              lineWidth: 0.5
            }
          }]
        },
        responsive: true,
        onClick: function (evt, arr) {
          if (arr[0]) {
            self.onSegClick.emit(arr[0]._index);
          }
        },
      }
    });

  }


  cohortProf(options) {
    let cohortData = [{
      data: this.data.map(coh => Math.floor(coh.proficiency * 100)),
      backgroundColor: '#0080FF',
      options
    }]
    return cohortData;

  }


  testData() {
    let testData = [];
    this.data.forEach((d, i) => {
      let val = Math.floor(d.data * 100);
      testData.push(val);
      this.color.push('#' + (Math.random() * 0xFFFFFF << 0).toString(16));
      // this.color.push('hsl('+ val +', 100%, 50%)')
    });
    return testData;
  }

  testProf(options) {
    let testData = [{
      data: this.testData(),
      backgroundColor: this.color,
      options
    }]
    return testData;
  }

  subjectProf(options) {
    let subData = [];
    let strat = this.hoverData;
    this.data.filter((d, index) => { subData.push({ "data": d, "backgroundColor": this.colors[index], options, label: strat[index] }) });
    return subData;
  }

  setChartData() {
    let dataSet: any;
    let fixed_options = {
      borderColor: 'tranparent',
      borderWidth: 2,
      pointBorderColor: 'transparent',
      pointBackgroundColor: 'transparent',
      pointHoverBackgroundColor: "#fff",
      pointHighlightFill: "#fff",
      pointRadius: 3,
      pointHitRadius: 20,
      pointBorderWidth: 1,
    };
    switch (this.type) {
      case 'test': {
        dataSet = this.testProf(fixed_options);
        break;
      }
      case 'cohort': {
        dataSet = this.cohortProf(fixed_options);
        break;
      }
      case 'grouped-chart': {
        dataSet = this.subjectProf(fixed_options);
        break;
      }

      case 'single-bar': {
        dataSet = [{
          data: this.data,
          backgroundColor: this.colors,
          label: 'Analytics'
        }];
        break;
      }

      default: {
        break;
      }
    }
    return dataSet;
  }
}

повторно используемый компонент bar: -

  horizontalChart = {
    data:[10,20,30]
  }

html: -

 <bar-chart  [type]="'single-bar'" [hoverData]="['Experts Avg. Score', 'Others Avg. Score']" barLabel="Proficiency"
   [data]="horizontalChart.data" [nameObj]="uploadAnalytics.analytics" yLabel="Average Upload Score" chartType="horizontalBar"
          [xLabel]="'Quizzes'" [showLabel]="true" (onSegClick)="selectBar($event)"></bar-chart>