Combining Linear and Circular progress bar in single highchart graph

Question

I am working on highchart graphs with angular 10. Below is the chart which shows 2 circular progress bars on different color and values.

 new Highcharts.chart('container', {
        exporting: {
          enabled: false
        },
        chart: {
          type: 'solidgauge',
          events: {
            render() {
              let chart = this,
                label1 = chart.series[0].dataLabelsGroup,
                label2 = chart.series[1].dataLabelsGroup;

              label1.translate(chart.marginRight, 0)
              label2.translate(chart.marginRight, chart.plotTop - label2.getBBox().height)
            }
          }
        },
        legend: {
          enabled: false // disable the legend
        },
        credits: {
          enabled: false
        },
        pane: {
          startAngle: 180,
          background: this.getBackgroundSettingsForDepositStatusGraph()
        },
        tooltip: {
          outside: true
        },
        title: false,
        accessibility: {
          point: {
            valueSuffix: ''
          }
        },
        xAxis: {
          tickInterval: 1,
          minorGridLineWidth: 0,
          labels: {
            align: 'right',
            useHTML: true,
            allowOverlap: true,
            step: 1,
            y: 3,
            style: {
              fontSize: '13px',
              color: "black"
            }
          },
          lineWidth: 0,
        },
        yAxis: {
          min: 0,
          max: 100,
          lineWidth: 0,
          tickPositions: []
        },
        plotOptions: {
          solidgauge: {
            dataLabels: {
              enabled: true,
              verticalAlign: 'middle'
            },
          }
        },
        series: [
          {
            name: "Total",
            showInLegend: true,
            data: [
              {
                color: Highcharts.getOptions().colors[0],
                radius: "115%",
                innerRadius: "110%",
                y: Math.round(this.data.total.percentage),
                dataLabels: {
                  format: "{y}%",
                  borderWidth: 0,
                  style: {
                    fontSize: "15px"
                  }
                }
              }
            ]
          },
          {
            name: 'Amount',
            showInLegend: true,
            data: [
              {
                color: Highcharts.getOptions().colors[2],
                radius: "105%",
                innerRadius: "100%",
                y: Math.round(this.data.amount.percentage),
                dataLabels: {
                  format: "{y}%",
                  borderWidth: 0,
                  style: {
                    fontSize: "15px"
                  }
                }
              }
            ]
          }
        ]

      });

Along with this, I need to add 2 more linear progress bars under this chart with the same value and some extra data.

Eg:

Total 25 60 (linear progress bar with this.data.total.percentage)

Amount 45 100 (linear progress bar with this.data.amount.percentage)

NB: The linear bar should display under the circular progress bar also it should display in the format given in example.

I tried many methods but the linear bar overlapping circular one.

Answer 1

As @FunkMonkey33 said, you can just use different divs for each chart. If you want to avoid duplicating the same options for separate charts, you can set them globally via Highcharts.setOptions()

Example code:

Highcharts.setOptions({
  chart: {
    type: 'area',
  },

  plotOptions: {
    area: {
      color: '#234E38'
    }
  },
});

var chart1 = Highcharts.chart('container1', {
  series: [{
    data: [1, 2, 3, 4]
  }]
});

var chart2 = Highcharts.chart('container2', {
  series: [{
    data: [4, 3, 2, 1]
  }]
});

Simplified demo: https://jsfiddle.net/BlackLabel/vr2d31f4/

Demo: https://jsfiddle.net/BlackLabel/jsmqacfu/

Docs: https://www.highcharts.com/docs/getting-started/how-to-set-options#global-options

API Reference: https://api.highcharts.com/class-reference/Highcharts.html#.setOptions