fl_chart Documentation

In version 0.67.0, the static Color tooltipBgColor property was replaced with a callback Color Function(spot) getTooltipColor. This change allows for customizing the tooltip background color dynamically based on the specific data point (spot) being touched. This applies to BarChartData, LineChartData, and ScatterChartData.

// For BarChartData
BarChartData(
  barTouchData: BarTouchData(
    touchTooltipData: BarTouchTooltipData(
      getTooltipColor: (BarChartGroupData group) => Colors.blueGrey,
    ),
  ),
)

// For LineChartData
LineChartData(
  lineTouchData: LineTouchData(
    touchTooltipData: LineTouchTooltipData(
      getTooltipColor: (LineBarSpot touchedSpot) => Colors.blueGrey,
    ),
  ),
)

// For ScatterChartData
ScatterChartData(
  scatterTouchData: ScatterTouchData(
    touchTooltipData: ScatterTouchTooltipData(
      getTooltipColor: (ScatterSpot touchedBarSpot) => Colors.blueGrey,
    ),
  ),
)

For advanced control, such as implementing custom zoom/pan buttons or resetting the chart state, provide a TransformationController within your FlTransformationConfig.

Warning: When using a custom TransformationController, the library does not prevent the chart from moving out of the visible screen area. You are responsible for implementing logic to keep the chart within bounds and within transformation limits.

class ChartWithControls extends StatefulWidget {
  @override
  State<ChartWithControls> createState() => _ChartWithControlsState();
}

class _ChartWithControlsState extends State<ChartWithControls> {
  late TransformationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TransformationController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AspectRatio(
          aspectRatio: 1.4,
          child: LineChart(
            LineChartData(...),
            transformationConfig: FlTransformationConfig(
              scaleAxis: FlScaleAxis.horizontal,
              minScale: 1.0,
              maxScale: 25.0,
              transformationController: _controller,
            ),
          ),
        ),
        Row(
          children: [
            IconButton(
              icon: Icon(Icons.zoom_in),
              onPressed: () {
                _controller.value *= Matrix4.diagonal3Values(1.1, 1.1, 1);
              },
            ),
            IconButton(
              icon: Icon(Icons.zoom_out),
              onPressed: () {
                _controller.value *= Matrix4.diagonal3Values(0.9, 0.9, 1);
              },
            ),
            IconButton(
              icon: Icon(Icons.refresh),
              onPressed: () {
                _controller.value = Matrix4.identity();
              },
            ),
          ],
        ),
      ],
    );
  }
}

Starting from version 0.50.0, the way solid colors and gradients are applied has changed. Instead of using a list of colors and various offset/stop properties, you now use explicit color or gradient properties. This change affects several classes including BarChartRodData, BackgroundBarChartRodData, BarAreaData, BetweenBarsData, and LineChartBarData.

• For a solid color: Use the color property with a single Color object.
• For a gradient: Use the gradient property with a Flutter Gradient object (e.g., LinearGradient, RadialGradient).

You must provide exactly one of these properties.

// Solid Color
LineChartBarData(
  color: Colors.red
)

// Linear Gradient
LineChartBarData(
  gradient: LinearGradient(
    colors: [Colors.green, Colors.blue],
    begin: Alignment.centerLeft,
    end: Alignment.centerRight,
  )
)

// Gradient with Stops
LineChartBarData(
  gradient: LinearGradient(
    colors: [Colors.green, Colors.blue],
    stops: [0.1, 0.10],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  )
)