How to use the britecharts/dist/umd/bar.min function in britecharts

mounted() {
    const container = d3Selection.select('.c-work-status-chart');
    const containerWidth = container.node() ? container.node().getBoundingClientRect().width : false;

    const barChart = new BarChart();

    if (containerWidth) {
      const colors = ['#FFF9C4', '#B3E5FC', '#C8E6C9', '#FFCDD2', '#CFD8DC'];
      const removedColors = [];

      $.ajax({
        method: 'GET',
        url: `/api/internal/works/${this.workId}/status_chart_data`,
      }).done((data) => {
        // Remove colors which corresponded to status if its quantity is zero.
        _.forEach(data, function (data, i) {
          if (data.quantity === 0) {
            return removedColors.push(colors[i]);
          }
        });

private initializeChart() {
    switch (this.chartType) {
      case ChartType.Bar:
        this.chart = bar();
        this.chartSelector = '.bar-chart';
        this.chartClickSelector = '.bar-chart .bar';
        this.tooltipContainerSelector = '.bar-chart .metadata-group';
        break;
      case ChartType.Brush:
        this.chart = brush();
        this.chartSelector = '.brush-chart';
        this.chartClickSelector = ''; // No click selector.
        this.tooltipContainerSelector = ''; // No tooltip selector.
        break;
      case ChartType.Bullet:
        this.chart = bullet();
        this.chartSelector = '.bullet-chart';
        this.chartClickSelector = '.bullet-chart .range, .bullet-chart .measure, .bullet-chart .marker-line';
        this.tooltipContainerSelector = ''; // No tooltip selector.
        break;

ChartComponent.prototype.initializeChart = function () {
        switch (this.chartType) {
            case ChartType.Bar:
                this.chart = bar();
                this.chartSelector = '.bar-chart';
                this.chartClickSelector = '.bar-chart .bar';
                this.tooltipContainerSelector = '.bar-chart .metadata-group';
                break;
            case ChartType.Brush:
                this.chart = brush();
                this.chartSelector = '.brush-chart';
                this.chartClickSelector = ''; // No click selector.
                this.tooltipContainerSelector = ''; // No tooltip selector.
                break;
            case ChartType.Bullet:
                this.chart = bullet();
                this.chartSelector = '.bullet-chart';
                this.chartClickSelector = '.bullet-chart .range, .bullet-chart .measure, .bullet-chart .marker-line';
                this.tooltipContainerSelector = ''; // No tooltip selector.
                break;

private drawChart() {
    this.bar = bar();
    this.tooltip = miniTooltip();

    let barContainer = d3Selection.select(this.el).select('.bar-chart-container'),
      containerWidth = barContainer.node() ? barContainer.node().getBoundingClientRect().width : false;

    if (containerWidth) {
      this.bar.width(containerWidth);
      this.bar.shouldReverseColorList(false);

      for (let option in this.chartConfig['properties']) {
        if (this.bar.hasOwnProperty(option) && option !== 'colorSchema') {
          this.bar[option](this.chartConfig['properties'][option]);
        }
      }

      let showTooltip = false;