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
- Chart.js v2 charts do not display inside angular 2 (but Chart.js v1 works perfectly)
- Animated Word Web in Javascript
- ChartJS: Remove padding on first and last bars on Barchart
- Chart JS Error: Chart is not defined Firefox
- How do I get tool tips to work on 2 data set half doughnut chart?
- Chart.js date formatting use for
- Changing the Y axis unit in Chartjs
- Chart.js cartesian axes - Modifying tool-tip based on which y-axis the data corresponds to
- My chart.js canvas disappears after hide() function
- All the bar in bar chart stays at left with very little width
- Chartjs graphs are not respecting height of container
- Chart options in angularJs (NodeRed Charts)
- How to draw a chart with Chart.JS?
- Can I plot random points on a chart.js or Google Charts chart?
- Chart.js 2.x: labels displaying over eachother
- ChartJs Angular directive - chart[chartType] is not a function
- Cannot read property 'map' of undefined when looking at an array with no index
- How to add unused data background to bar in chart js
- How to add space between two scales in chart-js?
- How to make bar chart cover multiple labels?
- generate basic pie chart using chartjs
- Chart.js is always increasing height on chart.resize()
- How to make the x-axis start from zero in chartjs-plugin-streaming?
- Add buffer to Y axis with chart js
- How to use Selenium with "chart.js"
- Changing the label of chart
- Chart.js not working - Uncaught RefernceError:
- Can't parse data from json
- Gantt Chart Timeline Chart js 3
- Add information on y Chart Js