Skip to content

Radar Chart

This component displays a Radar Chart.

Property

NoItemInput ValueDefault ValueAction PropertyTypeAction Default ValueDescription
1IDStringAuto-generatedidstringAuto-generatedThe [id] property cannot be set by actions.
2WidthString390widthstring390Component width
3HeightString460heightstring460Component height
4XStringxstringX coordinate position
5YStringystringY coordinate position
6VisibilityBooleanONvisibilitybooleantrueDisplay state
7ValueTable format
[Details 1]
[Details 1]valuearray of object[Details 1]Chart data
8ScaleTable format
[Details 2]
[Details 2]scaleobject[Details 2]Scale and tick settings
9SeriesTable format
[Details 3]
[Details 3]seriesarray of object[Details 3]Series drawing settings
10LegendTable format
[Details 4]
[Details 4]legendobject[Details 4]Legend settings

Example 1 Value (value)

[
{"month":"02","company A":20,"company B":52,"company C":72,"company D":34},
{"month":"03","company A":5,"company B":33,"company C":90,"company D":55},
{"month":"04","company A":55,"company B":30,"company C":81,"company D":66},
{"month":"05","company A":30,"company B":11,"company C":62,"company D":22},
{"month":"06","company A":27,"company B":14,"company C":68,"company D":70},
{"month":"07","company A":32,"company B":31,"company C":64,"company D":50},
{"month":"08","company A":50,"company B":22,"company C":30,"company D":80},
{"month":"09","company A":12,"company B":19,"company C":65,"company D":48},
{"month":"10","company A":10,"company B":24,"company C":50,"company D":66},
{"month":"11","company A":17,"company B":40,"company C":78,"company D":55}
]

Example 2 Scale (scale)

Sets the scale and tick.

ValueMax Ticks
month10

Example 3 Series (series)

Set the drawing settings for the series.

IDValueColorPoint ColorFillAlpha
Acompany A#81C4E8#81C4E8#81C4E80.3
Bcompany B#74A2E7#74A2E7#74A2E70.3
Ccompany C#5E83BA#5E83BA#5E83BA0.3

Example 4 Legend (legend)

Sets legend information.

SeriesHorizontal AlignVertical Align
A,B,Crighttop
  • The options for Horizontal Align are left | center | right (default).
  • The options for Vertical Align are top (default) | bottom.

Event

None