How to use the highcharts.Chart function in highcharts

componentDidMount() {
    noData(Highcharts)

    Highcharts.setOptions({
      lang: {
        thousandsSep: ','
      }
    })

    this.marketPriceChart = new Highcharts.Chart('market_price_history_chart', {
      title: {
        text: null
      },
      chart: {
        height: 300 // mirror this height in css container height declaration
      },
      lang: {
        noData: 'No price history'
      },
      rangeSelector: { selected: 1 },
      xAxis: {
        type: 'datetime',
        title: {
          text: 'Time'
        }
      },

},
    {
      'from': 600000,
      'to': 2000000,
      'color': 'rgba(68, 170, 213, 0.1)',
      'label': {
        'text': 'Excellent',
        'style': {
          'color': '#606060',
          'fontSize': '8px'
        }
      }
    }]
  };

  return new Highcharts.Chart({
    chart: {
      type: 'spline',
      renderTo: mediaType + 'Graph',
    },
    title: {
      text: mediaType + ' bitrate stability',
      style: {
        fontSize: '14px'
      }
    },
    subtitle: {
      text: '',
      style: {
        fontSize: '12px'
      }
    },

ngOnInit() {
        if (this.chart) {
            this.chart.destroy();
        }

        if (!this.options.chart) {
            this.options.chart = {};
        }
        this.options.chart.renderTo = this.hostElement.nativeElement;
        this.chart = new Highcharts.Chart(this.options);
    }

chartSetup(callback = () => {}) {
    window.removeEventListener("resize", this.updateChartDebounced);

    Highcharts.setOptions({
      lang: {
        thousandsSep: ","
      }
    });
    const id = "performance_graph_chart";

    this.performanceGraph = new Highcharts.Chart(id, {
      title: {
        text: null
      },
      chart: {
        backgroundColor: "transparent",
        height: "220px",
        spacingLeft: 0,
        spacingRight: 0
      },
      events: {
        load() {
          this.customTexts = [];

          const text = this.renderer
            .text(
              "Responsive text",

makeBiomassLossChart: (el, options, callback) => {
		const {categories, series} = options;
		if (!callback) { callback = function(){}; }
		const chart = new Highcharts.Chart({
			chart: { renderTo: el },
			title: { text: null },
			credits: { enabled: false },
			xAxis: [{
				categories: categories, //years
				labels: { enabled: false }
			}],
			yAxis: [{
				labels: { enabled: false },
				title: { text: null }
			}, {
				labels: { enabled: false },
				title: { text: null },
				opposite: true
			}],
			tooltip: {

y: subCategoryData.get('total'),
          transactions: subCategoryData.get('transactions'),
        })),
        events: {
          click: event => {
            showTransactionModal(event.point.name, event.point.transactions);
          },
        },
        id: masterCategoryId,
        innerSize: '50%',
        name: masterCategoryName,
        size: '80%',
      });
    });

    const chart = new Highcharts.Chart({
      credits: false,
      chart: {
        height: '70%',
        type: 'pie',
        renderTo: 'tk-spending-by-category',
        events: {
          drilldown: event => {
            chart.setTitle({ text: `${event.point.name}<br>${formatCurrency(event.point.y)}` });
            _this.setState({ currentDrillDownId: event.point.id });
          },
          drillup: () =&gt; {
            chart.setTitle({ text: `Total Spending<br>${formatCurrency(totalSpending)}` });
            _this.setState({ currentDrillDownId: null });
          },
        },
      },

const createFn = (options) => {
    chart = new Highcharts.Chart(options);
    return chart;
  };

showTransactionModal(event.point.name, event.point.transactions);
            },
          },
          id: payeeId,
          name: payeeName,
          transactions: spendingData.get('transactions'),
          y: payeeTotal,
        });
      } else {
        allOtherPayees.y += payeeTotal;
      }
    });

    seriesData.push(allOtherPayees);

    const chart = new Highcharts.Chart({
      credits: false,
      chart: {
        height: '70%',
        type: 'pie',
        renderTo: 'tk-spending-by-payee',
      },
      plotOptions: {
        series: {
          dataLabels: {
            formatter: function() {
              let formattedNumber = formatCurrency(this.y);
              return `${this.point.name}<br><span class="currency">${formattedNumber} (${Math.round(
                this.percentage
              )}%)</span>`;
            },
          },