Flutter Question posted in
The official Flutter documentation can be found here.

How do I make the Fl_Chart in Flutter have permanently visible and horizontal Indicator?

I have been trying to create an horizontal TouchedSpotIndicator on my FlChart in flutter and I want it to stay permanently(not just to be visible when chart is touched)
Similar to the effect of the current price in trading apps like the in the MT4 app as seen below;

enter image description here

Below is my code but this only shows the default vertical line and it also disappears after touching the chart;

        getTouchedSpotIndicator: (LineChartBarData barData, List<int> spotIndexes) {
          return spotIndexes.map((spotIndex) {
            final FlSpot spot = barData.spots[spotIndex];
            if (spot.x == 0 || spot.x == 6) {
              return null;
            }
            return TouchedSpotIndicatorData(

              FlLine(color: Color(0xFFFFAB56), strokeWidth: 2.5, dashArray: [7]),

              FlDotData(
                  show: true,
                  getDotPainter: (aa, bb, cc, dd) {

                    return FlDotCirclePainter(
                        color: Color(0xFFFFAB56),
                        radius: 7.5,
                        strokeWidth: 3.5,
                        strokeColor: Colors.white.withOpacity(0.5)
                    );
                  }
              ),
            );
          }).toList();
        },

I have searched the FLChart API and couldn’t get any solution to make the indicator;
(1) permanently visible
(2) to make the indicator an horizontal one.

Please suggest any help as it would be appreciated. Thank you for your time

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    adding this following to LineChartData as a parameter of LineChart itself fixed the problem;

    LineChart(
      lineChartData: 
        extraLinesData: ExtraLinesData(
          horizontalLines: [
            HorizontalLine(
              y: value.currentLargeGraphPrice,
              color: const Color(0xCA75C078),
              strokeWidth: 1,
              dashArray: [6, 3],
            ),
          ],
        ),
)

  2. 0

    Have you tried https://app.flchart.dev/#/line?
    Check the indicator properties on the horizontal middle line

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search