I'm trying to remove the stroke color from the legend generated by ChartJS, but I can't quite seem to understand what the documentation is telling me.
My current code looks like this:
legend: {
position: 'bottom',
labels: {
generateLabels: function() {
return {
strokeStyle: "black",
}
}
}
}
Though I have tried this:
generateLabels: {
strokeStyle: "black",
}
I'm setting the stroke style to "black" to see if I'm having any effect, but I'm not even sure if that's what I'm supposed to be doing. I would think I could set it to none.
Edit
Here is the code for my full object:
var ctx = $('#chart');
var data = {
labels: ["1","2","3","4","5","6","7"],
datasets: [{
data: [22,19,17,15,10,9,8],
backgroundColor: [
'#df4344',
'#fc9627',
'#fcd949',
'#d4d81e',
'#6dc7ba',
'#24a38e',
'#263a7e',
'#5050b2',
'#4f7ec1',
'#96afe2',
],
borderColor: ["black"],
borderWidth: 2
}]
};
var wheel = new Chart(ctx, {
type: "doughnut",
data: data,
options: {
maintainAspectRatio: false,
responsive: true,
tooltips: false,
cutoutPercentage: 60,
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="chart"></canvas>
But now that I run it here, it seems to be working. So I'm not sure what's wrong anymore.
To remove the stroke from legend, you need to set borderWidth
property to 0
for your dataset, like so ...
datasets: [{
borderWidth: 0,
...
}]
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var ctx = c.getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Statistics',
data: [3, 1, 2, 5, 4],
backgroundColor: 'rgba(0, 119, 204, 0.1)',
borderColor: 'rgba(0, 119, 204, 0.8)',
borderWidth: 0 //<-- set this
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="c"></canvas>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With