score:12
Edit [2021-10-27]: Chart.js v3 has removed scale
option in favor of options.scales.r
. Here's an updated way of making the radar grid circular.
const red = "rgb(255, 99, 132)";
const color = Chart.helpers.color;
const config = {
type: 'radar',
data: {
labels: [['Eating', 'Dinner'], ['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'],
datasets: [{
label: 'My dataset',
backgroundColor: color(red).alpha(0.2).rgbString(),
borderColor: red,
pointBackgroundColor: red,
data: [
80,
90,
60,
65,
78,
97,
55
]
}]
},
options: {
scales: { // <-- Note change in options from scale to scales
r: {
grid: {
circular: true
},
beginAtZero: true
}
}
}
};
window.onload = function () {
window.myRadar = new Chart(document.getElementById('chart'), config);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script>
<canvas id="chart"></canvas>
Edit: Kudos to @timclutton for pointing to the axes styling section of the docs, which lists the circular
property for the radar chart.
Original answer: After some digging it turned out that it is in fact possible. The trick is to add scale: { gridLines: { circular: true } }
to options
of the chart. Please see the snippet below. Note. As of 19 Jul 2019 I couldn't find this information in the official docs. So, it's either not documented yet or this feature might be changed / removed in future.
const red = "rgb(255, 99, 132)";
const color = Chart.helpers.color;
const config = {
type: 'radar',
data: {
labels: [['Eating', 'Dinner'], ['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'],
datasets: [{
label: 'My dataset',
backgroundColor: color(red).alpha(0.2).rgbString(),
borderColor: red,
pointBackgroundColor: red,
data: [
80,
90,
60,
65,
78,
97,
55
]
}]
},
options: {
scale: {
gridLines: {
circular: true
},
ticks: {
beginAtZero: true
},
}
}
};
window.onload = function () {
window.myRadar = new Chart(document.getElementById('chart'), config);
};
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<canvas id="chart"></canvas>
score:1
Perhaps not exactly what you are looking for; Chart.js documents a Polar area chart on it's samples page:
A quick example:
new Chart(document.getElementById("chart"), {
type: "polarArea",
data: {
labels: ["a", "b", "c"],
datasets: [{
data: [10, 20, 30]
}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="chart"></canvas>
score:3
You have to change line tension:
data:{
labels: ['visionary', 'determination', 'extraversion', 'agreeableness', 'emotionality'],
datasets: [{
data: [
34, 45, 67, 89, 22
],
label: 'me',
lineTension: 0.5,
borderColor: '#00ffff',
backgroundColor: '#00ffff',
}
Then your radar charts will be rounded just as you showed in the desired fashion
score:5
Since Version 3, the scale option has been deprecated. So to make the radar chart with circle gridlines, you have to pass the following option:
scales: {
r: {
grid: {
circular: true,
},
},
},
const ctx = document.getElementById('radar-chart');
const data = {
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running'
],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 90, 81, 56, 55, 40],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}, {
label: 'My Second Dataset',
data: [28, 48, 40, 19, 96, 27, 100],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)'
}]
};
const config = {
type: 'radar',
data: data,
options: {
scales: {
r: {
grid: {
circular: true,
},
},
},
elements: {
line: {
borderWidth: 3
}
}
},
};
const radarChart = new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<canvas id="radar-chart"></canvas>
Source: stackoverflow.com
Related Query
- Is it possible to produce circular (round) shaped radar chart in Chart.js?
- Is it possible to set the background color of a sector in a radar chart in Chart.js?
- Is it possible to add a custom font to chart js?
- ChartJS Radar Chart radar lines color?
- Is it possible to print a chart with vue-chartjs?
- Is it possible to revert x-axe values in line chart with chart.js
- In chart.js, Is it possible to hide x-axis label/text of bar chart if accessing from mobile?
- Change labels colors for radar chart js
- Chart.js Radar Chart How to Remove Outer Labels
- impossible to remove scale from radar chart (chart.js)
- Chart.js Radar chart legend label font size doesn't work
- Remove radar chart labels in chart.js
- ChartJS V3 Radar chart Label Font Size
- Chart.js different scaleLine color of radar chart (angular)
- Possible to merge 2 bars in bar chart (chart.js)
- Show point values in Radar Chart using chart.js
- Chartjs 3.5.0 - Radar Chart - Converting the labels to images
- Chart.js - How to place text outside of radar chart
- Is it possible to change pointStyle for elements of a ChartJS bubble chart per dataset?
- ChartJS - radar chart options not working
- Is it possible to make points in a line chart of Chart JS 3.7.0 look like a donut?
- Configuring a Radar Chart w/Chart.js
- How to disable Chart.js Radar Chart point labels
- Is it possible to use mouseenter and mouseleave event in chart js?
- Chartjs - Add backgroundColor for labels radar chart
- Chart.js Radar chart multiple datasets
- ChartJS and Radar Chart animation
- Chart.js in Angular Radar Chart
- ChartJs - Round borders on a doughnut chart with multiple datasets
- how to label axis within radar chart with chart.js
More Query from same tag
- Updating chart.js with JSON from Razor page
- Highlight Line Series on legend hover
- ChartJS + twig symfony
- How can I datalabels and Sum display in the same time on a stacked bar
- How do I change the label and value like 500,000 to 500k in Chart.js?
- Canvas not working in jQuery Mobile
- ChartJS set default options only to specific Canvas, not globally
- Adding label inside multiseries doughnut chart through chart.js
- How to remove background color and color example from tooltip in Chart.js?
- addData() dropped from latest chart.js 2.1.3 - whats up?
- Can't pass array to chart.js which got its data from @Input
- How to display timestamped data with PrimeFaces and ChartJs?
- django chart.js - Query to get count of all distinct values for particular column
- Chart.js not showing data until I click on the label 3 times
- Chart.js Line chart fixed tooltip
- How can I get chart.js to automatically add colours for dynamic labels?
- Chart.js changes selected legend filters when using update function
- How to push an array into an Object which is inside of another array?
- Is it possible to print to pdf a Canvas with other div elements?
- Add a second Y-axis for Linechart in Chart.js?
- Cannot read properties of undefined with react-chartjs-2 and chart js problem
- Create a prop for a chart.js pie chart
- change legend in chart in report builder
- Remove Decimal like " [Decimal('1220'), Decimal('160')] "from Django Queryset results
- Change Chartjs label color on click without losing hover
- How to give link for lable/Legend in chart.js? and if the value is 0 how to remove the legend?
- How to show the chartjs bar chart data values labels as text?
- How to use same backgroundcolors out of an array to unknown data in chartjs?
- Data Labels are getting cut off on the top
- Can Chart.js Horizontal bar work with time series data?