How To Remove Rectangle Box Next To The Legend Text In Chart.js

I am trying to remove the small rectangle box on the left of the 'legend' text 'Score List' in this case, of the chart. I can not find anything in the docs that shows how to do tha

Solution 1:

The easiest way to remove the legend colored boxes is to use the legend.labels.boxSize property and set it to 0 (this is documented in the chart.js API here). Here is a codepen example.

legend: {
 labels: {
   boxWidth: 0,
 }
}

Keep in mind that there are not very many options for configuring the embedded legend (since it is actually rendered directly in the canvas object). If you later decide you would like to change the legend look and feel in a more significant way then it is easiest to create your own legend using normal HTMl/CSS and style it accordingly. You can achieve this by using the .generateLegend() prototype method.

Here is an example of a chart that is using a custom external legend.