Partitioning radar graph in chart.js by sector

by

0👍

✅

You can have a separate series for each sector

Preview

enter image description here

Script

var data = {
    labels: ["", "", "", "", "", "", ""],
    datasets: [
        {
            fillColor: "rgba(187,151,205,0.2)",
            strokeColor: "rgba(187,151,205,1)",
            pointColor: "rgba(187,151,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(187,151,205,1)",
            data: [65, 65, 0, 0, 0]
        },
        {
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [0, 48, 48, 0, 0]
        },
        {
            fillColor: "rgba(151,0,87,0.2)",
            strokeColor: "rgba(151,0,87,1)",
            pointColor: "rgba(151,0,87,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [0, 0, 58, 58, 0]
        },
        {
            fillColor: "rgba(0,205,187,0.2)",
            strokeColor: "rgba(0,205,187,1)",
            pointColor: "rgba(0,205,187,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(0,187,205,1)",
            data: [0, 0, 0, 38, 38]
        },
        {
            fillColor: "rgba(151,205,187,0.2)",
            strokeColor: "rgba(151,205,187,1)",
            pointColor: "rgba(151,205,187,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 0, 0, 0, 28]
        }
    ]
};

Fiddle – http://jsfiddle.net/kqujgtgv/

By the way, Chart.js does support drawing on the canvas manually using ctx. You just need to extend the chart – see https://stackoverflow.com/a/30323431/360067 for a sample where a line is drawn and a label is added.

For radar charts you might want to take a look at https://stackoverflow.com/a/31404882/360067 where circles are drawn at the regular label position.

If you need to draw something between the labels just change the line that calculates the point position to (notice the + 0.5)

var pointLabelPosition = this.scale.getPointPosition(i + 0.5,
         this.scale.calculateCenterOffset(this.scale.max) + 5);

Leave a comment