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)
],
),
),
)
Related
I want to make a chart with color like below:
But, this is my first time to make a chart, I only know to give a single color, like mine below:
Here I attach the code of my chart:
Padding(
padding: const EdgeInsets.only(
bottom: 28,
left: 40,
right: 40,
),
child: SizedBox(
width: cardWidth,
child: SfCartesianChart(
margin: EdgeInsets.zero,
legend: Legend(
position: LegendPosition.top,
isVisible: true,
textStyle: body1(),
),
tooltipBehavior: TooltipBehavior(enable: true),
primaryXAxis: CategoryAxis(
labelStyle: body2(),
),
primaryYAxis: NumericAxis(labelStyle: body2()),
series: <ChartSeries<dynamic, dynamic>>[
SplineAreaSeries<ChartData, String>(
color: ColorName.brandPrimaryBlue,
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.data,
yValueMapper: (ChartData data, _) =>
data.totalTruck,
name: 'Truck',
markerSettings: const MarkerSettings(
isVisible: false,
color: ColorName.brandPrimaryBlue,
),
),
],
),
),
),
Any advice would be appreciated.
you can use gradient property of SplineAreaSeries like this:
SplineAreaSeries<SalesData, String>(
gradient: const LinearGradient(
colors: <Color>[
Color.fromARGB(80, 9, 59, 167),
Color(0xFF012168),
],
stops: <double>[0.2, 0.7],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
dataSource: <SalesData>[
SalesData('Jan', 35),
SalesData('Feb', 28),
SalesData('Mar', 34),
SalesData('Apr', 32),
SalesData('May', 40)
],
xValueMapper: (SalesData sales, _) =>
sales.year,
yValueMapper: (SalesData sales, _) =>
sales.sales,
// Enable data label
dataLabelSettings:
DataLabelSettings(isVisible: true),
markerSettings: const MarkerSettings(
isVisible: false,
color: Colors.red,
),
)
which will give you results like this:
which you can customize by chagning the colors values etc according to your choice.
My dropdown list has a multi-select feature. I have shown the list and selected Items are saved in an array called selectedClassList. Basically, it's a normal checkbox procedure.
But in the scenario of clicking a value called "any", I need to unselect all other items and need to mark "Any" as selected. The same is for other items, when a user clicks any of the other items, then item "any" should get unselected.
My code is like
DropdownButtonFormField2<dynamic>(
itemHeight: 40,
dropdownOverButton: false,
buttonWidth: double.infinity,
selectedItemHighlightColor: Colors.grey.shade300,
isExpanded: true,
value: widget.value,
dropdownElevation: 0,
itemPadding: const EdgeInsets.only(left: 15),
buttonDecoration: BoxDecoration(
border: Border.all(color: Colors.black87, width: 1),
borderRadius: BorderRadius.circular(5),
),
decoration: const InputDecoration.collapsed(
hintText: '',
border: InputBorder.none,
),
isDense: true,
offset: const Offset(0, -2),
iconSize: 20,
buttonHeight: 50,
buttonPadding: const EdgeInsets.only(left: 15, right: 10),
focusColor: const Color(0xffFFFFFF),
hint: const Text('Select One',
style: TextStyle(
fontSize: 14,
fontFamily: 'Poppins, Regular',
color: Color(0xffAAAAAA))),
style: const TextStyle(
fontSize: 14,
fontFamily: 'Poppins, Regular',
overflow: TextOverflow.ellipsis,
color: Color(0xff121212)),
iconOnClick: AnimatedRotation(
turns: 0.5,
duration: const Duration(milliseconds: 300),
child: Icon(Icons.arrow_down),
),
icon: AnimatedRotation(
turns: 1,
duration: const Duration(milliseconds: 300),
child: Icon(Icons.arrow_up),
),
dropdownDecoration: BoxDecoration(
border: Border.all(
color: Colors.black45,
width: 1,
),
borderRadius: const BorderRadius.all(Radius.circular(5)),
shape: BoxShape.rectangle),
dropdownMaxHeight: 200,
items: getClassDetails.data?.map((item) {
return DropdownMenuItem<dynamic>(
value: item,
enabled: false,
child: StatefulBuilder(
builder: (context, menuSetState) {
var _isSelected = selectedClass!
.where((element) =>
element.settingName == item.settingName)
.toList()
.isNotEmpty;
return InkWell(
onTap: () {
if (item.settingName == "Any") {
selectedClass!.clear();
}
if (_isSelected == true) {
selectedClass!.remove(item);
} else {
selectedClass!.add(item);
}
setState(() {});
menuSetState(() {});
},
child: Row(
children: [
_isSelected
? const Icon(Icons.check_box_outlined)
: const Icon(Icons.check_box_outline_blank),
const SizedBox(width: 16),
Text(
item.settingName.toString(),
style: const TextStyle(
fontSize: 14,
fontFamily: 'Poppins, Regular',
color: Color(0xff121212)),
),
],
),
);
},
),
);
}).toList(),
)
I am not good at explaining things. Kindly let me know if I made any mistake.
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
),
),
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],
),
),
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().