I need the value of chart show after name of data for example ([colour of data] Car 50, [colour of data] Motorcycle 200). I’ve tried change the value of legend title but it doesn’t work at all
Here is it my code:
var ctx = document.getElementById('top-five').getContext('2d'); var myChartpie = new Chart(ctx, { type: 'pie', data: { labels: {!! $top->pluck('name') !!}, datasets: [{ label: 'Statistics', data: {!! $top->pluck('m_count') !!}, backgroundColor: {!! $top->pluck('colour') !!}, borderColor: {!! $top->pluck('colour') !!}, }] }, options: { plugins: { legend: { display: true, title: { text: function(context) {//I've tried to override this but doesn't work var value = context.dataset.data[context.dataIndex]; var label = context.label[context.dataIndex]; return label + ' ' + value; }, } }, }, responsive: true, } });
Advertisement
Answer
You can use a custom generateLabels
function for this:
var options = { type: 'doughnut', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], }] }, options: { plugins: { legend: { labels: { generateLabels: (chart) => { const datasets = chart.data.datasets; return datasets[0].data.map((data, i) => ({ text: `${chart.data.labels[i]} ${data}`, fillStyle: datasets[0].backgroundColor[i], index: i })) } } } } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);
<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> </body>