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 that. Yes, I found how to remove the "legend" entirely, but that would causes the graphs of the bars to go too high in my chart design. Here is a sample code I have:
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - BarGraph</title>
<style type="text/css">
#chart-container {
width: 300px;
height: 150px;
}
</style>
<!-- javascript -->
<script type="text/javascript" src="jquery-1.11.min.js"></script>
<script type="text/javascript" src="Chart.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
//url: "test.html",
//method: "GET",
success: function(data) {
// test data
var data = [
{
"Serverid":"1",
"score":"37"
},
{
"Serverid":"2",
"score":"60"
},
{
"Serverid":"3",
"score":"35"
},
{
"Serverid":"4",
"score":"41"
},
{
"Serverid":"5",
"score":"50"
},
{
"Serverid":"6",
"score":"70"
},
{
"Serverid":"7",
"score":"70"
},
{
"Serverid":"8",
"score":"70"
},
// ... it can be more than that
];
var Server = [];
var score = [];
for(var i in data) {
Server.push("Server " + data[i].Serverid);
score.push(data[i].score);
}
var chartdata = {
labels: Server,
datasets : [
{
label: 'Score List',
backgroundColor: [
// even color
'rgba(255, 99, 132, 0.2)',
// odd color
'rgba(75, 192, 192, 0.2)'
],
borderColor: [
// even color
'rgba(255,99,132,1)',
// odd color
'rgba(153, 102, 255, 1)'
],
borderWidth: 1,
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: score
}
]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var ttip_value = data.datasets[0].data[tooltipItem.index];
if(ttip_value == 31) {
return "DOWN";
}else {
return "UP";
}
}
}
}
}
});
}, // end success
error: function(data) {
console.log(data);
alert(data);
}
}); // end ajax
});
</script>
</head>
<body>
<br> Bar Chart <br>
<div id="chart-container">
<canvas id="mycanvas" width="200" height="100"></canvas>
</div>
</body>
</html>
Thank you!
The easiest way to remove the legend colored boxes is to use the legend.labels.boxSize property of the options and set it to 0 (this is documented in the chart.js API here). Here is a codepen example.
options: {
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.