fl_chart
fl_chart copied to clipboard
Will Candlestick Chart be Supported?
Candlestick chart usually used in finance application. Is it will be supported in the future?
Yes it will
Maybe we could adapt this implementation (MIT licensed) : candlesticks
Is there any plan for this new chart feature? this addition will be an amazing feature upgrade for the library.
this is an amazing package but I can not implement in my project without candlestick chart :(
hope this Candlestick chart will be implemented soon! I really need it for my fintech project :(
please consider integrating candlestick charts like mp charts into this package. It will help almost all people
Still in waiting...
Is candlestick like this ? (created by fl_chart)
Is candlestick like this ? (created by fl_chart)
Yes. Can you share you code?
I use Barchart Group Data simple, @cuong0993
BarChartGroupData(x: 1, groupVertically: true, barRods: [ BarChartRodData( fromY: 2, toY: 10, width: 15, color: Colors.green, borderRadius: BorderRadius.zero), BarChartRodData(fromY: 0, toY: 15, width: 1, color: Colors.green) ])
full code
view
data
BarChart has issue for bottom AxisTitles So I use BarTouchData to show data #964
class CandleChart extends StatelessWidget {
const CandleChart({Key? key, required this.stockChartDataList})
: super(key: key);
final List<StockChartDataDTO> stockChartDataList;
@override
Widget build(BuildContext context) {
int i = 0;
// format for korean
const Color plusColor = Colors.red;
const Color minusColor = Colors.blue;
List<StockChartDataDTO> chartDataList = stockChartDataList;
var barChartGroups = List<BarChartGroupData>.empty(growable: true);
int minY = chartDataList[0].low;
int maxY = chartDataList[0].high;
for (var stockChartData in chartDataList) {
barChartGroups.add(
BarChartGroupData(
x: i,
groupVertically: true,
barRods: [
BarChartRodData(
fromY: stockChartData.open.toDouble(),
toY: stockChartData.close.toDouble(),
width: 3,
color: stockChartData.open < stockChartData.close
? plusColor
: minusColor,
borderRadius: BorderRadius.zero),
BarChartRodData(
fromY: stockChartData.low.toDouble(),
toY: stockChartData.high.toDouble(),
width: 1,
color: stockChartData.open < stockChartData.close
? plusColor
: minusColor,
)
],
),
);
i++;
minY = min(minY, stockChartData.low);
maxY = max(maxY, stockChartData.high);
}
debugPrint('${chartDataList.length}');
return BarChart(
BarChartData(
borderData: FlBorderData(
border: Border.all(style: BorderStyle.solid),
),
groupsSpace: 10,
barTouchData: BarTouchData(
touchTooltipData: BarTouchTooltipData(
tooltipBgColor: Colors.white,
getTooltipItem: (group, groupIndex, rod, rodIndex) {
var stockChartData = chartDataList[groupIndex];
int day = stockChartData.day;
var date = DateTime.parse(day.toString());
String touchData =
'open: ${stockChartData.open}\n close: ${stockChartData.close}\n high: ${stockChartData.high}\n low: ${stockChartData.low}\n day:${date.year % 100} . ${date.month} . ${date.day}';
return BarTooltipItem(
touchData,
TextStyle(
color: stockChartData.open < stockChartData.close
? plusColor
: minusColor,
fontWeight: FontWeight.bold,
fontSize: 10,
));
},
)),
barGroups: barChartGroups,
minY: minY.toDouble(),
maxY: maxY.toDouble(),
titlesData: FlTitlesData(
show: true,
leftTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
topTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
),
rightTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 30,
interval: 2500,
getTitlesWidget: (value, meta) {
int index = value.toInt();
if (value == meta.min || value == meta.max) {
return const SizedBox.shrink();
} else {
return Text(
meta.formattedValue,
style: const TextStyle(fontSize: 10),
);
}
},
),
),
)),
);
}
}
Thank you. It looks great
Hello @imaNNeo, is this still in-progress? Are there plans to add support for this soon?
Hello @imaNNeo, is this still in-progress? Are there plans to add support for this soon?
This is going to the first new chart type that we add. But I cannot guarantee any time-line to implement it.
Any update on this @imaNNeo ?
Any update on this @imaNNeo ?
Unfortunately nothing