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
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