Chart.js How can I embed additional values to each data point in radar chart

Question

With the line chart, I am able to embed additional data and have it show up in the tooltip. However, if I try to do the same with the radar chart no values are shown. How do I add essential information to each data-point on the radar chart and have it show up in the tooltip?

Below I have a working line chart with additional values for each data-point, displayed with the tooltip. Additionally I have the same chart duplicated with type: 'radar'

var data = [{
        //x: 'Item 1',
        y: 2,
        id: 'test-10'
    },
    {
        //x: 'Item 2',
        y: 4,
        id: 'test-20'
    },
    {
        //x: 'Item 3',
        y: 5,
        id: 'test-30'
    },
    {
        //x: 'Item 4',
        y: 6,
        id: 'test-40'
    },
    {
        //x: 'Item 5',
        y: 8,
        id: 'test-50'
    },
    {
        //x: 'Item 6',
        y: 12,
        id: 'test-60'
    }];
    var ctx = document.getElementById('lineChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
            datasets: [{
                label: 'Dataset 1',
                data: data,
                borderColor: "#3e95cd",
                fill: false
            }]
        },
        options: {
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function (tooltipItems, data) {
                        var multistringText = ['Value: ' + tooltipItems.yLabel];
                        multistringText.push('ID: ' + data['datasets'][tooltipItems.datasetIndex]['data'][tooltipItems.index].id);
                        return multistringText;
                    }
                }
            },
        }
    });
    var ctx = document.getElementById('radarChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'radar',
        data: {
            labels: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
            datasets: [{
                label: 'Dataset 1',
                data: data,
                borderColor: "#3e95cd",
                fill: false
            }]
        },
        options: {
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function (tooltipItems, data) {
                        var multistringText = ['Value: ' + tooltipItems.yLabel];
                        multistringText.push('ID: ' + data['datasets'][tooltipItems.datasetIndex]['data'][tooltipItems.index].id);
                        return multistringText;
                    }
                }
            },
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
<div style="width: 400px; display: inline-block">
  <canvas id="lineChart" width="100" height="70"></canvas>
</div>
<div style="width: 300px; display: inline-block">
  <canvas id="radarChart" width="50" height="50"></canvas>
</div>

Answer 1

Try like this:

var data = [{
        //x: 'Item 1',
        y: 2,
        id: 'test-10'
    },
    {
        //x: 'Item 2',
        y: 4,
        id: 'test-20'
    },
    {
        //x: 'Item 3',
        y: 5,
        id: 'test-30'
    },
    {
        //x: 'Item 4',
        y: 6,
        id: 'test-40'
    },
    {
        //x: 'Item 5',
        y: 8,
        id: 'test-50'
    },
    {
        //x: 'Item 6',
        y: 12,
        id: 'test-60'
    }];
    var ctx = document.getElementById('lineChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
            datasets: [{
                label: 'Dataset 1',
                data: data,
                borderColor: "#3e95cd",
                fill: false
            }]
        },
        options: {
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function (tooltipItems, data) {
                        var multistringText = ['Value: ' + tooltipItems.yLabel];
                        multistringText.push('ID: ' + data['datasets'][tooltipItems.datasetIndex]['data'][tooltipItems.index].id);
                        return multistringText;
                    }
                }
            },
        }
    });
    var ctx = document.getElementById('radarChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'radar',
        data: {
            labels: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
            datasets: [{
                label: 'Dataset 1',
                data: data.map(item => item.y),
                borderColor: "#3e95cd",
                fill: false
            }]
        },
        options: {
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function (tooltipItems) {
                        return 'Value: ' + data[tooltipItems.index].y + ', ID: ' + data[tooltipItems.index].id;
                    }
                }
            },
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
<div style="width: 400px; display: inline-block">
  <canvas id="lineChart" width="100" height="70"></canvas>
</div>
<div style="width: 300px; display: inline-block">
  <canvas id="radarChart" width="50" height="50"></canvas>
</div>

I think the key point is to be aware of how each chart type wants the data to be structured. In the above, a map() function is used to present the y values as an array for the radar chart. Then, to get the correct tooltip information, the tooltip index is used to retreive that element's values from the full data array. The label callback seems to return a string rather than an array.