Customizable SVG-based Radar Chart Library – maturity-radar

Preview:

Description:

maturity-radar is an easy, CSS-less JavaScript library used to render a dynamic, customizable, SVG based radar chart in the document.

Basic usage:

Just add the JavaScript file ‘radar.js’ to the webpage and you’re ready to go.

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

Create a placeholder element for your radar chart.

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

Create a new radar chart and add your own 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
    }
  ]
});