ChartJS (Radar) - Set base tick position for "0" value
Question
Using chart.js ( v3.7.0 )
Set up a Radar chart using multiple datasets that include 0 values (and needs to be kept as 0 for tooltip & data purposes).
Trying to find a way to set/include a drawn tick marker for 0 values on the chart that do not all collide at the center of the graph ( 0 is a viable data value itself for this project).
beginAtZero option has no effect whatsoever on the initial tick display position.
Is this what's supposed to happen with the beginAtZero option, and there's been some sort of regression? If not, is this even possible with chart.js?
Options:
options = {
scales: {
r: {
min: 0,
max: 99,
beginAtZero: true,
angleLines: {
display: false
},
ticks: {
display: false,
stepSize: 33.333
}
}
}
}
Sample Data:
data = {
labels: [ 'Field 1', 'Field 2', 'Field 3', 'Field 4', 'Field 5', 'Field 6' ],
datasets: [
{
label: 'Dataset 1',
data: [ 10, 99, 0, 76, 0, 0 ],
backgroundColor: 'rgba(255, 213, 117, 0.6)',
borderColor: 'rgb(255, 213, 117)',
fill: true
},
{
label: 'Dataset 2',
data: [ 99, 35, 0, 0, 54, 0 ],
backgroundColor: 'rgba(54, 162, 235, 0.6)',
borderColor: 'rgb(54, 162, 235)',
fill: true
}
],
}
Tried:
[Negative Min Values] - When attempting to use a negative value for min , it leaves some sort of masking on the pathing fills. Used in combination with some other visual property settings, but nothing seemed to resolve. (RESOLVED - See below)
Thanks in advance!
[PERSONAL SOLUTION]
In combination with @LeeLenalee 's answer , I was able to identify my own personal issue with the "masking" from the paths. Using negative min value does indeed properly offset the starting value of the paths. Furthermore, if a dataset has fill: true , it apparently also masks any pathing fills drawn outside the boundaries of the data (in this case, a negative min value). After removing this property from each dataset, the paths fill correctly.
data = {
labels: [ 'Field 1', 'Field 2', 'Field 3', 'Field 4', 'Field 5', 'Field 6' ],
datasets: [
{
label: 'Dataset 1',
data: [ 10, 99, 0, 76, 0, 0 ],
backgroundColor: 'rgba(255, 213, 117, 0.6)',
borderColor: 'rgb(255, 213, 117)',
// -- fill: true
}
],
}
1 answers
solution1
0 ACCPTED 2022-01-12 10:26:32
Easyest way to achieve this is by setting your min to the negative of your stepSize like so:
const options = { type: 'radar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: 'Dataset 1', data: [10, 99, 0, 76, 0, 0], borderColor: 'pink' }, { label: 'Dataset 2', data: [99, 35, 0, 0, 54, 0], borderColor: 'orange' } ], }, options: { scales: { r: { min: -33.333, max: 99, beginAtZero: true, angleLines: { display: false }, ticks: { display: false, stepSize: 33.333 } } } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);
<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script> </body>
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.