[Paid] XChart Extension for App Anventor XChart is a powerful radar chart component for App Inventor

Extensions
1

XChart-Extension-for-App-inventor

XChart is a powerful radar chart component for App Inventor

šŸ§© XChart

An extension for MIT App Inventor 2.
XChart is a powerful radar chart component for App Inventor that allows you to create interactive and customizable radar/spider charts. Features include customizable colors, animations, shapes, labels, and click events. Developed by th using Fast.

:memo: Specifications

:floppy_disk: Size: 25.68 KB
:gear: Version: 1.0
:iphone: Minimum API Level: 7
:date: Updated On: 2025-02-26T18:30:00Z
:computer: Built & documented using: FAST-CLI
Paid Price - 2šŸ’² USD.
INR - 175rs.
Telegram: here
Find more Extension here
Find more info in GitHub

Buy In PayPal

:yellow_heart:paypal here

Lib used

here

Screen shot

Screenshot_2025-02-27-14-35-43-965_appinventor.ai_Techhamara91.xchart.jpg
image
image
image

Demo

10d0f4fe-6002-4d66-bc95-75324e0bca4f.gif

Events:

XChart has total 7 events.


ClickBlock

:yellow_heart: Click

Triggered when the radar chart is clicked.

PointClickBlock

:yellow_heart: PointClick

Triggered when a data point is clicked.

Parameter Type
index number

AnimationStartBlock

:yellow_heart: AnimationStart

Triggered when the chart animation starts.

AnimationEndBlock

:yellow_heart: AnimationEnd

Triggered when the chart animation ends.

DataChangedBlock

:yellow_heart: DataChanged

Triggered when the chart data is updated.

TitleClickBlock

:yellow_heart: TitleClick

Triggered when a title is clicked.

Parameter Type
index number

RegionClickBlock

:yellow_heart: RegionClick

Triggered when a region is clicked.

Parameter Type
index number

Methods:

XChart has total 3 methods.


CreateBlock

:purple_heart: Create

Creates a radar chart inside the specified arrangement. The arrangement must be a HorizontalArrangement or VerticalArrangement component.

Parameter Type
arrangement component

SetDrawablesBlock

:purple_heart: SetDrawables

Adds icon drawables to each vertex of the radar chart. Provide a list of drawable resource IDs.

Parameter Type
drawablesList list

SetRegionShaderConfigBlock

:purple_heart: SetRegionShaderConfig

Configures a custom gradient shader for regions. Provide lists of colors and position values (0.0-1.0).

Parameter Type
colorsList list
positionsList list

Setters:

XChart has total 33 setter properties.


SetPercentsBlock

:green_heart: SetPercents

Sets the values for each data point as percentages between 0.0 and 1.0. The list length must match the number of sides.

  • Input type: list

SetTitlesBlock

:green_heart: SetTitles

Sets the label text for each vertex of the radar chart. The list length must match the number of sides.

  • Input type: list

SetValuesBlock

:green_heart: SetValues

Sets additional text values to display below each title. Useful for showing exact numbers or labels.

  • Input type: list

SetColorsBlock

:green_heart: SetColors

Sets custom colors for each region of the radar chart. Provide a list of color values in decimal format.

  • Input type: list

SetCountBlock

:green_heart: SetCount

Sets the number of vertices (sides) for the radar chart. This determines how many data points can be displayed.

  • Input type: number

SetLayerCountBlock

:green_heart: SetLayerCount

Sets the number of concentric layers in the radar chart background. These create the grid effect.

  • Input type: number

SetDrawableSizeBlock

:green_heart: SetDrawableSize

Sets the size of the icon drawables in pixels at each vertex.

  • Input type: number

SetDrawablePaddingBlock

:green_heart: SetDrawablePadding

Sets the padding between icon drawables and their labels in pixels.

  • Input type: number

SetDescPaddingBlock

:green_heart: SetDescPadding

Sets the padding for descriptions/labels around the chart in pixels.

  • Input type: number

SetTitleSizeBlock

:green_heart: SetTitleSize

Sets the font size for vertex titles in pixels.

  • Input type: number

SetDataSizeBlock

:green_heart: SetDataSize

Sets the font size for data values in pixels.

  • Input type: number

SetRadarPercentBlock

:green_heart: SetRadarPercent

Sets the size of the radar chart relative to its container (0.0-1.0). Example: 0.8 means 80% of container size.

  • Input type: number

SetStartColorBlock

:green_heart: SetStartColor

Sets the starting color for gradient effects. Use decimal color values.

  • Input type: number

SetEndColorBlock

:green_heart: SetEndColor

Sets the ending color for gradient effects. Use decimal color values.

  • Input type: number

SetEnabledAnimationBlock

:green_heart: SetEnabledAnimation

Enables or disables animation effects when the chart updates.

  • Input type: boolean

SetEnabledShowPointBlock

:green_heart: SetEnabledShowPoint

Enables or disables the display of points at each vertex of the chart.

  • Input type: boolean

SetCobwebColorBlock

:green_heart: SetCobwebColor

Sets the color of the background grid lines (cobweb). Use decimal color values.

  • Input type: number

SetLineColorBlock

:green_heart: SetLineColor

Sets the color of the data lines that connect the vertices. Use decimal color values.

  • Input type: number

SetDataColorBlock

:green_heart: SetDataColor

Sets the color of the data value text. Use decimal color values.

  • Input type: number

SetTitleColorBlock

:green_heart: SetTitleColor

Sets the color of the title text at each vertex. Use decimal color values.

  • Input type: number

SetPointColorBlock

:green_heart: SetPointColor

Sets the color of the vertex points. Use decimal color values.

  • Input type: number

SetPointRadiusBlock

:green_heart: SetPointRadius

Sets the radius of the vertex points in pixels.

  • Input type: number

SetEnabledBorderBlock

:green_heart: SetEnabledBorder

Enables or disables the border around the entire chart.

  • Input type: boolean

SetBorderColorBlock

:green_heart: SetBorderColor

Sets the color of the chart's border. Use decimal color values.

  • Input type: number

SetBoundaryWidthBlock

:green_heart: SetBoundaryWidth

Sets the width of the chart's border in pixels.

  • Input type: number

SetEnabledPolygonBlock

:green_heart: SetEnabledPolygon

Enables or disables the polygon shape connecting the data points.

  • Input type: boolean

SetCircleBlock

:green_heart: SetCircle

Sets whether the chart should be circular (true) or polygonal (false).

  • Input type: boolean

SetEnabledShadeBlock

:green_heart: SetEnabledShade

Enables or disables the shading effect inside the data polygon.

  • Input type: boolean

SetEnabledRadiusBlock

:green_heart: SetEnabledRadius

Enables or disables the lines extending from the center to each vertex.

  • Input type: boolean

SetEnabledTextBlock

:green_heart: SetEnabledText

Enables or disables all text labels (titles and values).

  • Input type: boolean

SetSingleColorBlock

:green_heart: SetSingleColor

Sets a single color for all regions of the chart. Use decimal color values.

  • Input type: number

SetEnabledRegionShaderBlock

:green_heart: SetEnabledRegionShader

Enables or disables the custom gradient shader effect for regions.

  • Input type: boolean

LoadAnimationBlock

:green_heart: LoadAnimation

Reloads the chart with or without animation effects.

  • Input type: boolean

Getters:

XChart has total 27 getter properties.

CountBlock

:green_circle: Count

Gets the current number of vertices (sides) in the radar chart.

  • Return type: number

LayerCountBlock

:green_circle: LayerCount

Gets the current number of concentric layers in the chart.

  • Return type: number

DrawableSizeBlock

:green_circle: DrawableSize

Gets the current drawable size in pixels.

  • Return type: number

DrawablePaddingBlock

:green_circle: DrawablePadding

Gets the current drawable padding in pixels.

  • Return type: number

DescPaddingBlock

:green_circle: DescPadding

Gets the current description padding in pixels.

  • Return type: number

TitleSizeBlock

:green_circle: TitleSize

Gets the current title text size in pixels.

  • Return type: number

DataSizeBlock

:green_circle: DataSize

Gets the current data text size in pixels.

  • Return type: number

RadarPercentBlock

:green_circle: RadarPercent

Gets the current radar chart size percentage (0.0-1.0).

  • Return type: number

StartColorBlock

:green_circle: StartColor

Gets the current start color value.

  • Return type: number

:green_circle: EndColor

Gets the current end color value.

  • Return type: number

EnabledAnimationBlock

:green_circle: EnabledAnimation

Checks if animation is currently enabled.

  • Return type: boolean

EnabledShowPointBlock

:green_circle: EnabledShowPoint

Checks if points are currently shown.

  • Return type: boolean

CobwebColorBlock

:green_circle: CobwebColor

Gets the current cobweb color value.

  • Return type: number

LineColorBlock

:green_circle: LineColor

Gets the current line color value.

  • Return type: number

DataColorBlock

:green_circle: DataColor

Gets the current data color value.

  • Return type: number

TitleColorBlock

:green_circle: TitleColor

Gets the current title color value.

  • Return type: number

PointColorBlock

:green_circle: PointColor

Gets the current point color value.

  • Return type: number

PointRadiusBlock

:green_circle: PointRadius

Gets the current point radius in pixels.

  • Return type: number

EnabledBorderBlock

:green_circle: EnabledBorder

Checks if border is currently enabled.

  • Return type: boolean

BorderColorBlock

:green_circle: BorderColor

Gets the current border color value.

  • Return type: number

BoundaryWidthBlock

:green_circle: BoundaryWidth

Gets the current boundary width in pixels.

  • Return type: number

EnabledPolygonBlock

:green_circle: EnabledPolygon

Checks if polygon is currently enabled.

  • Return type: boolean

CircleBlock

:green_circle: Circle

Checks if circular shape is currently enabled.

  • Return type: boolean

EnabledShadeBlock

:green_circle: EnabledShade

Checks if shade effect is currently enabled.

  • Return type: boolean

EnabledRadiusBlock

:green_circle: EnabledRadius

Checks if radius lines are currently enabled.

  • Return type: boolean

EnabledTextBlock

:green_circle: EnabledText

Checks if text labels are currently enabled.

  • Return type: boolean

SingleColorBlock

:green_circle: SingleColor

Gets the current single color value.

  • Return type: number

Thanks

TechHamara
2 Likes
2

Thank you for your contribution
Are you using any library?
If yes, please provide a link to that library to credit its author

Taifun

3 Likes
3

Setter name no need with 'Set'.

1 Like
4

You are right :+1: