--- title: "Dark Radar Chart API — Spider charts on dark | Imejis" description: "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." url: "https://www.imejis.io/components/radar/dark" --- # Dark Radar Chart API — Spider charts on dark | Imejis A vivid radar on a dark card for social and dashboards. ## Use cases - Dark-theme comparison cards - Game / esports stat graphics - Dashboard radar exports on dark backgrounds ## Properties | Name | Type | Default | Description | | --- | --- | --- | --- | | `axes` | `string[]` | `[]` | Axis labels (the spokes), clockwise from the top. | | `series` | `object[]` | `[]` | One entry per dataset: [{ name, values, color }] — values align to axes. | | `max` | `number` | `0` | Value mapped to the outer ring (0 = auto from the data). | | `rings` | `number` (min 1) | `4` | Number of concentric grid rings. | | `colors` | `color[]` | `[]` | Series palette (cycled) when a series has no color. | | `fillOpacity` | `number` (min 0, max 1) | `0.2` | Fill opacity of each series polygon. | | `gridColor` | `color` | `"#e2e8f0"` | Grid rings & spokes color. | | `axisLabelColor` | `color` | `"#475569"` | Axis label & legend text color. | | `strokeWidth` | `number` (min 0) | `2` | Series outline width (px). | | `showDots` | `boolean` | `true` | Draw a dot at each value vertex. | | `showValues` | `boolean` | `false` | Print the value beside each vertex (best with one series). | | `valueFormat` | `'number' \| 'compact' \| 'percent' \| 'currency'` | `"number"` | How printed values are formatted (80 / 1.2K / 80% / $80). | | `currencySymbol` | `string` | `"$"` | Symbol used with the 'currency' format. | | `showLegend` | `boolean` | `true` | Show the series legend (named series only). | | `legendPosition` | `'top' \| 'right' \| 'bottom'` | `"bottom"` | Where the legend is placed. | | `opacity` | `number` | `1` | Overall component opacity from 0 (transparent) to 1 (opaque). | | `borderWidth` | `number` | `0` | Border thickness in pixels around the component. | | `borderColor` | `color` | `"transparent"` | Border color (any CSS color). | | `borderStyle` | `'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'none'` | `"solid"` | Border line style. | | `borderRadius` | `number` | `0` | Corner radius in pixels. | | `boxShadow` | `string` | — | CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)". | ## Design JSON (this variant) ```json { "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" } } ] } ``` ## Examples ### Character stats card A game character’s attributes as a glowing spider on slate. API overrides that reproduce this example: ```json { "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 that reproduce this example: ```json { "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 } ``` ## API overrides Push fresh datasets per render with '.series' (or just '') as [{ name, values }]; '.axes' updates the spokes too. Flat override payload (`key.property` addressing) with the sample design's current values — send only the keys you want to change: ```json { "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 } ``` ```bash 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 }' ``` `{{YOUR_DESIGN_ID}}` and `{{YOUR_API_KEY}}` are placeholders: first create the design in your account (paste the sample design JSON above into the editor at https://app.imejis.io, or create it programmatically via the imejis MCP server's `create_design` + `update_design` tools), then render it with the design's id and one of your API keys. Agents: the MCP server at https://api.imejis.io/api/mcp exposes this same catalog as structured data via the `list_component_types` tool (property kinds, allowed values, bounds, ready-to-use sample designs). ## Related - [Radar Chart component](https://www.imejis.io/components/radar.md) — full reference and FAQs - [Single series](https://www.imejis.io/components/radar/single.md) — One filled polygon — a clean scorecard for a single subject. - [Comparison](https://www.imejis.io/components/radar/comparison.md) — Two or three overlaid series — you vs competitor vs benchmark.