How to use the highcharts.theme function in highcharts

this.state = {
            chartOptions: {
                chart: {
                    type: 'solidgauge',
                    height: 150,
                },

                title: null,

                pane: {
                    center: ['50%', '85%'],
    //        size: '140%',
                    startAngle: -90,
                    endAngle: 90,
                    background: {
                        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                        innerRadius: '60%',
                        outerRadius: '100%',
                        shape: 'arc'
                    }
                },

                tooltip: {
                    enabled: false
                },

                plotOptions: {
                    solidgauge: {
                        dataLabels: {
                            y: 5,
                            borderWidth: 0,
                            useHTML: true

const val = this.y < 1 ? '' : this.y;
            return val;
          },
        }
      }
    },
    xAxis: xAxisSettings,
    yAxis: {
      title: {
        text: yAxisLabel
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        },
        formatter: function(){
          // Sets the total number of occurences per day
          // If no occurences, displays nothing
          const val = this.total < 1 ? '' : this.total;
          return val;
        },
      },
      min: 0,
      max: 20,
    },
    series: dataSeries
  });

}

$q.all(translations).then(function(res) {
            Highcharts.theme.lang = {
                thousandsSep: $filter('localNumber')(1111, LOCALE_2_LETTER).split('1')[1],
                decimalPoint: $filter('localNumber')(1.111, LOCALE_2_LETTER).split('1')[1],
                months: [
                    res['month.1'], res['month.2'], res['month.3'], res['month.4'], res['month.5'],
                    res['month.6'], res['month.7'], res['month.8'], res['month.9'], res['month.10'], res['month.11'], res['month.12']],
                weekdays: [
                    res['day.0'], res['day.1'], res['day.2'], res['day.3'], res['day.4'], res['day.5'], res['day.6']
                ]
            };
            Highcharts.setOptions(Highcharts.theme);
        });
        return Highcharts;

},
        title: {
            text: null,
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme &amp;&amp; Highcharts.theme.contrastTextColor) || 'black',
                    }
                }
            }
        },
        series: [{
            name: 'portion',
            colorByPoint: true,
            data: array
        }]
    });
  }
}

},
            tooltip: {
                formatter: function () {
                    return Highcharts.dateFormat('%B %e, %Y', this.x) + '<br>' +
                        this.series.name + ':' + Highcharts.numberFormat(this.y);
                },
            },
            yAxis: {
                title: 'Points'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme &amp;&amp; Highcharts.theme.dataLabelsColor) || 'white'
                    }
                },
                series: {
                    pointPadding: 0,
                    groupPadding: 0,
                    events: {
                        click: this.clickBar
                    }
                }
            },
            series: [{
                type: 'column',
                name: 'Daily completion',
                data: dataset.map((day) =&gt; {
                    if (day.completion[metric].closed - day.scopeChangeCompletion[metric].closed &gt; 0) {
                        return {

height: 200,
                type: 'column',
            },
            title: null,
            xAxis: {
                categories: dataset.map(cat => cat.label),
            },
            yAxis: {
                min: 0,
                title: 'Issues count'
            },
            plotOptions: {
                column: {
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    }
                },
                series: {
                    pointPadding: 0,
                    groupPadding: 0,
                    events: {
                        click: this.clickBar
                    }
                }
            },
            series: [{
                name: 'Issues',
                showInLegend: false,
                data: dataset.map((cat) => {
                    return {
                        y: cat.issues.length,

tooltip: {
                //formatter: this.formatTooltip
                formatter: function () {
                    return Highcharts.dateFormat('%B %e, %Y', this.x) + '<br>' +
                        this.series.name + ':' + Highcharts.numberFormat(this.y);
                },
            },
            yAxis: {
                title: metric
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme &amp;&amp; Highcharts.theme.dataLabelsColor) || 'white'
                    }
                },
                series: {
                    pointPadding: 0,
                    groupPadding: 0,
                    events: {
                        click: this.clickBar
                    }
                }
            },
            series: [{
                type: 'column',
                name: 'Completed',
                data: dataset.map((pt) =&gt; {
                    if (pt.completion[metric].count - pt.scopeChangeCompletion[metric].count &gt; 0) {
                        return {

const data = {
  title: {
    text: 'Combination chart',
  },
  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'],
  },
  labels: {
    items: [
      {
        html: 'Total fruit consumption',
        style: {
          left: '50px',
          top: '18px',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'black',
        },
      },
    ],
  },
  series: [
    {
      type: 'column',
      name: 'Jane',
      data: [3, 2, 1, 3, 4],
    },
    {
      type: 'column',
      name: 'John',
      data: [2, 3, 5, 7, 6],
    },
    {