Search code examples
javascriptchart.jsradar-chart

Partitioning radar graph in chart.js by sector

I have a radar pentagon in that Chart.js that I'm using to provide users a score in five different categories after they take a quiz. If they do well in category A, I want that category to have a green fill, whereas if they do poorly in category C, I want it to have a red fill.

Is there any way that Chart.js allows you to partition a radar into n different sectors which can then have their own color fill? I read the chart.js docs, and it doesn't seem like they support drawing lines manually using ctx. Any ideas?

Solution

  • 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);