Will Candlestick Chart be Supported?

[satrio1256]

Candlestick chart usually used in finance application. Is it will be supported in the future?

[imaNNeo]

Yes it will

[sachaarbonel]

Maybe we could adapt this implementation (MIT licensed) : candlesticks

[khanhnguyen-96]

Is there any plan for this new chart feature? this addition will be an amazing feature upgrade for the library.

[cuongloveit]

this is an amazing package but I can not implement in my project without candlestick chart :(

[manle93]

hope this Candlestick chart will be implemented soon! I really need it for my fintech project :(

[namtranx07]

please consider integrating candlestick charts like mp charts into this package. It will help almost all people

[yingshaoxo]

Still in waiting...

[cuong0993]

[sonjinho]

Is candlestick like this ? (created by fl_chart)

[cuong0993]

Is candlestick like this ? (created by fl_chart)

Yes. Can you share you code?

[sonjinho]

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

[sonjinho]

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),
                    );
                  }
                },
              ),
            ),
          )),
    );
  }
}

[cuong0993]

Thank you. It looks great

[dawoodt]

Hello @imaNNeo, is this still in-progress? Are there plans to add support for this soon?

[imaNNeo]

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.

[JaredEzz]

Any update on this @imaNNeo ?

[imaNNeo]

Any update on this @imaNNeo ?

Unfortunately nothing