score:38

Accepted answer

no need to use legendcallback function. you can set usepointstyle = true to turn that rectangle into a circle.

chart.defaults.global.legend.labels.usepointstyle = true;

var ctx = document.getelementbyid("mychart").getcontext("2d");
var mychart = new chart(ctx, {
    type: 'line',
    data: {
        labels: ["red", "blue", "yellow", "green", "purple", "orange"],
        datasets: [{
            label: 'link one',
            data: [1, 2, 3, 2, 1, 1.5, 1],
            backgroundcolor: [
                '#d3e4f3'
            ],
            bordercolor: [
                '#d3e4f3',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderwidth: 1
        }]
    },
    options: {
        legend: {
            display: true,
            position: 'bottom',
            labels: {
                fontcolor: '#333'
            }
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.5.0/chart.min.js"></script>
<div class="container">
  <canvas id="mychart"></canvas>
</div>

score:1

add this in your options

 legend: {
display: true,
          position: 'bottom',
          labels: {
boxwidth: 9, 
            fontcolor: '#474747',
            fontfamily: '6px montserrat',
          },
        },

for example :

 this.testchart = new chart('testpie', {
      type: 'doughnut',
      data: {
        labels: [ 'success','failure','aborted'],
        datasets: [
          {
            data: [],
            backgroundcolor: [ '#45d78f', '#f58220','#ffd403'],
          },
        ],
      },
      options: {
        maintainaspectratio: false,
        cutoutpercentage: 50,    // for thikness of doughnut
        title: {
          display: false,
          text: 'runs',
          fontsize: 14,
          fontfamily: 'roboto',
          fontcolor: '#474747',
        },
        legend: {
          display: true,
          position: 'bottom',
          labels: {
            boxwidth: 9,
            fontcolor: '#474747',
            fontfamily: '6px montserrat',
          },
        },
      },
    });

score:3

additional information on @grunt 's answer i assign usepointstyle inside legend.labels not what @grunt did chart.defaults.global.legend.labels.usepointstyle = true;

this is useful when you are using react

legend: {
    labels: {
      usepointstyle: true,
    },
  }

more info here display point style on legend in chart.js

score:6

use usepointstyle:true

var ctx = document.getelementbyid("mychart");
var mychart = new chart(ctx, {
type: 'line',
data: {
    labels: ["red", "blue", "yellow", "green", "purple", "orange"],
    datasets: [{
        label: 'link one',
        data: [1, 2, 3, 2, 1, 1.5, 1],
        backgroundcolor: [
            '#d3e4f3'
        ],
        bordercolor: [
            '#d3e4f3',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderwidth: 1
    }]
},
options: {
    legend: {
        display: true,
      position: 'bottom',
        labels: {
            fontcolor: '#333',
            usepointstyle:true
        }
    }
}

});

score:11

step 1:
change options to this: 

options: {
    legend: {
        display: false,
    }
}

step 2:
append to your canvas this code (just after canvas): 

<div id='chartjslegend' class='chartjslegend'></div> //or prepend to show the legend at top, if you append then it will show to bottom.

step 3:
generate this legend instead of default with this (just after mychart): 

document.getelementbyid('chartjslegend').innerhtml = mychart.generatelegend();

step 4:
make css so it generates as circle: 

.chartjslegend li span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius: 25px;
}

step 5:
change css with what ever you feel like should be better.
time for some chimichangas now.

score:20

for angular4-chart.js you could use the options attribute like so:

options = {
      legend:{
        display: true,
        labels: {
          usepointstyle: true,
        }
      }
}

Related Query

More Query from same tag