flutter-charts icon indicating copy to clipboard operation
flutter-charts copied to clipboard

Too much horizontal padding

Open michalsrutek opened this issue 3 years ago • 1 comments

Let's say I have the following code.

import 'dart:math';

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

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: TestChart(),
        ),
      ),
    );
  }
}

class TestChart extends StatelessWidget {
  const TestChart({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final data = [
      4000.0,
      4138.0,
      3000.0,
      2000.0,
      2700.0,
      3000.0,
      3185.0,
      1800.0
    ];
    final barValues = data.map((e) => BarValue<void>(e)).toList();
    final maxValue = data.reduce(max);
    final horizontalStepSize = max(2, (maxValue ~/ 8)).toDouble();

    return Chart(
      state: ChartState.bar(
        ChartData([barValues]),
        itemOptions: const BarItemOptions(
          padding: EdgeInsets.symmetric(horizontal: 2),
        ),
        backgroundDecorations: [
          GridDecoration(
            horizontalAxisStep: horizontalStepSize,
            showVerticalGrid: false,
            showVerticalValues: true,
            showHorizontalValues: true,
            showTopHorizontalValue: true,
            horizontalLegendPosition: HorizontalLegendPosition.start,
            textStyle: Theme.of(context).textTheme.bodyText2,
            gridColor: Colors.black12,
            verticalAxisValueFromIndex: (index) => index.toString(),
          ),
        ],
      ),
    );
  }
}
Version 1.1.0 Version 2.0.0
v1 v2

As you can see, in version 1.1.0, a couple of the horizontal values in the 2-thousands are trimmed. This has been fixed in version 2.0.0, but there's also a lot of unnecessary horizontal padding.

michalsrutek avatar Dec 02 '21 10:12 michalsrutek

I've encountered this issue and more weird behavior that could be related to this, in the current version horizontal values are broken for a good UX, that padding conflicts with having a SelectedItemDecoration.

pablojimpas avatar Jun 21 '22 11:06 pablojimpas