Есть шанс, что я смогу построить эту радиальную панель с помощью Apexcharts. js

Question

Любой шанс, что я смогу построить этот радиальный стержень (см. Изображение) с помощью Apexcharts. js

Это должно быть всего 4 радиальных бары объединены друг с другом визуально, как изображение. Я строю это с Angular и использую обертку (ng-apexcharts).

Любой, кто мог бы помочь? Или знаете лучшую библиотеку, которую я мог бы использовать?

 overallScore = {
    series: [24, 20, 22, 12],
    labels: ['Strategy', 'Program execution', 'Sector research', 'Ethics'],
    chart: {
      type: "radialBar",
    },

    plotOptions: {
      radialBar: {
        inverseOrder: false,
        startAngle: 0,
        endAngle: 360,
        offsetX: 0,
        offsetY: 0,
        hollow: {
          margin: 5,
          size: '70%',
          background: 'transparent',
          image: undefined,
          imageWidth: 150,
          imageHeight: 150,
          imageOffsetX: 0,
          imageOffsetY: 0,
          imageClipped: true,
          position: 'front',
          dropShadow: {
            enabled: false,
            top: 0,
            left: 0,
            blur: 3,
            opacity: 0.5
          }
        },
        track: {
          show: true,
          startAngle: undefined,
          endAngle: undefined,
          background: '#f2f2f2',
          strokeWidth: '97%',
          opacity: 1,
          margin: 5,
          dropShadow: {
            enabled: false,
            top: 0,
            left: 0,
            blur: 3,
            opacity: 0.5
          }
        },
        dataLabels: {
          show: true,
          name: {
            show: true,
            fontSize: '16px',
            fontFamily: undefined,
            color: undefined,
            offsetY: -10
          },
          value: {
            show: true,
            fontSize: '14px',
            fontFamily: undefined,
            color: undefined,
            offsetY: 16,
            formatter: function (val) {
              return val + '%'
            }
          },
          total: {
            show: true,
            label: '100',
            color: '#373d3f',
            fontSize: '16px',
            fontFamily: undefined,
            formatter: function (w) {
              return w.globals.seriesTotals.reduce((a, b) => {
                return a + b
              }, 0) / w.globals.series.length + '%'
            }
          }
        }
      }
    }

  };

        <apx-chart [series]="overallScore.series" [chart]="overallScore.chart" [plotOptions]="overallScore.plotOptions">