Question

68

Chart.js Legend Customization

rated 0 times [ 72] [ 4] / answers: 1 / hits: 16067 / 7 Years ago, sat, september 23, 2017, 12:00:00

I was having some problem with self-customized chart legend for chart.js. This is how my doughtnut chart looks like:

As you can see, the legend at the side is not showing the colored-square icon. By right, it should look like this:

My HTML for the chart:

<canvas id=merchantChart height=660 width=330></canvas>

<div id=merchantLegend class=chart-legend></div>

This is the part where I set the color for each slice and override the default chart legend provided by chart.js:

var opt = {

      type: doughnut,

      data: { 

        labels: labelData, 

        datasets: [{ 

        data: priceData, 

        backgroundColor:  rgba(220,220,220,0),

        borderColor: colorArr,

        borderWidth: 1.5,

        hoverBackgroundColor: colorArr

        }] 

      }, 

      options: options

    };



    if (merchantChart) merchantChart.destroy();

    merchantChart = new Chart(ctx, opt);



    merchantChart.update(); 

    merchantLegend.innerHTML = merchantChart.generateLegend();

As you can see, because I am setting the backgroundColor for each slice to be transparent, is there any way to generateLegend() based on the borderColor of each slice?

Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alli

Add To Favorites

Follow

Total Points: 409

Total Questions: 101

Total Answers: 105

Location: The Bahamas

Member since Tue, Apr 27, 2021

3 Years ago

alli questions

1 How do I add types to a Vite library build?

Sat, Apr 23, 22, 00:00, 2 Years ago

1 Discord.js Bot giveaway command : embedSent.reactions.get is not a function

Fri, May 29, 20, 00:00, 4 Years ago

1 Applying multiple filters to a table reactjs

Mon, May 18, 20, 00:00, 4 Years ago

1 Framer-motion, delay rotateY while animating x

Tue, Mar 24, 20, 00:00, 4 Years ago

1 Questions about useCallback hook and anonymous function

Fri, Jan 24, 20, 00:00, 4 Years ago

View All

answered 7 Years ago kentrelle · Accepted Answer

legendCallback method can be used to manipulate how legend's labels are generated. so, using this you can customize legend's box-color as well (such as, using datasets border-color instead of background-color), like so :

legendCallback: function(chart) {

   var ul = document.createElement('ul');

   var borderColor = chart.data.datasets[0].borderColor;

   chart.data.labels.forEach(function(label, index) {

      ul.innerHTML += `

        <li>

            <span style=background-color: ${borderColor[index]}></span>

            ${label}

         </li>

      `; // ^ ES6 Template String

   });

   return ul.outerHTML;

}

ᴅᴇᴍᴏ ⧩

var chart = new Chart(ctx, {

   type: 'doughnut',

   data: {

      labels: ['Jan', 'Feb', 'Mar'],

      datasets: [{

         data: [1, 1, 1],

         backgroundColor: 'rgba(0, 0, 0, 0)',

         borderColor: ['#ff9800', '#e91e63', '#2196f3']

      }]

   },

   options: {

      responsive: false,

      legend: false,

      legendCallback: function(chart) {

         var ul = document.createElement('ul');

         var borderColor = chart.data.datasets[0].borderColor;

         chart.data.labels.forEach(function(label, index) {

            ul.innerHTML += `

            	<li>

               	<span style=background-color: ${borderColor[index]}></span>

                  ${label}

               </li>

            `; // ^ ES6 Template String

         });

         return ul.outerHTML;

      }

   }

});



legend.innerHTML = chart.generateLegend();

.chart-container {

   display: flex;

}



#legend ul {

   list-style: none;

   font: 12px Verdana;

   white-space: nowrap;

}



#legend li span {

   width: 36px;

   height: 12px;

   display: inline-block;

   margin: 0 5px 8px 0;

   vertical-align: -9.4px;

}

<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js></script>

<div class=chart-container>

   <canvas id=ctx></canvas>

   <div id=legend></div>

</div>