Chart are displayed incorrectly when axisMin and axisMax are set #94

iamiota · 2023-09-10T05:39:23Z

First of all, thank you for this amazing library, I really like the idea of using widgets to create charts.

I'm creating a line chart with target line(y: 3.6) and target area(y: 0 ~ 2).
I encountered some issues after setting axisMin and axisMax:

1. I have a `TargetAreaDecoration` from 0 to 2, when `axisMin` is set to 2, it is incorrectly displayed on the x-axis.

The solution I came up with is to dynamically modify the targetMin and targetMax of the TargetAreaDecoration based on axisMin and axisMax. For example, when axisMin is 1, I would change the TargetAreaDecoration's targetMin from 0 to 1, so it won't be displayed on the x-axis anymore.

2. From the blue area in the graph, it can be observed that the rendering behavior of `widgetItemBuilder` is inconsistent with that of `SparkLineDecoration`. The size of `widgetItemBuilder` is much larger than `SparkLineDecoration`.

I created a Position Widget within widgetItemBuilder and positioned the point widget using its top property. If the verticalMultiplier parameter can be added to widgetItemBuilder, I can calculate the correct position of the point:

Position(
    bottom: (_mappedValues[data.listIndex][data.itemIndex].max! - axisMin) * verticalMultiplier + 8,
)

3. The target line is also being displayed in the wrong place.

The solution I came up with is similar to the first issue. I dynamically modify verticalMultiplier * (3.6 - axisMin) based on axisMin and axisMax.

Do you have any suggestions? Thank you.

Codes

import 'package:charts_painter/chart.dart';
import 'package:flutter/material.dart';

const double axisWidth = 80.0;

class LineChart extends StatelessWidget {
  final bool useAxis;

  LineChart({Key? key, this.useAxis = false}) : super(key: key);

  final List<List<ChartItem<double>>> _mappedValues = [
    [ChartItem(2.0), ChartItem(5.0), ChartItem(8.0), ChartItem(3.0), ChartItem(6.0)]
  ];

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: MediaQuery.of(context).size.height / 2,
      child: Row(
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 32),
            child: AnimatedContainer(
              duration: const Duration(milliseconds: 350),
              width: axisWidth,
              child: DecorationsRenderer(
                [
                  HorizontalAxisDecoration(
                    asFixedDecoration: true,
                    lineWidth: 0,
                    axisStep: 2,
                    showValues: true,
                    endWithChart: false,
                    axisValue: (value) => '$value',
                    legendFontStyle: Theme.of(context).textTheme.bodyMedium,
                    valuesAlign: TextAlign.center,
                    valuesPadding: const EdgeInsets.only(left: -axisWidth, bottom: -10),
                    showLines: false,
                    showTopValue: true,
                  )
                ],
                ChartState<double>(
                  data: ChartData(
                    _mappedValues,
                    axisMin: useAxis ? 2 : null,
                    axisMax: useAxis ? 8 : null,
                    dataStrategy: const DefaultDataStrategy(stackMultipleValues: true),
                  ),
                  itemOptions: WidgetItemOptions(widgetItemBuilder: (data) {
                    return const SizedBox();
                  }),
                  backgroundDecorations: [
                    GridDecoration(
                      showVerticalValues: true,
                      verticalLegendPosition: VerticalLegendPosition.bottom,
                      verticalValuesPadding: const EdgeInsets.only(top: 8.0),
                      verticalAxisStep: 2,
                      gridWidth: 1,
                      textStyle: Theme.of(context).textTheme.labelSmall,
                    ),
                  ],
                ),
              ),
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 32),
              child: AnimatedChart<double>(
                width: MediaQuery.of(context).size.width - axisWidth - 8,
                duration: const Duration(milliseconds: 450),
                state: ChartState<double>(
                  data: ChartData(
                    _mappedValues,
                    axisMin: useAxis ? 2 : null,
                    axisMax: useAxis ? 8 : null,
                    dataStrategy: const DefaultDataStrategy(stackMultipleValues: true),
                  ),
                  itemOptions: WidgetItemOptions(widgetItemBuilder: (data) {
                    return Stack(
                      clipBehavior: Clip.none,
                      children: [
                        Container(color: Colors.blue.withOpacity(0.2)),
                        Positioned(
                          top: -24,
                          left: 0,
                          right: 0,
                          child: Column(
                            children: [
                              Center(
                                  child: Text(
                                      _mappedValues[data.listIndex][data.itemIndex].max.toString()))
                            ],
                          ),
                        ),
                        Positioned(
                          top: -5,
                          left: 0,
                          right: 0,
                          child: Column(
                            children: [
                              Center(
                                child: Container(
                                  width: 10,
                                  height: 10,
                                  decoration: BoxDecoration(
                                      color: Theme.of(context).colorScheme.primary,
                                      borderRadius: const BorderRadius.all(Radius.circular(8)),
                                      border: Border.all(
                                          width: 1.4,
                                          color: Theme.of(context).colorScheme.surface)),
                                ),
                              )
                            ],
                          ),
                        ),
                      ],
                    );
                  }),
                  foregroundDecorations: [],
                  backgroundDecorations: [
                    GridDecoration(
                      horizontalAxisStep: 2,
                      showVerticalGrid: false,
                      showVerticalValues: true,
                      verticalLegendPosition: VerticalLegendPosition.bottom,
                      verticalValuesPadding: const EdgeInsets.only(top: 8.0),
                      verticalAxisStep: 1,
                      gridColor: Theme.of(context).colorScheme.outline.withOpacity(0.3),
                      dashArray: [8, 8],
                      gridWidth: 1,
                      textStyle: Theme.of(context).textTheme.labelSmall,
                    ),
                    WidgetDecoration(
                      widgetDecorationBuilder:
                          (context, chartState, itemWidth, verticalMultiplier) {
                        return Padding(
                          padding: chartState.defaultMargin,
                          child: Stack(
                            children: [
                              Positioned(
                                right: 0,
                                left: 0,
                                bottom: verticalMultiplier * 3.6,
                                child: CustomPaint(painter: DashedLinePainter()),
                              ),
                            ],
                          ),
                        );
                      },
                    ),
                    TargetAreaDecoration(
                      targetAreaFillColor: Theme.of(context).colorScheme.error.withOpacity(0.6),
                      targetLineColor: Colors.transparent,
                      lineWidth: 0,
                      targetMax: 2,
                      targetMin: 0,
                    ),
                    SparkLineDecoration(
                      lineWidth: 2,
                      lineColor: Theme.of(context).colorScheme.primary,
                      smoothPoints: true,
                      listIndex: 0,
                    ),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

class DashedLinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    double dashWidth = 8, dashSpace = 8, startX = 0;
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 1;
    while (startX < size.width) {
      canvas.drawLine(Offset(startX, 0), Offset(startX + dashWidth, 0), paint);
      startX += dashWidth + dashSpace;
    }
  }

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

The text was updated successfully, but these errors were encountered:

lukaknezic · 2023-09-11T12:12:03Z

Hi @iamiota

Thanks for detailed report. I was able to reproduce it with your code easily and fixing it right now. There is a issue when calculating size for widgets when axisMin is set. I will add some tests to cover this case as well so we can be sure that values are displayed correctly 😄

iamiota · 2023-09-20T04:54:12Z

@lukaknezic Hi Luka, thank you for your fix.❤️
I have tried the latest code, and the size of the widget is now correct.

However, I have encountered another issue when dynamically modifying the chart data.
If _mappedValues, axisMin and axisMax are the props of LineChart, and when the props change according to the following, the chart throws repeat errors: 'BoxConstraints has a negative minimum height.'
Additionally, in the video, it can be observed that the animation of the line extends beyond the horizontal axis area.
I used ClipRect to clip the AnimatedChart to prevent the line animation from being drawn across the full screen.

final List<List<ChartItem<double>>> _mappedValues = [
   [ChartItem(2.0), ChartItem(5.0), ChartItem(8.0), ChartItem(3.0), ChartItem(6.0)]
];
axisMin: 2
axisMax: 8

/// AnimatedChart's duration: const Duration(milliseconds: 500),
/// If milliseconds = 30, everything is good.
/// data change to

final List<List<ChartItem<double>>> _mappedValues = [
   [ChartItem(32.0), ChartItem(35.0), ChartItem(38.0), ChartItem(33.0), ChartItem(36.0)]
];
axisMin: 32
axisMax: 38

Sep-20-2023.18-47-26.mp4

lukaknezic · 2023-10-13T11:39:32Z

negative minimum height should also be fixed, in same branch 😄

lukaknezic self-assigned this Sep 11, 2023

lukaknezic added the bug Something isn't working label Sep 11, 2023

lukaknezic linked a pull request Sep 12, 2023 that will close this issue

Axis min axis max fix #95

Open

iamiota referenced this issue in iamiota/flutter-charts Sep 23, 2023

Limit the minimum height of the layout to 0.

d00c7cd

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chart are displayed incorrectly when axisMin and axisMax are set #94

Chart are displayed incorrectly when axisMin and axisMax are set #94

iamiota commented Sep 10, 2023 •

edited

lukaknezic commented Sep 11, 2023

iamiota commented Sep 20, 2023 •

edited

lukaknezic commented Oct 13, 2023

Chart are displayed incorrectly when axisMin and axisMax are set #94

Chart are displayed incorrectly when axisMin and axisMax are set #94

Comments

iamiota commented Sep 10, 2023 • edited

1. I have a TargetAreaDecoration from 0 to 2, when axisMin is set to 2, it is incorrectly displayed on the x-axis.

2. From the blue area in the graph, it can be observed that the rendering behavior of widgetItemBuilder is inconsistent with that of SparkLineDecoration. The size of widgetItemBuilder is much larger than SparkLineDecoration.

3. The target line is also being displayed in the wrong place.

Codes

lukaknezic commented Sep 11, 2023

iamiota commented Sep 20, 2023 • edited

lukaknezic commented Oct 13, 2023

iamiota commented Sep 10, 2023 •

edited

1. I have a `TargetAreaDecoration` from 0 to 2, when `axisMin` is set to 2, it is incorrectly displayed on the x-axis.

2. From the blue area in the graph, it can be observed that the rendering behavior of `widgetItemBuilder` is inconsistent with that of `SparkLineDecoration`. The size of `widgetItemBuilder` is much larger than `SparkLineDecoration`.

iamiota commented Sep 20, 2023 •

edited