| 1 | > **Warning** |
| 2 | > |
| 3 | > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. |
| 4 | > |
| 5 | > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/radar.md](../../packages/mermaid/src/docs/syntax/radar.md). |
| 6 | |
| 7 | # Radar Diagram (v11.6.0+) |
| 8 | |
| 9 | ## Introduction |
| 10 | |
| 11 | A radar diagram is a simple way to plot low-dimensional data in a circular format. |
| 12 | |
| 13 | It is also known as a **radar chart**, **spider chart**, **star chart**, **cobweb chart**, **polar chart**, or **Kiviat diagram**. |
| 14 | |
| 15 | ## Usage |
| 16 | |
| 17 | This diagram type is particularly useful for developers, data scientists, and engineers who require a clear and concise way to represent data in a circular format. |
| 18 | |
| 19 | It is commonly used to graphically summarize and compare the performance of multiple entities across multiple dimensions. |
| 20 | |
| 21 | ## Syntax |
| 22 | |
| 23 | ```md |
| 24 | radar-beta |
| 25 | axis A, B, C, D, E |
| 26 | curve c1{1,2,3,4,5} |
| 27 | curve c2{5,4,3,2,1} |
| 28 | ... More Fields ... |
| 29 | ``` |
| 30 | |
| 31 | ## Examples |
| 32 | |
| 33 | ```mermaid-example |
| 34 | --- |
| 35 | title: "Grades" |
| 36 | --- |
| 37 | radar-beta |
| 38 | axis m["Math"], s["Science"], e["English"] |
| 39 | axis h["History"], g["Geography"], a["Art"] |
| 40 | curve a["Alice"]{85, 90, 80, 70, 75, 90} |
| 41 | curve b["Bob"]{70, 75, 85, 80, 90, 85} |
| 42 | |
| 43 | max 100 |
| 44 | min 0 |
| 45 | ``` |
| 46 | |
| 47 | ```mermaid |
| 48 | --- |
| 49 | title: "Grades" |
| 50 | --- |
| 51 | radar-beta |
| 52 | axis m["Math"], s["Science"], e["English"] |
| 53 | axis h["History"], g["Geography"], a["Art"] |
| 54 | curve a["Alice"]{85, 90, 80, 70, 75, 90} |
| 55 | curve b["Bob"]{70, 75, 85, 80, 90, 85} |
| 56 | |
| 57 | max 100 |
| 58 | min 0 |
| 59 | ``` |
| 60 | |
| 61 | ```mermaid-example |
| 62 | radar-beta |
| 63 | title Restaurant Comparison |
| 64 | axis food["Food Quality"], service["Service"], price["Price"] |
| 65 | axis ambiance["Ambiance"] |
| 66 | |
| 67 | curve a["Restaurant A"]{4, 3, 2, 4} |
| 68 | curve b["Restaurant B"]{3, 4, 3, 3} |
| 69 | curve c["Restaurant C"]{2, 3, 4, 2} |
| 70 | curve d["Restaurant D"]{2, 2, 4, 3} |
| 71 | |
| 72 | graticule polygon |
| 73 | max 5 |
| 74 | |
| 75 | ``` |
| 76 | |
| 77 | ```mermaid |
| 78 | radar-beta |
| 79 | title Restaurant Comparison |
| 80 | axis food["Food Quality"], service["Service"], price["Price"] |
| 81 | axis ambiance["Ambiance"] |
| 82 | |
| 83 | curve a["Restaurant A"]{4, 3, 2, 4} |
| 84 | curve b["Restaurant B"]{3, 4, 3, 3} |
| 85 | curve c["Restaurant C"]{2, 3, 4, 2} |
| 86 | curve d["Restaurant D"]{2, 2, 4, 3} |
| 87 | |
| 88 | graticule polygon |
| 89 | max 5 |
| 90 | |
| 91 | ``` |
| 92 | |
| 93 | ## Details of Syntax |
| 94 | |
| 95 | ### Title |
| 96 | |
| 97 | `title`: The title is an optional field that allows to render a title at the top of the radar diagram. |
| 98 | |
| 99 | ``` |
| 100 | radar-beta |
| 101 | title Title of the Radar Diagram |
| 102 | ... |
| 103 | ``` |
| 104 | |
| 105 | ### Axis |
| 106 | |
| 107 | `axis`: The axis keyword is used to define the axes of the radar diagram. |
| 108 | |
| 109 | Each axis is represented by an ID and an optional label. |
| 110 | |
| 111 | Multiple axes can be defined in a single line. |
| 112 | |
| 113 | ``` |
| 114 | radar-beta |
| 115 | axis id1["Label1"] |
| 116 | axis id2["Label2"], id3["Label3"] |
| 117 | ... |
| 118 | ``` |
| 119 | |
| 120 | ### Curve |
| 121 | |
| 122 | `curve`: The curve keyword is used to define the data points for a curve in the radar diagram. |
| 123 | |
| 124 | Each curve is represented by an ID, an optional label, and a list of values. |
| 125 | |
| 126 | Values can be defined by a list of numbers or a list of key-value pairs. If key-value pairs are used, the key represents the axis ID and the value represents the data point. Else, the data points are assumed to be in the order of the axes defined. |
| 127 | |
| 128 | Multiple curves can be defined in a single line. |
| 129 | |
| 130 | ``` |
| 131 | radar-beta |
| 132 | axis axis1, axis2, axis3 |
| 133 | curve id1["Label1"]{1, 2, 3} |
| 134 | curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9} |
| 135 | curve id4{ axis3: 30, axis1: 20, axis2: 10 } |
| 136 | ... |
| 137 | ``` |
| 138 | |
| 139 | ### Options |
| 140 | |
| 141 | - `showLegend`: The showLegend keyword is used to show or hide the legend in the radar diagram. The legend is shown by default. |
| 142 | - `max`: The maximum value for the radar diagram. This is used to scale the radar diagram. If not provided, the maximum value is calculated from the data points. |
| 143 | - `min`: The minimum value for the radar diagram. This is used to scale the radar diagram. If not provided, the minimum value is `0`. |
| 144 | - `graticule`: The graticule keyword is used to define the type of graticule to be rendered in the radar diagram. The graticule can be `circle` or `polygon`. If not provided, the default graticule is `circle`. |
| 145 | - `ticks`: The ticks keyword is used to define the number of ticks on the graticule. It is the number of concentric circles or polygons drawn to indicate the scale of the radar diagram. If not provided, the default number of ticks is `5`. |
| 146 | |
| 147 | ``` |
| 148 | radar-beta |
| 149 | ... |
| 150 | showLegend true |
| 151 | max 100 |
| 152 | min 0 |
| 153 | graticule circle |
| 154 | ticks 5 |
| 155 | ... |
| 156 | ``` |
| 157 | |
| 158 | ## Configuration |
| 159 | |
| 160 | Please refer to the [configuration](/config/schema-docs/config-defs-radar-diagram-config.html) guide for details. |
| 161 | |
| 162 | | Parameter | Description | Default Value | |
| 163 | | --------------- | ---------------------------------------- | ------------- | |
| 164 | | width | Width of the radar diagram | `600` | |
| 165 | | height | Height of the radar diagram | `600` | |
| 166 | | marginTop | Top margin of the radar diagram | `50` | |
| 167 | | marginBottom | Bottom margin of the radar diagram | `50` | |
| 168 | | marginLeft | Left margin of the radar diagram | `50` | |
| 169 | | marginRight | Right margin of the radar diagram | `50` | |
| 170 | | axisScaleFactor | Scale factor for the axis | `1` | |
| 171 | | axisLabelFactor | Factor to adjust the axis label position | `1.05` | |
| 172 | | curveTension | Tension for the rounded curves | `0.17` | |
| 173 | |
| 174 | ## Theme Variables |
| 175 | |
| 176 | ### Global Theme Variables |
| 177 | |
| 178 | > **Note** |
| 179 | > The default values for these variables depend on the theme used. To override the default values, set the desired values in the themeVariables section of the configuration: |
| 180 | > |
| 181 | > --- |
| 182 | > |
| 183 | > config: |
| 184 | > themeVariables: |
| 185 | > cScale0: "#FF0000" |
| 186 | > cScale1: "#00FF00" |
| 187 | > |
| 188 | > --- |
| 189 | |
| 190 | Radar charts support the color scales `cScale${i}` where `i` is a number from `0` to the theme's maximum number of colors in its color scale. Usually, the maximum number of colors is `12`. |
| 191 | |
| 192 | | Property | Description | |
| 193 | | ---------- | ------------------------------ | |
| 194 | | fontSize | Font size of the title | |
| 195 | | titleColor | Color of the title | |
| 196 | | cScale${i} | Color scale for the i-th curve | |
| 197 | |
| 198 | ### Radar Style Options |
| 199 | |
| 200 | > **Note** |
| 201 | > Specific variables for radar resides inside the `radar` key. To set the radar style options, use this syntax. |
| 202 | > |
| 203 | > --- |
| 204 | > |
| 205 | > config: |
| 206 | > themeVariables: |
| 207 | > radar: |
| 208 | > axisColor: "#FF0000" |
| 209 | > |
| 210 | > --- |
| 211 | |
| 212 | | Property | Description | Default Value | |
| 213 | | -------------------- | ---------------------------- | ------------- | |
| 214 | | axisColor | Color of the axis lines | `black` | |
| 215 | | axisStrokeWidth | Width of the axis lines | `1` | |
| 216 | | axisLabelFontSize | Font size of the axis labels | `12px` | |
| 217 | | curveOpacity | Opacity of the curves | `0.7` | |
| 218 | | curveStrokeWidth | Width of the curves | `2` | |
| 219 | | graticuleColor | Color of the graticule | `black` | |
| 220 | | graticuleOpacity | Opacity of the graticule | `0.5` | |
| 221 | | graticuleStrokeWidth | Width of the graticule | `1` | |
| 222 | | legendBoxSize | Size of the legend box | `10` | |
| 223 | | legendFontSize | Font size of the legend | `14px` | |
| 224 | |
| 225 | ## Example on config and theme |
| 226 | |
| 227 | ```mermaid-example |
| 228 | --- |
| 229 | config: |
| 230 | radar: |
| 231 | axisScaleFactor: 0.25 |
| 232 | curveTension: 0.1 |
| 233 | theme: base |
| 234 | themeVariables: |
| 235 | cScale0: "#FF0000" |
| 236 | cScale1: "#00FF00" |
| 237 | cScale2: "#0000FF" |
| 238 | radar: |
| 239 | curveOpacity: 0 |
| 240 | --- |
| 241 | radar-beta |
| 242 | axis A, B, C, D, E |
| 243 | curve c1{1,2,3,4,5} |
| 244 | curve c2{5,4,3,2,1} |
| 245 | curve c3{3,3,3,3,3} |
| 246 | ``` |
| 247 | |
| 248 | ```mermaid |
| 249 | --- |
| 250 | config: |
| 251 | radar: |
| 252 | axisScaleFactor: 0.25 |
| 253 | curveTension: 0.1 |
| 254 | theme: base |
| 255 | themeVariables: |
| 256 | cScale0: "#FF0000" |
| 257 | cScale1: "#00FF00" |
| 258 | cScale2: "#0000FF" |
| 259 | radar: |
| 260 | curveOpacity: 0 |
| 261 | --- |
| 262 | radar-beta |
| 263 | axis A, B, C, D, E |
| 264 | curve c1{1,2,3,4,5} |
| 265 | curve c2{5,4,3,2,1} |
| 266 | curve c3{3,3,3,3,3} |
| 267 | ``` |
| 268 | |
| 269 | <!--- cspell:ignore Kiviat ---> |
| 270 | |