Flutter interactive chart graph-CodePudding

I am searching for a package in flutter where I can create a chart with an interactable graph, where I can manipulate data with drag and drop

Example: An example chart

Now I want to ajust each value in that step diagram with drag and drop (up and down)

I found high charts and some of my collegues used that to do so but not in flutter so im not sure if that is possible there.

CodePudding user response：

Firstly, It's totally possible to create interactive charts with Flutter. You can either implement it yourself with a CustomPainter and some widgets.

Here's an example of a Curved basic chart.

CustomPaint(
   painter: CurveBackground(color: \\ yourColor),
   child: \\ your child
)


class CurveBackground extends CustomPainter {
  final Color color;

  CurveBackground({this.color});

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = color;
    paint.style = PaintingStyle.fill;

    var path = Path();

    path.moveTo(0, Dimens.size_30());
    path.quadraticBezierTo(size.width * 0.4, size.height * 0.1,
        size.width * 0.3, size.height * 0.3);
    path.quadraticBezierTo(size.width * 0.1, size.height * 0.6,
        size.width * 0.45, size.height * 0.7);
    path.quadraticBezierTo(
        size.width * 1, size.height * 0.9, size.width * 0.9, size.height * 1.0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

You can also check out some specialized packages as: syncfusion_flutter_charts I think you'll be interested in the step_line chart.

CodePudding user response：

Did you try charts_flutter or https://pub.dev/packages/syncfusion_flutter_charts?