CODEWITHSUNDEEP
flutterdartfl-chart
Chris
Chris

Reputation: 2314

FL Chart vertical dotted lines independent from dots

I am using FLChart in my app to display some charts. That is working just fine. However I would like to be able to draw some vertical dotted lines into my graph like this:

enter image description here

As you can see, some of them should also have Numbers on top of them. Ive searched for quite some time now but could not find anything like this.

I found somehting similar looking on their example :

enter image description here

But it is not quite the same. The lines should be independent from any dots. Is that possible?

Upvotes: 1

Views: 5887

Answers (2)

nauman mir
nauman mir

Reputation: 154

You can draw vertical dotted line with this code snippet. Line chart data has property named extraLinesData. You can use it like below. 

 return LineChartData(
 extraLinesData: ExtraLinesData(verticalLines: <VerticalLine>[
        VerticalLine(x: 2, color: Constants.PRIMARY_COLOR_1, dashArray: [4,4]),
      ],) ...,

Upvotes: 3

hnnngwdlch
hnnngwdlch

Reputation: 3051

If I understand your goal correctly, you simply want to get the result of the given example except for the dots for each data point.

You can get rid of the points by changing the FlDotData passed to the TouchedSpotIndicatorData. Going back to the example code you linked, you could replace:

FlDotData(
  show: true,
  getDotPainter: (spot, percent, barData, index) =>
      FlDotCirclePainter(
    radius: 8,
    color: lerpGradient(
      barData.colors,
      barData.colorStops!,
      percent / 100,
    ),
    strokeWidth: 2,
    strokeColor: Colors.black,
  ),
),

with:

FlDotData(
  show: false,
)

Upvotes: 2

Related Questions