Niel Niel - 4 months ago 72
CSS Question

Is it possible to set the background color of a sector in a radar chart in Chart.js?

I want to set the color of the sectors in my radar chart to look like this:

Example

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.

Answer

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:

Chart