Back to Fl Chart

BaseChart

repo_files/documentations/base_chart.md

1.2.015.5 KB
Original Source

BaseChart

FlBorderData

PropNameDescriptiondefault value
showdetermines to show or hide the bordertrue
borderBorder details that determines which border should be drawn with which colorBorder.all(color: Colors.black, width: 1.0, style: BorderStyle.solid)

FlTitlesData

PropNameDescriptiondefault value
showdetermines to show or hide the titles Around the charttrue
leftTitlesan AxisTitle that holds data to draw left titlesAxisTitles(sideTitles: SideTitles(reservedSize: 40, showTitles: true))
topTitlesan AxisTitle that holds data to draw top titlesAxisTitles(sideTitles: SideTitles(reservedSize: 6, showTitles: true))
rightTitlesan AxisTitle that holds data to draw right titlesAxisTitles(sideTitles: SideTitles(reservedSize: 40, showTitles: true))
bottomTitlesan AxisTitle that holds data to draw bottom titlesAxisTitles(sideTitles: SideTitles(reservedSize: 6, showTitles: true))

AxisTitle

PropNameDescriptiondefault value
axisNameSizeDetermines the size of [axisName]16
axisNameWidgetIt shows the name of axis (you can pass a Widget)null
sideTitlesIt accepts a SideTitles which is responsible to show your axis side titlesSideTitles()
drawBehindEverythingIf titles are showing on top of your tooltip, you can draw them behind everything.true
sideTitleAlignmentIt accepts a SideTitleAlignment which is responsible for positioning the axis labels inside, outside, or on the border of the chartSideTitleAlignment.outside

SideTitles

PropNameDescriptiondefault value
showTitlesdetermines whether to show or hide the titlesfalse
getTitlesWidgetA function to retrieve the title widget with given value on the related axis.defaultGetTitle
reservedSizeIt determines the maximum space that your titles need,22
intervalTexts are showing with provided interval. If you don't provide anything, we try to find a suitable value to set as interval under the hood.null
minIncludedDetermines whether to include title for minimum data valuetrue
maxIncludedDetermines whether to include title for maximum data valuetrue

SideTitleFitInsideData

PropNameDescriptiondefault value
enableddetermines whether to enable fit inside to SideTitleWidgettrue
axisPositionposition (in pixel) that applied to the center of child widget along its corresponding axisnull
parentAxisSizechild widget's corresponding axis maximum width/heightnull
distanceFromEdgedistance between child widget and its closest corresponding axis edge6

FlGridData

PropNameDescriptiondefault value
showdetermines to show or hide the background grid datatrue
drawHorizontalLinedetermines to show or hide the horizontal grid linestrue
horizontalIntervalinterval space of grid, left it null to be calculate automaticallynull
getDrawingHorizontalLinea function to get the line style of each grid line by giving the related axis valuedefaultGridLine
checkToShowHorizontalLinea function to check whether to show or hide the horizontal grid by giving the related axis valueshowAllGrids
drawVerticalLinedetermines to show or hide the vertical grid linestrue
verticalIntervalinterval space of grid, left it null to be calculate automaticallynull
getDrawingVerticalLinea function to get the line style of each grid line by giving the related axis valuedefaultGridLine
checkToShowVerticalLinea function to determine whether to show or hide the vertical grid by giving the related axis valueshowAllGrids

FlLabel

PropNameDescriptiondefault value
showdetermines whether to show or hide the labeltrue
textthe text content of the label''
styleTextStyle of the label. When null or when inherit is true, the style is merged with the ambient DefaultTextStyle and respects the platform's bold-text accessibility settingnull
anglerotation angle of the label in degrees0
textDirectionTextDirection of the label textTextDirection.ltr

FlSpot

PropNameDescriptiondefault value
xrepresents x on the coordinate system (x starts from left)null
yrepresents y on the coordinate system (y starts from bottom)null
xErrorDetermines the error range of the data point using (FlErrorRange)[#FlErrorRange] (which ontains lowerBy and upperValue) for the x-axisnull
yErrorDetermines the error range of the data point using (FlErrorRange)[#FlErrorRange] (which ontains upperBy and upperValue) for the y-axisnull

FlLine

propNameDescriptiondefault value
colordetermines the color of lineColors.black
gradientgradient of the line (you have to provide either color or gradientnull
strokeWidthdetermines the stroke width of the line2
dashArrayA circular array of dash offsets and lengths. For example, the array [5, 10] would result in dashes 5 pixels long followed by blank spaces 10 pixels long. The array [5, 10, 5] would result in a 5 pixel dash, a 10 pixel gap, a 5 pixel dash, a 5 pixel gap, a 10 pixel dash, etc.null

TouchedSpot

PropNameDescriptiondefault value
spotthe touched FlSpotnull
offsetOffset of the touched spotnull

RangeAnnotations

PropNameDescriptiondefault value
horizontalRangeAnnotationslist of horizontalRangeAnnotation to draw on the chart[]
verticalRangeAnnotationslist of VerticalRangeAnnotation to draw on the chart[]

HorizontalRangeAnnotation

PropNameDescriptiondefault value
y1start interval of horizontal rectanglenull
y2end interval of horizontal rectanglenull
colorcolor of the rectangleColors.white
gradientgradient of the rectanglenull

VerticalRangeAnnotation

PropNameDescriptiondefault value
x1start interval of vertical rectanglenull
x2end interval of vertical rectanglenull
colorcolor of the rectangleColors.white
gradientgradient of the rectanglenull

FlTouchEvent

Base class for all supported touch/pointer events.

PropNameDescriptionInspired from
FlPanDownEventContains information of happened touch gestureGestureDragDownCallback
FlPanStartEventWhen a pointer has contacted the screen and has begun to move.GestureDragStartCallback
FlPanUpdateEventWhen a pointer that is in contact with the screen and moving has moved again.GestureDragUpdateCallback
FlPanCancelEventWhen the pointer that previously triggered a FlPanStartEvent did not complete.GestureDragCancelCallback
FlPanEndEventWhen a pointer that was previously in contact with the screen and moving is no longer in contact with the screen.GestureDragEndCallback
FlTapDownEventWhen a pointer that might cause a tap has contacted the screen.GestureTapDownCallback
FlTapCancelEventWhen the pointer that previously triggered a FlTapDownEvent will not end up causing a tap.GestureTapCancelCallback
FlTapUpEventWhen a pointer that will trigger a tap has stopped contacting the screen.GestureTapUpCallback
FlLongPressStartCalled When a pointer has remained in contact with the screen at the same location for a long period of time.GestureLongPressStartCallback
FlLongPressMoveUpdateWhen a pointer is moving after being held in contact at the same location for a long period of time. Reports the new position and its offset from the original down position.GestureLongPressMoveUpdateCallback
FlLongPressEndWhen a pointer stops contacting the screen after a long press gesture was detected. Also reports the position where the pointer stopped contacting the screen.GestureLongPressEndCallback
FlPointerEnterEventThe pointer has moved with respect to the device while the pointer is or is not in contact with the device, and it has entered our chart.PointerEnterEventListener
FlPointerHoverEventThe pointer has moved with respect to the device while the pointer is not in contact with the device.PointerHoverEventListener
FlPointerExitEventThe pointer has moved with respect to the device while the pointer is or is not in contact with the device, and exited our chart.PointerExitEventListener

ExtraLinesData

PropNameDescriptiondefault value
extraLinesOnTopdetermines to paint the extraLines over the trendline or below ittrue
horizontalLineslist of HorizontalLine to draw on the chart[]
verticalLineslist of VerticalLine to draw on the chart[]

HorizontalLine

PropNameDescriptiondefault value
ydraw straight line from left to right of the chart with dynamic y valuenull
colorcolor of the lineColors.black
gradientgradient of the line (you have to provide either color or gradientnull
strokeWidthstrokeWidth of the line2
strokeCapstrokeCap of the line,e.g. Setting to StrokeCap.round will draw the tow ends of line rounded. NOTE: this might not work on dash lines.StrokeCap.butt
imageimage to annotate the line. the Future must be complete at the time this is received by the chartnull
sizedPictureSizedPicture uses an svg to annotate the line with a picture. the Future must be complete at the time this is received by the chartnull
labela HorizontalLineLabel object with label parametersnull

VerticalLine

PropNameDescriptiondefault value
xdraw straight line from bottom to top of the chart with dynamic x valuenull
colorcolor of the lineColors.black
gradientgradient of the line (you have to provide either color or gradientnull
strokeWidthstrokeWidth of the line2
strokeCapstrokeCap of the line,e.g. Setting to StrokeCap.round will draw the tow ends of line rounded. NOTE: this might not work on dash lines.StrokeCap.butt
imageimage to annotate the line. the Future must be complete at the time this is received by the chartnull
sizedPictureSizedPicture uses an svg to annotate the line with a picture. the Future must be complete at the time this is received by the chartnull
labela VerticalLineLabel object with label parametersnull

SizedPicture

PropNameDescriptiondefault value
Picturea Dart UI Picture which should be derived from the svg. see example for how to get a Picture from an svg.null
widththe width of the picturenull
heightthe height of the picturenull

HorizontalLineLabel

PropNameDescriptiondefault value
showDetermines showing or not showing labelfalse
paddingEdgeInsets object with label padding configurationEdgeInsets.zero
styleTextStyle which determines label text styleTextStyle(fontSize: 11, color: line.color)
alignmentAlignment with label position relative to lineAlignment.topLeft
directionDirection of the text (horizontal, vertical, horizontalMirrored, verticalMirrored)LabelDirection.horizontal
labelResolverGetter function returning label titledefaultLineLabelResolver

VerticalLineLabel

PropNameDescriptiondefault value
showDetermines showing or not showing labelfalse
paddingEdgeInsets object with label padding configurationEdgeInsets.zero
styleTextStyle which determines label text styleTextStyle(fontSize: 11, color: line.color)
alignmentAlignment with label position relative to lineAlignment.topLeft
directionDirection of the text (horizontal, vertical, horizontalMirrored, verticalMirrored)LabelDirection.vertical
labelResolverGetter function returning label titledefaultLineLabelResolver

FLHorizontalAlignment

enum values {center, left, right}

FlErrorIndicatorData

PropNameDescriptiondefault value
showDetermines showing or not showing error indicator/thresholdtrue
painterA callback that allows you to provide a custom painter for the error indicatorFlSimpleErrorPainter()

FlErrorRange

PropNameDescriptiondefault value
lowerByLower value of the error range. It is subtracted from the spot value and shoul be positivenull
upperByUpper value of the error range. It is added to the spot value and shoul be positivenull

AxisSpotIndicator

PropNameDescriptiondefault value
xx value of the touched spotrequired
yy value of the touched spotrequired
AxisSpotIndicatorPaintera painter that is used to draw the touched spot indicator. You can use this to customize the appearance of the touched spot indicator (Or you can implement your own painter).AxisLinesIndicatorPainter()

SideTitleAlignment

OptionDescriptionIs Default
SideTitleAlignment.outsidePlaces the axis labels outside the chart areaYes
SideTitleAlignment.borderPlaces the axis labels along the border of the chart areaNo
SideTitleAlignment.insidePlaces the axis labels inside the border of the chart areaNo