customize x and y axis' colors separately

This commit is contained in:
TAJAOUART Mounir 2023-02-10 17:24:36 +01:00
parent bf8c339b86
commit ed7a9487ef
2 changed files with 12 additions and 5 deletions

View File

@ -76,6 +76,7 @@ class _MyHomePageState extends State<MyHomePage> {
child: RealTimeGraph( child: RealTimeGraph(
stream: stream.map((value) => value - 150), stream: stream.map((value) => value - 150),
supportNegativeValuesDisplay: true, supportNegativeValuesDisplay: true,
xAxisColor: Colors.black12,
), ),
), ),
), ),
@ -89,6 +90,7 @@ class _MyHomePageState extends State<MyHomePage> {
stream: stream.map((value) => value - 150), stream: stream.map((value) => value - 150),
supportNegativeValuesDisplay: true, supportNegativeValuesDisplay: true,
displayMode: ChartDisplay.points, displayMode: ChartDisplay.points,
xAxisColor: Colors.black12,
), ),
), ),
), ),

View File

@ -9,10 +9,12 @@ import 'point.dart';
class RealTimeGraph extends StatefulWidget { class RealTimeGraph extends StatefulWidget {
const RealTimeGraph({ const RealTimeGraph({
this.updateDelay = const Duration(milliseconds: 50), this.updateDelay = const Duration(milliseconds: 50),
this.supportNegativeValuesDisplay = false,
this.displayMode = ChartDisplay.line, this.displayMode = ChartDisplay.line,
this.displayYAxisValues = true, this.displayYAxisValues = true,
this.displayYAxisLines = true, this.displayYAxisLines = true,
this.axisColor = Colors.black87, this.xAxisColor = Colors.black87,
this.yAxisColor = Colors.black87,
this.graphColor = Colors.black45, this.graphColor = Colors.black45,
this.pointsSpacing = 3.0, this.pointsSpacing = 3.0,
this.graphStroke = 1, this.graphStroke = 1,
@ -22,7 +24,7 @@ class RealTimeGraph extends StatefulWidget {
this.minValue = 0, this.minValue = 0,
this.speed = 1, this.speed = 1,
Key? key, Key? key,
this.supportNegativeValuesDisplay = false,
}) : super(key: key); }) : super(key: key);
// Callback to build custom Y-axis text. // Callback to build custom Y-axis text.
@ -59,8 +61,11 @@ class RealTimeGraph extends StatefulWidget {
// The color of the graph. // The color of the graph.
final Color graphColor; final Color graphColor;
// The color of the X-axis line.
final Color xAxisColor;
// The color of the Y-axis line. // The color of the Y-axis line.
final Color axisColor; final Color yAxisColor;
// The minimum value of the Y-axis. // The minimum value of the Y-axis.
final double minValue; final double minValue;
@ -177,7 +182,7 @@ class RealTimeGraphState extends State<RealTimeGraph>
// Display the y-axis line // Display the y-axis line
if (widget.displayYAxisLines) if (widget.displayYAxisLines)
Container( Container(
color: widget.axisColor, color: widget.yAxisColor,
width: widget.axisStroke, width: widget.axisStroke,
height: double.maxFinite, height: double.maxFinite,
), ),
@ -235,7 +240,7 @@ class RealTimeGraphState extends State<RealTimeGraph>
? Alignment.center ? Alignment.center
: Alignment.bottomCenter, : Alignment.bottomCenter,
child: Container( child: Container(
color: widget.axisColor, color: widget.xAxisColor,
height: widget.axisStroke, height: widget.axisStroke,
width: double.maxFinite, width: double.maxFinite,
), ),