ChartJS - Size of the point doesn't change
Question
I created this chart, and set usePointStyle: true to use circles instead rectangles for the labels of legend . But I can't seem to change the size (or radius ) of these circles.
In the documents it says ,
Label style will match corresponding point style (size is based on the mimimum value between boxWidth and fontSize).
So in my example, the size of point style must be min(5, 12) = 5 , thus increasing boxWidth must increase its size (until boxWidth is greater than fontSize ). But that's not the case; changing boxWidth doesn't have any affect.
How can I fix this? Also, is it possible to fill these circles with their color?
let chLine = document.getElementById("chLine"); let chartData = { labels: ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'], datasets: [{ label: 'c1', data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6], backgroundColor: 'transparent', borderColor: '#e6194b', borderWidth: 1, pointBackgroundColor: '#e6194b' }, { label: 'c2', data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45], backgroundColor: 'transparent', borderColor: '#3cb44b', borderWidth: 1, pointBackgroundColor: '#3cb44b' } ] } if (chLine) { new Chart(chLine, { type: 'line', data: chartData, options: { scales: { yAxes: [{ ticks: { beginAtZero: false } }] }, legend: { position: 'top', labels: { fontSize: 12, boxWidth: 5, usePointStyle: true } }, events: ['click', 'mousemove'], onClick: clicked } }); } function clicked(c, i) { console.log(c, i) }
<:DOCTYPE html> <html> <head> <title>test</title> <meta charset="UTF-8"> </head> <body> <div class="container"> <div class="row my-3"> <div class="col"> <h4>Chart</h4> </div> </div> <div class="row my-2"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <canvas id="chLine" height="100"></canvas> </div> </div> </div> </div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script> <script src="test.js"></script> </body> </html>
1 answers
solution1
1 ACCPTED 2019-10-05 19:15:08
To increase the size of the point, you will have to increase the legend's fontSize value. When you increase the font-size both the label and the point's size will increase.
When you increase the boxWidth the overall width that the legend icon takes will increase. In the case of the 'box' legend icon, the rectangle's width will increase. But in case of point, all it will do is provide some extra space between the legend icon and its text.
To make the legend point circle fill with their color, you will have to set the backgroundColor property to that color and fill to false.
datasets: [{
label: 'c1',
data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
backgroundColor: '#e6194b',
borderColor: '#e6194b',
borderWidth: 1,
fill: false,
pointBackgroundColor: '#e6194b'
},
{
label: 'c2',
data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
backgroundColor: '#3cb44b',
borderColor: '#3cb44b',
borderWidth: 1,
fill: false,
pointBackgroundColor: '#3cb44b'
}
]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.