Dark radar chart

Radar Chart styletype: "radar"

Generate dark-mode radar chart images — vivid polygons over a subtle dark grid for social cards and dashboards. Fresh series per API call. Try Imejis free.

Edit it — this is the actual editor panel

Design JSON — “Dark” variant

{
  "title": "Radar chart sample",
  "description": "A multi-series capability comparison",
  "dimensions": {
    "width": 800,
    "height": 460
  },
  "background": {
    "color": "#0f172a"
  },
  "components": [
    {
      "id": "sample-radar",
      "key": "radar",
      "type": "radar",
      "position": {
        "x": 240,
        "y": 40
      },
      "rotation": 0,
      "size": {
        "width": 320,
        "height": 380
      },
      "dynamic": true,
      "properties": {
        "axes": [
          "Speed",
          "Power",
          "Range",
          "Accuracy",
          "Defense",
          "Cost"
        ],
        "series": [
          {
            "name": "Model A",
            "values": [
              80,
              65,
              90,
              70,
              85,
              60
            ]
          },
          {
            "name": "Model B",
            "values": [
              60,
              85,
              70,
              90,
              65,
              80
            ]
          }
        ],
        "max": 100,
        "fillOpacity": 0.2,
        "showLegend": true,
        "legendPosition": "bottom",
        "opacity": 1,
        "gridColor": "#334155",
        "axisLabelColor": "#cbd5e1"
      }
    }
  ]
}

Radar Chart examples

Real renders of the dark radar chart — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Character stats card

A game character’s attributes as a glowing spider on slate.

API overrides for this example

{
  "radar.gridColor": "#334155",
  "radar.axisLabelColor": "#cbd5e1",
  "radar.axes": [
    "STR",
    "DEX",
    "INT",
    "VIT",
    "LUK",
    "AGI"
  ],
  "radar.series": [
    {
      "name": "Hero",
      "values": [
        90,
        70,
        60,
        85,
        50,
        80
      ],
      "color": "#38bdf8"
    }
  ],
  "radar.max": 100,
  "radar.showValues": true,
  "radar.showLegend": false
}

Two builds compared

Two character builds overlaid on a near-black card with a legend.

API overrides for this example

{
  "radar.gridColor": "#334155",
  "radar.axisLabelColor": "#cbd5e1",
  "radar.axes": [
    "Damage",
    "Defense",
    "Mobility",
    "Utility",
    "Sustain",
    "Range"
  ],
  "radar.series": [
    {
      "name": "Aggro",
      "values": [
        92,
        55,
        80,
        60,
        50,
        70
      ],
      "color": "#f472b6"
    },
    {
      "name": "Tank",
      "values": [
        60,
        92,
        55,
        75,
        88,
        65
      ],
      "color": "#34d399"
    }
  ],
  "radar.max": 100
}

When to use the dark style

Dark-theme comparison cards
Game / esports stat graphics
Dashboard radar exports on dark backgrounds

Use it dynamically via the API

Push fresh datasets per render with '<key>.series' (or just '<key>') as [{ name, values }]; '<key>.axes' updates the spokes too.

Full API request with this variant's current values — the playground above sends only the properties you change

curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "radar.axes": [
        "Speed",
        "Power",
        "Range",
        "Accuracy",
        "Defense",
        "Cost"
    ],
    "radar.series": [
        {
            "name": "Model A",
            "values": [
                80,
                65,
                90,
                70,
                85,
                60
            ]
        },
        {
            "name": "Model B",
            "values": [
                60,
                85,
                70,
                90,
                65,
                80
            ]
        }
    ],
    "radar.max": 100,
    "radar.fillOpacity": 0.2,
    "radar.showLegend": true,
    "radar.legendPosition": "bottom",
    "radar.opacity": 1,
    "radar.gridColor": "#334155",
    "radar.axisLabelColor": "#cbd5e1"
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Other radar chart styles

Default Single series ComparisonDark

See the radar chart component page for the full property reference and FAQs.