Step Y Axis missing Label. Bubble Indicator cut off at top.

[PlymouthRock]

We're having an issue when setting a Custom Scale chart to display the Y axis with steps set to 2.

• The step number below the top indicator is missing. This only happens when doing a non-debug build.
• The bubble indicator is cut off at the top

Thank you for your efforts on this widget!

`Container(
color: Colors.transparent,
height: 250,
child: BezierChart(
bezierChartScale: BezierChartScale.CUSTOM,
xAxisCustomValues: const [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
footerValueBuilder: (double value) {

              int hour = value.toInt();

              if(hour == 0) {
                return '12 am';
              } else if (hour < 12) {
                return '$hour am';
              } else {
                return '${hour > 12 ? hour - 12 : hour} pm';
              }
            },
            series: [
              BezierLine(
                lineColor: Colors.blue,
                lineStrokeWidth: 2.0,
                label: "feet",
                data: dataPoints,
              ),
            ],
            config: BezierChartConfig(
              verticalIndicatorStrokeWidth: 2.0,
              verticalIndicatorColor: Colors.grey.shade800,
              bubbleIndicatorColor: Colors.grey.shade800,
              displayYAxis: true,
              startYAxisFromNonZeroValue: false,
              stepsYAxis: 2,
              contentWidth: 1400,
              bubbleIndicatorTitleStyle: TextStyle(
                color: Colors.grey.shade800,
              ),
              bubbleIndicatorValueStyle: TextStyle(
                color: Colors.white
              ),
              yAxisTextStyle: TextStyle (
                fontSize: 14
              ),
              xAxisTextStyle: TextStyle (
                fontSize: 14
              ),
            ),
          )
        ),`

[PlymouthRock]

It looks like the missing step number and top number is hidden if you have a background color set. So this is no longer an issue.

[diegoveloper]

You can close the issue then :)

[PlymouthRock]

I still have an issue with the bubble indicator being cut off at the top. Is there some setting I'm missing?

[diegoveloper]

Could you add a simple code to reproduce the issue? What version of the package are you using?

…

On Mon, Aug 12, 2019, 5:45 AM Tim Ricciardi ***@***.***> wrote: I still have an issue with the bubble indicator being cut off at the top. Is there some setting I'm missing? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#34?email_source=notifications&email_token=ABFL3UANQ55YJSF6QT4REYTQEE5LFA5CNFSM4IK3UUGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4CFCJY#issuecomment-520376615>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABFL3UDGYZJ6P66GCHCIHEDQEE5LFANCNFSM4IK3UUGA> .

[diegoveloper]

That's because you are using a color on the parent container, check the samples I put inside the library

…

On Fri, Aug 16, 2019, 1:07 AM Dhuliang ***@***.***> wrote: @diegoveloper <https://github.com/diegoveloper> Thanks for great job ! But tooltip will be cut off . [image: image] <https://user-images.githubusercontent.com/40012139/63146926-2d72b980-c02f-11e9-8f4d-5a2e50ebb7f9.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#34?email_source=notifications&email_token=ABFL3UF6ZX2B53KTT7ISPFTQEY73FA5CNFSM4IK3UUGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4NYGBQ#issuecomment-521896710>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABFL3UDNH4RQ5K6MFUPY6NLQEY73FANCNFSM4IK3UUGA> .

[PlymouthRock]

I made the container colors Transparent and it's still cut off.

[PlymouthRock]

Here's what it looks like in Debug mode. I get that Red bar at the top.

[PlymouthRock]

All of your samples use whole numbers. Could it be that we are using decimals. So instead of 10 we have 10.2.

[diegoveloper]

Try using transparent color for the widget above the chart (hourly)

…

On Fri, Aug 16, 2019, 8:37 AM Tim Ricciardi ***@***.***> wrote: All of your samples use whole numbers. Could it be that we are using decimals. So instead of 10 we have 10.2. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#34?email_source=notifications&email_token=ABFL3UGRF2V5WH623ZWIAKLQE2UTDA5CNFSM4IK3UUGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4OUIKQ#issuecomment-522011690>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABFL3UBYNLU262A2LVE5IX3QE2UTDANCNFSM4IK3UUGA> .

[PlymouthRock]

Tried that. I don't think it's a color issue. I think the issue is the height calculation of the chart widget needs to be adjusted. Let me create a simple test example and see if I can recreate the issue. Maybe its my app.

[diegoveloper]

ok let me know if I can help you

[angel1st]

I have the similar issue, re bubble indicator, but it was cut off, when the chart scrolls to the leftmost side. See the screenshot below:

[PlymouthRock]

It looks like it's a combination of things that is causing the bubble to be cut off:

1. Setting the container height to 250
2. Having the highest Value be a decimal number
3. Setting a larger font size on the Y Axis

I modified sample1 to duplicate the issue.

Widget sample1(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.red,
        height: 250, //MediaQuery.of(context).size.height / 2,
        width: MediaQuery.of(context).size.width * 0.9,
        child: BezierChart(
          bezierChartScale: BezierChartScale.CUSTOM,
          xAxisCustomValues: const [0, 5, 10, 15, 20, 25, 30, 35],
          series: const [
            BezierLine(
              data: const [
                DataPoint<double>(value: 2, xAxis: 0),
                DataPoint<double>(value: 4, xAxis: 5),
                DataPoint<double>(value: 6, xAxis: 10),
                DataPoint<double>(value: 8, xAxis: 15),
                DataPoint<double>(value: 10.3, xAxis: 20),
                DataPoint<double>(value: 7, xAxis: 25),
                DataPoint<double>(value: 5, xAxis: 30),
                DataPoint<double>(value: 3, xAxis: 35),
              ],
            ),
          ],
          config: BezierChartConfig(
            verticalIndicatorStrokeWidth: 3.0,
            verticalIndicatorColor: Colors.black26,
            showVerticalIndicator: true,
            backgroundColor: Colors.red,
            displayYAxis: true,
            startYAxisFromNonZeroValue: false,
            stepsYAxis: 2,
            yAxisTextStyle: TextStyle(color: Colors.white, fontSize: 14),
          ),
        ),
      ),
    );
  }

[angel1st]

I decided to file a separate issue, since the both cases seem different to me.

[diegoveloper]

could you use flutter packages upgrade and try again?

[angel1st]

I rather wait until bubbleLabelCallback is merged, so I would try to kill two birds with one stone :-)

[PlymouthRock]

That fixed it! Bubble Indicator is no longer cut off at the top. Thanks!