2👍
The answer by Saurabh and also given here won’t work because filling the entire background will cover up the labels and give different areas for each sector.
So instead (in my case using angular-chart) I prepend my dataset with data to match each sector, and passing a colour object I’m able to get it looking right as well.
So building the data in angular like this:
<canvas id="spider_chart" class="chart chart-base" chart-type="'Radar'"
chart-data="angular_spider_chart.data"
chart-options="angular_spider_chart.options"
chart-labels="angular_spider_chart.labels"
chart-series="angular_spider_chart.series"
chart-colours="angular_spider_chart.colors">
</canvas>
<script>
function makeList(n, v){
// Make a list of data with n points all having v as value
var x = [];
for (; n>0; x[--n] = v);
return x;
}
function getColour (colour) {
// return colour object to override angular-chart getColour function
return {
fillColor: colour,
strokeColor: colour,
pointColor: colour,
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: colour
};
}
// build spider chart
function initialize_spider_chart (chart_data, label){
// the color you want to use in your dataset
var colors = ["#000"];
var labels = [];
var data = [];
var series = []
// turn of animation otherwise "belts" animate
var options = {title: {display: true, text:label},
scaleLineWidth :1,
scaleShowLabels : false,
pointDot : false,
angleLineColor: "#e6e6e6",
borderColor: "#737373",
backgroundColor: '#cccccc',
animation: false,
showTooltips: false
};
// the sector values and colors of your backgrounds
var belts = [[4, '#ef5350'], [3, '#ffaa00'], [2, '#00b19d'], [1, '#228bdf']];
for (var idx in belts){
var cp = belts[idx];
data.push(makeList(chart_data.length, cp[0]));
series.push("")
colors.unshift(getColour(cp[1]))
}
var actual_data = [];
for (var c in chart_data){
labels.push(chart_data[c].name);
actual_data.push(chart_data[c].value);
}
series.push('Banded Radar Chart');
data.push(actual_data);
return {'data': data,
'labels': labels,
'options': options,
'colors': colors,
'series': series
};
};
</script>
Gives me this:
1👍
You can trick it by varying size of scaleline.
Try to set scaleLineWidth according to your requirement like this,
var radarOptions = {
scaleLineWidth :16 ,
}
Increase the scaleLineWidth till you fill the gap between 2 lines.
there you can set the scaleLineColor also, so that it will feel like a background,
var radarOptions = {
scaleLineWidth :16 ,
scaleLineColor : "#EEEEEE"
}
0👍
You may implement any radar diagram with any sectors you like using Chart.JS and its datasets property.
"datasets": [
{
"backgroundColor": "rgba(94, 221, 46, 0)",
"borderColor": "rgb(126, 255, 16)",
"pointBackgroundColor": "#7eff10",
"borderWidth": 2,
"pointRadius": 4,
"data": [
30,
62,
80,
30
]
},
{
"backgroundColor": "rgb(255, 255, 255)",
"pointRadius": 0,
"borderWidth": 0,
"data": [
9,
9,
9,
9
]
},
{
"backgroundColor": "rgb(217, 217, 214)",
"pointRadius": 0,
"borderWidth": 0,
"data": [
25,
25,
25,
25
]
},
{
"backgroundColor": "rgb(113, 178, 201)",
"pointRadius": 0,
"borderWidth": 0,
"data": [
50,
50,
50,
50
]
},
{
"backgroundColor": "rgb(0, 119, 139)",
"pointRadius": 0,
"borderWidth": 0,
"data": [
75,
75,
75,
75
]
},
{
"backgroundColor": "rgb(0, 42, 58)",
"pointRadius": 0,
"borderWidth": 0,
"data": [
100,
100,
100,
100
]
},
{
"backgroundColor": "rgb(85, 89, 91)",
"pointRadius": 0,
"borderWidth": 2,
"data": [
100,
0,
0,
0
]
},
{
"backgroundColor": "rgb(85, 89, 91)",
"pointRadius": 0,
"borderWidth": 2,
"data": [
0,
100,
0,
0
]
},
{
"backgroundColor": "rgb(85, 89, 91)",
"pointRadius": 0,
"borderWidth": 2,
"data": [
0,
0,
100,
0
]
},
{
"backgroundColor": "rgb(85, 89, 91)",
"pointRadius": 0,
"borderWidth": 2,
"data": [
0,
0,
0,
100
]
}
]
Checkout full version and how the chart looks like at my fiddle: https://jsfiddle.net/rb38n490/5/