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

Mouse hover is not working without chart dimensions #37

Closed
re-ynd opened this issue Dec 24, 2021 · 2 comments
Closed

Mouse hover is not working without chart dimensions #37

re-ynd opened this issue Dec 24, 2021 · 2 comments

Comments

@re-ynd
Copy link

re-ynd commented Dec 24, 2021

When I try to show a Chart without specifying dimensions for its parent, the mouse hover and possibly other gesture functions are not working. As soon as I specify the width and height for the the container which encapsulated the Chart, the gestures work. Here is an example code which you can use to recreate the bug.

If you run the exact code in a browser, you can see the crosshairs. But if you remove width: 600 and/or height: 400 from the code below, the hover stops working and I cannot see the crosshairs.

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:graphic/graphic.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          // Commenting out the next two lines is causing the problem
          width: 600,
          height: 400,
          child: Chart(
            data: [
              {'year': DateTime(2010), 'price': 10},
              {'year': DateTime(2011), 'price': 8},
              {'year': DateTime(2012), 'price': 12},
              {'year': DateTime(2013), 'price': 16},
              {'year': DateTime(2014), 'price': 9},
              {'year': DateTime(2015), 'price': 17},
              {'year': DateTime(2016), 'price': 13},
            ],
            variables: {
              'year': Variable(
                accessor: (Map map) => map['year'] as DateTime,
              ),
              'price': Variable(
                accessor: (Map map) => map['price'] as int,
              ),
            },
            elements: [LineElement()],
            axes: [
              Defaults.horizontalAxis,
              Defaults.verticalAxis,
            ],
            selections: {
              'tooltipMouse': PointSelection(
                on: {GestureType.hover},
                devices: {PointerDeviceKind.mouse},
              ),
            },
            crosshair: CrosshairGuide(),
          ),
        ),
      ),
    );
  }
}

Any help is much appreciated. Thanks!

@entronad
Copy link
Owner

This is bug, when parent container has no indicated size, the chart will not inflate (Though painting is not affected).
It has been fixed in v0.7.0, it will always inflate the parent container now. Please upgrade and have a try.

@re-ynd
Copy link
Author

re-ynd commented Dec 29, 2021

Great! It works well with v0.7.0. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants