LineChartBarData constructor

LineChartBarData({
  1. List<FlSpot> spots = const [],
  2. bool show = true,
  3. Color? color,
  4. Gradient? gradient,
  5. double barWidth = 2.0,
  6. bool isCurved = false,
  7. double curveSmoothness = 0.35,
  8. bool preventCurveOverShooting = false,
  9. double preventCurveOvershootingThreshold = 10.0,
  10. bool isStrokeCapRound = false,
  11. bool isStrokeJoinRound = false,
  12. BarAreaData? belowBarData,
  13. BarAreaData? aboveBarData,
  14. FlDotData dotData = const FlDotData(),
  15. FlErrorIndicatorData<LineChartSpotErrorRangeCallbackInput> errorIndicatorData = const FlErrorIndicatorData<LineChartSpotErrorRangeCallbackInput>(),
  16. List<int> showingIndicators = const [],
  17. List<int>? dashArray,
  18. Shadow shadow = const Shadow(color: Colors.transparent),
  19. bool isStepLineChart = false,
  20. LineChartStepData lineChartStepData = const LineChartStepData(),
})

BarChart draws some lines and overlaps them in the chart's view, You can have multiple lines by splitting them, put a FlSpot.nullSpot between each section. each line passes through spots, with hard edges by default, isCurved makes it curve for drawing, and curveSmoothness determines the curve smoothness.

show determines the drawing, if set to false, it draws nothing.

mainColors determines the color of drawing line, if one color provided it applies a solid color, otherwise it gradients between provided colors for drawing the line. Gradient happens using provided colorStops, gradientFrom, gradientTo. if you want it draw normally, don't touch them, check LinearGradient for understanding colorStops

barWidth determines the thickness of drawing line,

if isCurved is true, in some situations if the spots changes are in high values, an overshooting will happen, we don't have any idea to solve this at the moment, but you can set preventCurveOverShooting true, and update the threshold using preventCurveOvershootingThreshold to achieve an acceptable curve, check this issue to overshooting understand the problem.

isStrokeCapRound determines the shape of line's cap.

isStrokeJoinRound determines the shape of the line joins.

belowBarData, and aboveBarData used to fill the space below or above the drawn line, you can fill with a solid color or a linear gradient.

LineChart draws points that the line is going through spots, you can customize it's appearance using dotData.

there are some indicators with a line and bold point on each spot, you can show them by filling showingIndicators with indices you want to show indicator on them.

LineChart draws the lines with dashed effect if you fill dashArray.

If you want to have a Step Line Chart style, just set isStepLineChart true, also you can tweak the LineChartBarData.lineChartStepData.

Implementation

LineChartBarData({
  this.spots = const [],
  this.show = true,
  Color? color,
  this.gradient,
  this.barWidth = 2.0,
  this.isCurved = false,
  this.curveSmoothness = 0.35,
  this.preventCurveOverShooting = false,
  this.preventCurveOvershootingThreshold = 10.0,
  this.isStrokeCapRound = false,
  this.isStrokeJoinRound = false,
  BarAreaData? belowBarData,
  BarAreaData? aboveBarData,
  this.dotData = const FlDotData(),
  this.errorIndicatorData =
      const FlErrorIndicatorData<LineChartSpotErrorRangeCallbackInput>(),
  this.showingIndicators = const [],
  this.dashArray,
  this.shadow = const Shadow(color: Colors.transparent),
  this.isStepLineChart = false,
  this.lineChartStepData = const LineChartStepData(),
})  : color =
          color ?? ((color == null && gradient == null) ? Colors.cyan : null),
      belowBarData = belowBarData ?? BarAreaData(),
      aboveBarData = aboveBarData ?? BarAreaData() {
  FlSpot? mostLeft;
  FlSpot? mostTop;
  FlSpot? mostRight;
  FlSpot? mostBottom;

  FlSpot? firstValidSpot;
  try {
    firstValidSpot =
        spots.firstWhere((element) => element != FlSpot.nullSpot);
  } catch (_) {
    // There is no valid spot
  }
  if (firstValidSpot != null) {
    for (final spot in spots) {
      if (spot.isNull()) {
        continue;
      }
      if (mostLeft == null || spot.x < mostLeft.x) {
        mostLeft = spot;
      }

      if (mostRight == null || spot.x > mostRight.x) {
        mostRight = spot;
      }

      if (mostTop == null || spot.y > mostTop.y) {
        mostTop = spot;
      }

      if (mostBottom == null || spot.y < mostBottom.y) {
        mostBottom = spot;
      }
    }
    mostLeftSpot = mostLeft!;
    mostTopSpot = mostTop!;
    mostRightSpot = mostRight!;
    mostBottomSpot = mostBottom!;
  }
}