Ant Design - Sunburst Plot Legend Position

Question

Does anyone know whether it is possible to re-position the legend within a sunburst plot? Mine is currently at the bottom of the plot and I would like to move it to the top right, with stacked fields. My current plots looks like:

The code I have tried:

const config3 = {
data: infographics.randomData,
innerRadius: 0.2,
width: 800,
height: 800,
tooltip: {
  customContent: (title, data) => {
    const data1 = data[0]?.name
    const data2 = data[0]?.data.data.value
    const data3 = data[0]?.data.data.another_value
    return `<div>Element: ${data1}</div> \n <div>Heat Loss (kWh/a): ${data2}</div> \n <div>Area (m²) / Length (m): ${data3}</div>`
  },
},
interactions: [
  {
    type: 'element-active',
  },
],
label: {
  content: ({ name, depth, payload }) => {
    if (depth === 1) {
      // Display labels only for inner segments (depth 1)
      return name
    }
    return null // Disable labels for other segments
  },
  style: {
    fill: 'black',
    opacity: 0.6,
    fontSize: 17,
  },
  autoHide: true,
  labelEmit: true,
  rotate: false,
  avoidLabelOverlap: true,
  offset: -50,
},
legend: {
  position: 'top-right', // Position the legend at the top right
  isStack: true, // Stack the legend items
},

}

I want the legend to look similar to this at the top right of my plot:

Thanks for the help!