Home > Net >  Is there any way to show different color horizontal lines in line chart?
Is there any way to show different color horizontal lines in line chart?

Time:09-17

enter image description hereI'm implementing line chart in flutter i have draw the line chart but i need to show horizontal lines in different colors. Is there any way to get that? Here is the attached image what i want to achieve.

LineChartData(
      minX: 0,
      maxX: 11,
      minY: 0,
      maxY: 6,
      titlesData: LineTitles.getTitleData(),
      gridData: FlGridData(
        show: true,
        getDrawingHorizontalLine: (value) {
          return FlLine(
            color: Colors.grey,
            strokeWidth: 1,
          );
        },
        drawVerticalLine: true,
        getDrawingVerticalLine: (value) {
          return FlLine(
            color: Colors.grey,
            strokeWidth: 1,
          );
        },
      ),
      borderData: FlBorderData(
        show: true,
        border: Border.all(color: Colors.grey, width: 1),
      ),
      lineBarsData: [
        LineChartBarData(
          spots: [
            FlSpot(4.9, 5),
            FlSpot(6.8, 2.5),
            FlSpot(8, 4),
            FlSpot(9.5, 3),
            FlSpot(11, 4),
          ],
          isCurved: true,
          barWidth: 3,
        ),
      ],
    ),[![I need to show the orange and red horizontal lines][1]][1]

CodePudding user response:

Yes you can check gridline colors in fl_chart. You've already used function with which you can modify these colors which is getDrawingHorizontalLine().

getDrawingHorizontalLine: (value) {
      if(value == 1) {
        return FlLine(
          color: Colors.red,
          strokeWidth: 2,
        );
      } else if (value == 2 ) {
        return FlLine(
          color: Colors.yellow,
          strokeWidth: 2,
        );
      } else {
        return FlLine(
          color: Colors.grey,
          strokeWidth: 2,
        );
      }
    }

Now here as you can see I've added condition that if values are 1 or 2 then gridline colors should be red & yellow respectively. Now this is the ugly way to put condition to change color but you can do it dynamically yourself.

If you want to change vertical gridlines then you should use getDrawingVerticalLine() to change color values.

You can see my screenshot for output below.enter image description here

  • Related