Chart.js - Styling Legend

Question

I'm making a chart with chart.js and I'm trying to figure out how I can change the label/legend styling. I want to remove the rectangle part and instead use a circle. I've read that you can make your custom legend (using legendCallback), but for the life of me I cannot figure out how to do it. This is how my chart looks now - image.

This is my HTML:

<div class="container"> <canvas id="myChart"></canvas> </div> 

And this is my JS:

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',             }         } } }); 

I'm new to JS in general, so please be as specific as possible with your answers. Thank you so much!

Answer 1

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>