I want to set the color of the sectors in my radar chart to look like this:
Is this possible in Chart.js? Is there another chart package that can do it?
If it can work well with AngularJS that would be even better.
Asked
Active
Viewed 3,654 times
3 Answers
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"
}
Saurabh Sonawane
- 941
- 7
- 9
-
Thanks, that's definitely on the right track. But then how would I make the different "scaleLines" different colors? In your second fiddle they are all the same color. – Niel Jun 29 '16 at 21:03
-
@Niel I haven't tried it in while, but for that purpose you have to go through a function where it is drawing a radar lines, i.e. scale lines and through each iteration, you have to set scaleLineColor. Meanwhile I will check for the better solution. – Saurabh Sonawane Jun 30 '16 at 05:44
-
I'm not sure what exactly you meant, but I found a pretty neat solution. Would it be possible to draw 3 lines in the graph, each with the color you want the sector to be. Set the data values so they line each sector, and then set the line width to the sector width. Does that make sense, would it work? – Niel Jul 06 '16 at 04:29
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/
nostop
- 743
- 5
- 9