Simple JS Library To Include SVG Maturity Radar Chart Library

maturity-radar is a simple JS library for embedding maturity radar, giving axis definitions and target/actual values. It allows you to embed a clear and intuitive Maturity Radar anywhere you can including HTML and JavaScript.

The screen includes coloring based on maturity level (on a traffic light gradient) and hovering functions to provide tooltip access to metrics and maturity levels.

animated radar chart, radial graph javascript, 3d radar chart, excel radar chart, radar svg animation, zingchart radar, radar chart

Stripe Style Dropdown Navigation Menu With Vanilla Javascript

How to make use of it:

1. Just add the JavaScript file “radar.js” to the web page.

<script src="radar.js"></script>

2. Create a placeholder for your radar chart.

<div id="microservices"></div>

3. Create a new radar chart and add your multivariate data as follows:

radar.show('#microservices', {
  size: 700,
  curve: false,
  metrics: [
    {
      name: "Metric 1",
      range: [
        "Value 0",
        "Value 1",
        "Value 2",
        "Value 3"
      ],
      target: 2,
      actual: 1
    },
    {
      name: "Metric 2",
      range: [
        "Value 0",
        "Value 1",
        "Value 2",
        "Value 3"
      ],
      target: 3,
      actual: 2
    },
    {
      name: "Metric 3",
      range: [
        "Value 0",
        "Value 1",
        "Value 2",
        "Value 3"
      ],
      target: 2,
      actual: 0
    },
    {
      name: "Metric 4",
      range: [
        "Value 0",
        "Value 1",
        "Value 2",
        "Value 3"
      ],
      target: 3,
      actual: 2
    },
    {
      name: "Metric 5",
      range: [
        "Value 0",
        "Value 1",
        "Value 2",
        "Value 3"
      ],
      target: 2,
      actual: 1
    }
  ]
});

Customizable SVG-based Radar Chart Library, maturity-radar Plugin/Github