Skip to main content

RadarChart

How to use​

RadarChart(
  RadarChartData(
    // read about it in the RadarChartData section
  ),
  duration: Duration(milliseconds: 150), // Optional
  curve: Curves.linear, // Optional
);

Implicit Animations​

When you change the chart's state, it animates to the new state internally (using implicit animations). You can control the animation duration and curve using optional duration and curve properties, respectively.

RadarChartData​

dataSetsList<RadarDataSet>?#required

RadarChart draw dataSets that each of them showing a list of RadarEntry

radarBackgroundColorColor?#defaultColors.transparent

radarBackgroundColor draw the background color of the RadarChart

radarBorderDataBorderSide?#defaultconst BorderSide(width: 2)

radarBorderData is used to draw RadarChart border

radarShapeRadarShape?#defaultRadarShape.circle

radarShape is used to draw RadarChart border and background

getTitleRadarChartTitle Function(int, double)?#defaultnull

getTitle is used to draw titles outside the RadarChart getTitle is type of GetTitleByIndexFunction so you should return a valid RadarChartTitle for each index (we provide a default angle = index * 360 / titleCount)

getTitle: (index, angle) {
  switch (index) {
    case 0:
      return RadarChartTitle(text: 'Mobile or Tablet', angle: angle);
    case 2:
      return RadarChartTitle(text: 'Desktop', angle: angle);
    case 1:
      return RadarChartTitle(text: 'TV', angle: angle);
    default:
      return const RadarChartTitle(text: '');
  }
}
titleTextStyleTextStyle?#defaultnull

Defines style of showing RadarChart titles.

titlePositionPercentageOffsetdouble?#default0.2

the titlePositionPercentageOffset is the place of showing title on the RadarChart The higher the value of this field, the more titles move away from the chart. this field should be between 0 and 1, if it is 0 the title will be drawn near the inside section, if it is 1 the title will be drawn near the outside of section, the default value is 0.2.

tickCountint?#default1

Defines the number of ticks that should be paint in RadarChart the default & minimum value of this field is 1.

ticksTextStyleTextStyle?#defaultnull

Defines style of showing RadarChart tick titles.

tickBorderDataBorderSide?#defaultconst BorderSide(width: 2)

Defines style of showing RadarChart tick borders.

gridBorderDataBorderSide?#defaultconst BorderSide(width: 2)

Defines style of showing RadarChart grid borders.

radarTouchDataRadarTouchData?#defaultRadarTouchData()

Handles touch behaviors and responses.

isMinValueAtCenterbool#defaultfalse

If isMinValueAtCenter is true, the minimum value of the RadarChart will be at the center of the chart.

borderDataFlBorderData?#defaultFlBorderData()

Holds data to draw the border around the chart, see FlBorderData.

RadarDataSet​

dataEntriesList<RadarEntry>?#defaultconst []

each section or dataSets consists of a set of dataEntries.

fillColorColor?#defaultColors.cyan

defines the color that fills the RadarDataSet.

fillGradientGradient?#defaultnull

defines the gradient that fills the RadarDataSet, if provided it is used instead of fillColor.

borderColorColor?#defaultColors.cyan

defines the border color of the RadarDataSet.

borderWidthdouble?#default2.0

defines the width of RadarDataSet border. the default value of this field is 2.0

entryRadiusdouble?#default5.0

defines the radius of each entry the default value of this field is 5.0

RadarEntry​

valuedouble#required

RadarChart uses this field to render every point in chart.

RadarTouchData (read about touch handling)​

enabledbool?#defaulttrue

Determines whether to enable or disable touch behaviors.

touchCallbackvoid Function(FlTouchEvent, RadarTouchResponse?)?#defaultnull

touchCallback notifies you about the happened touch/pointer events. It gives you a FlTouchEvent which is the happened event such as FlPointerHoverEvent, FlTapUpEvent, ... It also gives you a BaseTouchResponse which is the chart specific type and contains information about the elements that has touched.

mouseCursorResolverMouseCursor Function(FlTouchEvent, RadarTouchResponse?)?#defaultnull

Using mouseCursorResolver you can change the mouse cursor based on the provided FlTouchEvent and BaseTouchResponse

longPressDurationDuration?#defaultnull

This property that allows to customize the duration of the longPress gesture. If null, it uses kLongPressTimeout (500 milliseconds).

touchSpotThresholddouble?#default10

we find the nearest spots on touched position based on this threshold

RadarTouchResponse​

touchLocationOffset#

The location of the touch in pixels on the screen.

touchedSpotRadarTouchedSpot?#

touch happened on this spot. this spot has useful information about spot or entry

RadarTouchedSpot​

Also has the properties of TouchedSpot.

touchedDataSetRadarDataSet#

The RadarDataSet of the touched entry.

touchedDataSetIndexint#

The index of touchedDataSet in RadarChartData.dataSets.

touchedRadarEntryRadarEntry#

The touched RadarEntry.

touchedRadarEntryIndexint#

The index of touchedRadarEntry in RadarDataSet.dataEntries.

RadarChartTitle​

textString#required

text is used to draw titles outside the RadarChart

childrenList<InlineSpan>?#defaultnull

Additional spans after text, to have texts with different styles (like the children of a TextSpan).

angledouble#default0

Rotates the title (in degrees).

positionPercentageOffsetdouble?#defaultnull

positionPercentageOffset is the place of showing title on the RadarChart The higher the value of this field, the more titles move away from the chart. The value of positionPercentageOffset takes precedence over the value of RadarChartData.titlePositionPercentageOffset, even if it is set.

some samples​

Sample 1 (Source Code)​