How I can draw below chart with any chart libarray

Question

I need to draw the above chart at react.js project I tried high chat, but, I cannot make green part different width.

Below is I tried result using high chat.

const hOptions = {
  chart: {
    type: 'pie',
    margin: 0,
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
  },
  colors: ['#48EFBC', '#6672FB'],
  title: {
    text: null
  },
  series: [{
    data: [80, 30],
    dataLabels: {
      formatter: function () {
        return this.y > 5 ? this.point.name : null;
      },
      color: '#ff0000',
      distance: -30
    },
    colors: ['blue', '#ffffff'],
    size: '50%'
  },
  {
    data: [80, 30],
    dataLabels: {
      formatter: function () {
        return this.y > 5 ? this.point.name : null;
      },
      color: '#ff0000',
      distance: -30
    },
    colors: ['#ffffff', 'red'],
    size: '40%'
  }],
  legend: {
    enabled: true
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: false
      },
      showInLegend: true,
      center: ['50%', '30%'],
      innerSize: '50%',
      states: {
        inactive: {
          enabled: false
        },
        // hover: {
        //   color: 'blue'
        // }
      }
    }
  },
}

Answer 1

const hOptions = {
  chart: {
    type: 'pie',
    margin: 0,
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    height: '250px'
  },
  title: { text: null },
  tooltip: {
    valueSuffix: '%'
  },
  series: [{

    name: 'Remain',
    data: [{ y: 30, name: 'Used1' }, { y: 70, name: 'Remain' }],
    dataLabels: {
      allowOverlap: true,
      formatter: function () {
        return this.y > 5 && this.point.name == 'Used1' ? 'Used' : null;
      },
      color: '#222222',
      distance: 15
    },
    colors: [colorRemain, colorTransparent],
    size: '50%',
    innerSize: '60%',
  },
  {
    data: [{ y: 30, name: 'Used', showInLegend: false, }, { y: 70, name: 'Remain1' }],
    name: 'Used',
    dataLabels: {
      allowOverlap: true,
      formatter: function () {
        return this.y > 5 && this.point.name == 'Remain1' ? 'Remain' : null;
      },
      color: '#222222',
      distance: 8
    },
    colors: [colorTransparent, colorUsed],
    size: '45%',
    innerSize: '80%',
  }],
  credits: {
    enabled: false
  },

  legend: {
    enabled: true,
    align: 'center',
    // itemWidth: '200px',
    itemHeight: '100px',
    borderWidth: '3px',
    borderColor: 'red',
    backgroundColor: 'green',
    x: '100px',
    verticalAlign: 'bottom',
    // layout: 'horizontal'
    labelFormatter: function () {
      console.log(this)
      if (this.name == 'Used1') return 'Used'
      if (this.name == 'Remain1') return 'Remain'

      // if (this.name == 'Used') return 'Used'
      // if (this.name == 'Remain') return 'Remain'
      // return this.name
    }

  },
  plotOptions: {
    pie: {
      borderWidth: 0,
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true
      },
      showInLegend: true,
      center: ['50%', '30%'],
      innerSize: '50%',
      states: {
        inactive: {
          enabled: false
        },
      }
    }
  },
}