Кольцевая диаграмма с текстом внутри круговой диаграммы и вниз

я хочу создать такую ​​диаграмму

я создал это так

добавленный здесь текст является явным с фиксированными верхним и левым краями. Я хочу, чтобы он был отзывчивым. т.е. двигаться при изменении размера экрана. Есть ли способ для этого? в документации highchart есть только свойство name без указания свойства title. мой код указан здесь jsfiddle

 $(function() {
    $('#percentile ').highcharts({
        title: {
            text: 'Section Scores'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
        },
        labels: {
            items: [{
                html: 'Total fruit consumption',
                style: {
                    left: '50px',
                    top: '12px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        },
        series: [{
            type: 'pie',
            name: 'Total ',
            data: [{
                name: 'Jane',
                y: 13,
                color: Highcharts.getOptions().colors[0] // Jane's color
            }, {
                name: 'John',
                y: 23,
                color: Highcharts.getOptions().colors[1] // John's color
            }],
            center: [100, 80],
            size: 150,
            innerSize: '70%',
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }, {
            type: 'pie',
            name: ' consumption',
            data: [{
                name: 'Jane',
                y: 13,
                color: Highcharts.getOptions().colors[0] // Jane's color
            }, {
                name: 'John',
                y: 23,
                color: Highcharts.getOptions().colors[1] // John's color
            }],
            center: [400, 80],
            size: 150,
            innerSize: '70%',
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }]
    });
});