Home > Mobile >  Change Line Chart Axis Settings in Flutter
Change Line Chart Axis Settings in Flutter

Time:04-25

Currently working on an application that involves using the fl_charts dependency.

              return Container(
                padding: EdgeInsets.all(10),
                width: double.infinity,
                height: 200,
                child: LineChart(

                  LineChartData(
                      borderData: FlBorderData(show: false),
                      lineBarsData: [
                      LineChartBarData(spots: [
                      FlSpot(0, double.parse(yParam[0])),
                      FlSpot(1, double.parse(yParam[1])),
                      FlSpot(2, double.parse(yParam[2])),
                      FlSpot(3, double.parse(yParam[3])),
                      FlSpot(4, double.parse(yParam[4])),
                      FlSpot(5, double.parse(yParam[5])),
                      FlSpot(6, double.parse(yParam[6])),
                      FlSpot(7, double.parse(yParam[7])),
                      FlSpot(8, double.parse(yParam[8])),
                      FlSpot(9, double.parse(yParam[9])),
                      FlSpot(10, double.parse(yParam[10])),
                      FlSpot(11, double.parse(yParam[11])),
                      FlSpot(12, double.parse(yParam[12])),
                    ],
                      color: Colors.red,)
                  ]),
                ),
              );

enter image description here

As visible, the x-axis labels for the charts are not displaying correctly. I would like to remove the top x-axis labels and only show the bottom labels at a rotation of 60 degrees.

I have looked at the following reference but it seems these attributes do not exist for it or I cannot find where to insert the correct things.

The chart Data is being streamed in from Firebase database and updates through a streambuilder element.

Thanks a lot!

EDIT: Thanks to Tray below, I was able to find the answer

              return Container(
                padding: EdgeInsets.all(10),
                width: double.infinity,
                height: 200,
                child: LineChart(

                  LineChartData(
                      borderData: FlBorderData(show: false),
                      lineBarsData: [
                      LineChartBarData(spots: [
                      FlSpot(0, double.parse(yParam[0])),
                      FlSpot(1, double.parse(yParam[1])),
                      FlSpot(2, double.parse(yParam[2])),
                      FlSpot(3, double.parse(yParam[3])),
                      FlSpot(4, double.parse(yParam[4])),
                      FlSpot(5, double.parse(yParam[5])),
                      FlSpot(6, double.parse(yParam[6])),
                      FlSpot(7, double.parse(yParam[7])),
                      FlSpot(8, double.parse(yParam[8])),
                      FlSpot(9, double.parse(yParam[9])),
                      FlSpot(10, double.parse(yParam[10])),
                      FlSpot(11, double.parse(yParam[11])),
                      FlSpot(12, double.parse(yParam[12])),
                    ],
                      color: Colors.red,
                      )
                  ],
                    titlesData: FlTitlesData(
                    topTitles: AxisTitles(
                      sideTitles: SideTitles(showTitles: false),
                    ),
                    rightTitles: AxisTitles(
                      sideTitles: SideTitles(showTitles: false),
                    ),
                    bottomTitles: AxisTitles(
                      sideTitles: SideTitles(showTitles: true, reservedSize: 30),
                      ),
                    leftTitles: AxisTitles(
                      sideTitles: SideTitles(showTitles: true, reservedSize: 30),
                      ),
                      
                  ),
                  ),
                ),
              );

CodePudding user response:

Looking at https://github.com/imaNNeoFighT/fl_chart/blob/3f1a6aee638bb89a4a5ff9097737a74e116e4778/example/lib/line_chart/samples/line_chart_sample7.dart#L168 there may be an attribute called "topTitles". You can try setting that to false.

  • Related