Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ChartJS Radar Chart radar lines color?

So i have been researching a lot about this and haven't found a solution, i want to change the colors of the radar lines as seen below:

enter image description here

Is there a way to do that?

Here is my current code:

new Chart(document.getElementById("result_chart"), {
    "type": "radar",
    "data": {
        "labels": ["Idea", "Timing", "Skills", "Concept", "Market Plan", "MVP", "Revenue Potential", "Competition", "Team", "BMC", "Financial Model"],
        "datasets": [{
            "label": "Your Results",
            "data": [
              10,
              20,
              30,
              40,
              50,
              60,
              70,
              80,
              90,
              100,
              110
            ],
            "fill": true,
            "backgroundColor": "rgba(165, 211, 164, 0.2)",
            "borderColor": "rgb(165, 211, 164)",
            "pointBackgroundColor": "rgb(165, 211, 164)",
            "pointBorderColor": "#fff",
            "pointHoverBackgroundColor": "#fff",
            "pointHoverBorderColor": "rgb(255, 99, 132)"
        }]
    },
    "options": {
        "elements": {
            "line": {
                "tension": 0,
                "borderWidth": 3
            }
        }
    }
});
like image 230
Fadi Obaji Avatar asked Mar 21 '20 14:03

Fadi Obaji


People also ask

What does a radar chart tell you?

Radar Charts are used to compare two or more items or groups on various features or characteristics. Example: Compare two anti-depressant drugs on features such as: efficacy for severe depression, prevalence of specific side effects, interaction with alcohol, continuation of relief over time, cost to the consumer etc.

Is spider chart and radar chart same?

The radar chart is also known as web chart, spider chart, spider graph, spider web chart, star chart, star plot, cobweb chart, irregular polygon, polar chart, or Kiviat diagram. It is equivalent to a parallel coordinates plot, with the axes arranged radially.

What is difference between radar chart?

question. Stock charts are designed to display stock market data. There are four different sub-types that accommodate various combinations of Open, High, Low, Close, and Volume data. Radar charts are ideal for showing values relative to a center point and are ideally suited for showing exceptions to a trend.


1 Answers

You can do it easily by adding these props into your chart's scale specification:

scale: {
      gridLines: {
        color: 'red'
      },
      angleLines: {
        color: 'red'
      }
    },

The visual output will be your requested one

enter image description here

Hope this helps! :)

like image 147
danivicario Avatar answered Sep 20 '22 21:09

danivicario