#SpiderChart

SpiderChart in UIToolbox is a radar chart of stats, as on a character sheet. Each SpiderAxis is a spoke from the center. The first axis points up, and the others follow clockwise. The chart fills a polygon through the values. With ShowCompare, it also outlines the Compare values, for example the stats with an item tried on. The Character sheet example uses it.

Video tutorial: Spider chart. All videos: Video tutorials.

<tb:SpiderChart name="stats" max-value="20" rings="4">
    <tb:SpiderAxis text="Strength" />
    <tb:SpiderAxis text="Agility" />
    <tb:SpiderAxis text="Vitality" />
</tb:SpiderChart>

var luck = chart.AddAxis("Luck", 3);
luck.Compare = 5;
chart.ShowCompare = true;

• The chart draws at least 3 axes. The chart is square: the smaller side of the content, less LabelSpace, sets the radius.
• Each axis sits past the tip of its spoke, with its label and its value. A value under the compare value gets the --up class, and a value over it gets the --down class.
• The chart draws with Painter2D and places the axes with left and top.
• In the UI Builder, a chart without axes shows five sample axes in a dashed outline. The sample does not show in Play mode or in a build, and the UI Builder does not save it to the UXML file.

#Animation

<tb:SpiderChart name="weapons" animate="true" animation-duration="600" />

• When you change a Value or a Compare, the value text changes at once. The shape moves to the new values in AnimationDuration.
• A change during a move starts from the shape that the chart shows at that time. The shape does not jump back.
• A chart that is not in a panel shows a new value at once.
• Set Animate to false to stop a move. The shape then shows the values at once.

#Styling