Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Too much horizontal padding #29

Open
michalsrutek opened this issue Dec 2, 2021 · 1 comment
Open

Too much horizontal padding #29

michalsrutek opened this issue Dec 2, 2021 · 1 comment
Assignees
Labels
bug Something isn't working

Comments

@michalsrutek
Copy link
Contributor

michalsrutek commented Dec 2, 2021

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.

@lukaknezic lukaknezic added the bug Something isn't working label Dec 2, 2021
@lukaknezic lukaknezic self-assigned this Dec 2, 2021
@pablojimpas
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants