Looking through the [advanced tooltips](http://www.chartjs.org/docs/#advanced-usage-external-tooltips) and [legend configuration](http://www.chartjs.org/docs/#chart-configuration-legend-configuration) for chart.js, I am not sure how to achieve the following label style for my charts.

[![enter image description here](https://i.stack.imgur.com/miO7L.png)](https://i.stack.imgur.com/miO7L.png)

How can I output my numbers for each section of this donut chart and connect those numbers to each segment of the chart?

If it's not possible with Chart.js, then can anyone point me to a chart library that will allow me to do this?

```js
new Chart(document.querySelector('#chart'), {
    type: 'doughnut',
    data: {
        labels: [
            'Red',
            'Blue',
            'Yellow'
        ],
        datasets: [{
            data: [300, 50, 100],
            backgroundColor: [
                '#FF6384',
                '#36A2EB',
                '#FFCE56'
            ],
            hoverBackgroundColor: [
                '#FF6384',
                '#36A2EB',
                '#FFCE56'
            ]
        }]
    },
    options: {
        legend: {
            display: false
        }
    }
});
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>

<canvas id="chart" width="400" height="400"/>
```