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

by

3👍

✅

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.

Leave a comment