aeyrium/bezier-chart

Y axis Labels are overlapping.

organicintel opened this issue · 11 comments

Hi there, I have values starting at 150 with a max at 195. If the Y-axis starts at zero there is a big space below the chart so it is not very readable and the y-axis labels overlap each other. I would like my chart to start at 150 instead of zero so the decline or increase in the data points are more dramatic.

Here is a screenshot of what I'm experiencing.
https://pasteboard.co/IQj26LX.png
image

Here is a better image to show the chart decreasing.

image

Yes, I set it to false and it removes the 0 and if I leave it as default which is true it adds a 0 at the bottom of the Y-axis but I can't get the 150 to move to the bottom of the Y-axis.

Here is what I have set in my code.

config: BezierChartConfig( verticalIndicatorColor: Colors.black26, showVerticalIndicator: true, verticalIndicatorFixedPosition: false, backgroundColor: Colors.red[900], displayYAxis: true, startYAxisFromNonZeroValue: false, showDataPoints: true),

Here is some sample code I put together for you that demonstrates the issue I'm encountering.

`

class TestGraph extends StatelessWidget {
Widget build(BuildContext context) {
final fromDate = DateTime.now().subtract(Duration(days: 5));
final toDate = DateTime.now();

final date1 = DateTime.now().subtract(Duration(days: 0));
final date2 = DateTime.now().subtract(Duration(days: 1));
final date3 = DateTime.now().subtract(Duration(days: 2));
final date4 = DateTime.now().subtract(Duration(days: 3));
final date5 = DateTime.now().subtract(Duration(days: 4));
final date6 = DateTime.now().subtract(Duration(days: 5));

return Scaffold(
  appBar: AppBar(),
  body: Center(
    child: Container(
      color: Colors.red,
      height: MediaQuery.of(context).size.height / 2,
      width: MediaQuery.of(context).size.width,
      child: BezierChart(
        fromDate: fromDate,
        bezierChartScale: BezierChartScale.WEEKLY,
        toDate: toDate,
        selectedDate: toDate,
        series: [
          BezierLine(
            label: "Duty",
            data: [
              DataPoint<DateTime>(value: 150, xAxis: date1),
              DataPoint<DateTime>(value: 160, xAxis: date2),
              DataPoint<DateTime>(value: 175, xAxis: date3),
              DataPoint<DateTime>(value: 180, xAxis: date4),
              DataPoint<DateTime>(value: 185, xAxis: date5),
              DataPoint<DateTime>(value: 190, xAxis: date6),
            ],
          ),
        ],
        config: BezierChartConfig(
          verticalIndicatorStrokeWidth: 3.0,
          verticalIndicatorColor: Colors.black26,
          showVerticalIndicator: true,
          verticalIndicatorFixedPosition: false,
          backgroundColor: Colors.red,
          footerHeight: 30.0,
          displayYAxis: true,
          startYAxisFromNonZeroValue: false
        ),
      ),
    ),
  ),
);

}
}

`

Also, thank you for responding so quickly. It's very much appreciated.

Yes, I had already added some sample code in one of my comments.

https://github.com/aeyrium/bezier-chart/issues/68#issuecomment-575432262

Let me know if you need anything else.

Thank you

Ok, try this :

startYAxisFromNonZeroValue: true

And add the onMissingValue builder :

BezierLine(
            label: "Duty",
            data: [
              DataPoint<DateTime>(value: 150, xAxis: date1),
              DataPoint<DateTime>(value: 160, xAxis: date2),
              DataPoint<DateTime>(value: 175, xAxis: date3),
              DataPoint<DateTime>(value: 180, xAxis: date4),
              DataPoint<DateTime>(value: 185, xAxis: date5),
              DataPoint<DateTime>(value: 190, xAxis: date6),
            ],
            onMissingValue: (date) => 50.0,  //here set the minimum value
          ),

THANK YOU VERY MUCH!!!! That fixed my problem. I truly appreciate your help and super quick response and solution.

sure, you are welcome