I have SfCartesianChart and I want to disable visibility of the left legend(0,50,100). How can I do this?
This is my code:
SfCartesianChart(
plotAreaBorderWidth: 0, // X top line
plotAreaBorderColor: Colors.white24,
primaryXAxis: DateTimeAxis(
majorTickLines: const MajorTickLines(width: 0), // Little sticks below X line
majorGridLines: const MajorGridLines(
width: 0.5,
color: Colors.transparent,
),
axisLine: const AxisLine( // X bottom line
color: Colors.white24,
dashArray: <double>[5,5]
),
),
primaryYAxis: NumericAxis(
majorGridLines: const MajorGridLines(width: 1, color: Colors.white24, dashArray: <double>[5, 5]),
majorTickLines: const MajorTickLines(width: 0), // Little sticks on left side
axisLine: const AxisLine(
color: Colors.transparent, // Y left line
dashArray: <double>[5,5]
),
minimum: 0,
maximum: 100,
),
)
I tried to add => labelPosition: const ChartDataLabelPosition(0), but ide returns me an error => Generative enum constructors can only be used as targets of redirection.
Try using an enum constant, or a factory constructor.
labelStyle: TextStyle(color: Colors.transparent helps me but there is still a space and I don't know how to to remove this space
If you meet the same problem, just add this:
primaryYAxis: NumericAxis(
labelStyle: const TextStyle(
color: Colors.transparent,
fontSize: 0
),
),
Related
I have SfCartesianChart and I want to make a bottom line dashed. How to make it?
This is my code:
SfCartesianChart(
plotAreaBorderWidth: 0,
plotAreaBorderColor: Colors.white24,
primaryXAxis: DateTimeAxis(
majorGridLines: const MajorGridLines(
width: 0.5,
color: Colors.transparent,
),
),
primaryYAxis: NumericAxis(
majorGridLines: const MajorGridLines(width: 1, color: Colors.white24, dashArray: <double>[5, 5]),
minimum: 0,
maximum: 100
),
)
Have you tried playing with the dashArray property on the AxisLine? I.e.:
primaryXAxis: DateTimeAxis(
majorGridLines: const MajorGridLines(
width: 0.5,
color: Colors.transparent,
),
axisLine: AxisLine(
color: Colors.red,
dashArray: <double>[2.0, 1.0],
),
),
first time was working normal.i was reload chart SfRangeSelector start with wrong.i will check the values with help of debugger the values also correct.help me solve this bug .i add error screenshot in below.i have added code snippet for reference.
SfRangeSelectorTheme(
data: SfRangeSelectorThemeData(),
child:SfRangeSelector(
min: _min0,
max: _max0,
interval:15,
showLabels: true,
showTicks: false,
enableDeferredUpdate: false,
deferredUpdateDelay: 1000,
enableIntervalSelection: true,
dateFormat:DateFormat.Hm(),
dateIntervalType:DateIntervalType.minutes,
dragMode: SliderDragMode.both,
startThumbIcon: const Icon(
Icons.arrow_back_ios,
color: Colors.blue,
size: 20.0),
endThumbIcon: const Icon(
Icons.arrow_forward_ios,
color: Colors.blue,
size: 20.0),
// inactiveColor: Color.fromARGB(255,5, 90, 194),
activeColor: Color.fromARGB(255, 126, 184, 253),
labelPlacement: LabelPlacement.betweenTicks,
initialValues: _values0,
controller: _rangeController0,
onChanged: (SfRangeValues values) {
setState(() { });
},
child: Container(
color: Colors.blue[200],
height: 40,
padding: EdgeInsets.zero,
margin: EdgeInsets.zero,
child: SfCartesianChart(
primaryXAxis: DateTimeAxis(
minimum: _min0,
maximum: _max0,
intervalType:DateTimeIntervalType.minutes,
isVisible: false,
),
primaryYAxis: NumericAxis(
isVisible: false),
plotAreaBorderWidth: 0,
series: <SplineSeries<Data, DateTime>>[
SplineSeries<Data, DateTime>(
// borderColor: const Color.fromRGBO(0, 193, 187, 1),
color: Colors.blue,
dataSource:chartData,
xValueMapper: (Data sales, _) => sales.x ,
yValueMapper: (Data sales, _) => sales.y)
],
),
),
)
I tried to put a border to a container like this code:
Container(
padding: EdgeInsets.all(15.sp),
decoration: BoxDecoration(
// color: Colors.yellow,
border: Border.all(
color: kPrimaryColor,
width: 7,
style: BorderStyle.solid,
),
),
child: QrImage(
data: controller.generatedCode,
version: QrVersions.auto,
size: 300.0,
),
),
The code above gives me a complete border
the border of the QR code, I want to implement a border like it
Try this. It will work.
Container(
child: Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.green, spreadRadius: 3),
],
),
height: 50,
),
I found it, using dotted_border package:
Widget get customBorder {
Path customPath = Path()
..moveTo(0, 0)
..lineTo(0, 25)
..moveTo(0,0)
..lineTo(25, 0)
..moveTo(75,0)
..lineTo(100,0)
..lineTo(100,25)
..moveTo(0,75)
..lineTo(0, 100)
..lineTo(25, 100)
..moveTo(100,75)
..lineTo(100, 100)
..lineTo(75,100)
;
return DottedBorder(
customPath: (_) => customPath,
color: Colors.indigo,
dashPattern: [1, 1],
strokeWidth: 2,
child: Container(
height: 100,
width: 100,
color: Colors.green.withAlpha(20),
),
);
}
I need to find solution on how to change parameters of widget after onComplete function.
child: CircularCountDownTimer(
width: MediaQuery.of(context).size.width / 2,
height: MediaQuery.of(context).size.height / 2,
duration: 3,
fillColor: Colors.amber,
ringColor: Colors.green,
controller: _controller,
backgroundColor: Colors.white54,
strokeWidth: 10.0,
strokeCap: StrokeCap.round,
isTimerTextShown: true,
isReverse: false,
onComplete: () {},
textStyle: TextStyle(fontSize: 50.0, color: Colors.black),
),
Define a variable for the property. For example the color you want to change.
MaterialColor fillcolor = Colors.amber;
Then change it inside onComplete method
child: CircularCountDownTimer(
width: MediaQuery.of(context).size.width / 2,
height: MediaQuery.of(context).size.height / 2,
duration: 3,
fillColor: fillcolor,
ringColor: Colors.green,
controller: _controller,
backgroundColor: Colors.white54,
strokeWidth: 10.0,
strokeCap: StrokeCap.round,
isTimerTextShown: true,
isReverse: false,
onComplete: () {
setState(() {
fillcolor = Colors.purple
});
},
textStyle: TextStyle(fontSize: 50.0, color: Colors.black),
),
I have a fl_chart (pub), which is displayed below in the gifs. When transitioning data the painter paints outside of the chart's bounds. How could I add a clipper (or some other fix) to the chart below, so this bug does not occur? There is some code at the bottom & some images. fl_chart uses a CustomPainter to draw the charts, so maybe I could override something in the source code?
My quick fix (I removed the transition animation, but I'd like to use the animation):
Ignore the label bug on the y axis (on the left)
(If you don't see the bug look close on the right side)
I would like to use a transition like this, but without the chart going outside the boundaries:
Here is the code:
LineChartData mainData() {
return LineChartData(
lineTouchData: LineTouchData(
touchTooltipData: LineTouchTooltipData(
fitInsideHorizontally: true,
tooltipBgColor: Colors.white,
getTooltipItems: (List<LineBarSpot> touchedBarSpots) {
return touchedBarSpots.map((barSpot) {
return LineTooltipItem(
'${barSpot.y.toInt()}',
TextStyle(
fontFamily: 'Jost*',
fontSize: 15,
color: Colors.black,
),
);
}).toList();
}
),
getTouchedSpotIndicator: (LineChartBarData barData, List<int> spotIndexes) {
return spotIndexes.map((spotIndex) {
return TouchedSpotIndicatorData(
FlLine(
color: const Color.fromARGB(255, 77, 77, 77),
strokeWidth: 1,
dashArray: [4,4],
),
FlDotData(
getDotPainter: (spot, percent, barData, index) {
return FlDotCirclePainter(
radius: 5.5,
color: gradientColors[0],
strokeWidth: 2,
strokeColor: Colors.white,
);
},
),
);
}).toList();
}
),
gridData: FlGridData(
show: true,
getDrawingHorizontalLine: (value) {
return FlLine(
color: const Color.fromARGB(255, 98, 95, 161),
strokeWidth: 1,
dashArray: [4,4]
);
},
),
titlesData: FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 14,
textStyle:
const TextStyle(
color: Color.fromARGB(255, 181, 181, 181),
fontWeight: FontWeight.w300,
fontFamily: 'Jost*',
fontSize: 13,
),
getTitles: (value) {
return _labels[widget.timeType][value.toInt()] ?? '';
},
),
leftTitles: SideTitles(
showTitles: true,
textStyle: const TextStyle(
color: Color.fromARGB(255, 181, 181, 181),
fontWeight: FontWeight.w300,
fontFamily: 'Jost*',
fontSize: 16,
),
getTitles: (value) {
return (value.toInt()).toString();
},
reservedSize: 28,
margin: 12,
),
),
borderData:
FlBorderData(
show: true,
border: Border.symmetric(
horizontal: BorderSide(
color: const Color.fromARGB(255, 170, 170, 170),
width: 1.2
),
),
),
minX: 0,
maxX: _data[widget.timeType].length.toDouble()-1, //length of data set
minY: _data[widget.timeType].reduce(min).toDouble() - 1, //set to lowest v
maxY: _data[widget.timeType].reduce(max).toDouble() + 1, //set to highest v
lineBarsData: [
LineChartBarData(
spots: [
for (int i = 0; i < _data[widget.timeType].length; i++)
FlSpot(i.toDouble(), _data[widget.timeType][i].toDouble())
],
//FlSpot(2.6, 4),
isCurved: true,
colors: [
gradientColors[0],
],
barWidth: 2,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: true,
colors: gradientColors,
gradientColorStops: [0, 0.5, 1.0],
gradientFrom: const Offset(0, 0),
gradientTo: const Offset(0, 1),
),
),
],
);
}
there is a clipData property in the LinechartData
try to set it as FlClipData.all().