Home > Mobile >  fl_charts Barchart title issues. switch case
fl_charts Barchart title issues. switch case

Time:02-03

I don´t know why this switch it's not working, its a copy of the code example in fl_charts doc. But appears in the default case in all the bars.The only differnce is the way to ad the barchardata. I use two List directly, but the chart work well, the problem is the titles.

My chart widget.

EDIT

I know where is the problem, but I don´t know the solution.

The problem is in BarChartGroupData( x: barChartX.length . barChartX.length is an int (10) in this case, and i need to reference to the index of the list (0-9). Doesn't exist any property like indexOf() with the possibility to give me the int of each iteration of the List.generate previous in the widget?

  Expanded(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: BarChart(
            BarChartData(
              barTouchData: BarTouchData(
                touchTooltipData: BarTouchTooltipData(),
              ),
              alignment: BarChartAlignment.center,
              barGroups: List.generate(
                barChartX.length,
                (i) => BarChartGroupData(
                  x: barChartX.length,
                  barRods: [
                    BarChartRodData(
                      toY: relBarChart[i] * 10,
                      color: Color.fromARGB(198, 74, 78, 74),
                      width: 10.0,
                      borderRadius: BorderRadius.circular(10),
                      backDrawRodData: BackgroundBarChartRodData(
                        show: true,
                        color: Colors.grey,
                      ),
                    ),
                  ],
                ),
              ),
              titlesData: FlTitlesData(
                bottomTitles: AxisTitles(
                  sideTitles: SideTitles(
                      getTitlesWidget: getTitles,
                      showTitles: true,
                      reservedSize: 38),
                ),
              ),
            ),
          ),
        ),
      ),

and my title widget

 Widget getTitles(double value, TitleMeta meta) {
const style = TextStyle(
  color: Colors.red,
  fontWeight: FontWeight.bold,
  fontSize: 14,
);
Widget text;
switch (value.toInt()) {
  case 0:
    text = const Text('M', style: style);
    break;
  case 1:
    text = const Text('T', style: style);
    break;
  case 2:
    text = const Text('W', style: style);
    break;
  case 3:
    text = const Text('T', style: style);
    break;
  case 4:
    text = const Text('F', style: style);
    break;
  case 5:
    text = const Text('S', style: style);
    break;
  case 6:
    text = const Text('S', style: style);
    break;
  case 7:
    text = const Text('F', style: style);
    break;
  case 8:
    text = const Text('S', style: style);
    break;
  case 9:
    text = const Text('S', style: style);
    break;
  default:
    text = const Text('default', style: style);
    break;
}
return SideTitleWidget(
  axisSide: meta.axisSide,
  space: 16,
  child: text,
);

}

CodePudding user response:

To solve it is very easy I only need to put x: i,

Expanded(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: BarChart(
            BarChartData(
              barTouchData: BarTouchData(
                touchTooltipData: BarTouchTooltipData(),
              ),
              alignment: BarChartAlignment.center,
              barGroups: List.generate(
                barChartX.length,
                (i) => BarChartGroupData(
                  x: i,
                  barRods: [
                    BarChartRodData(
                      toY: relBarChart[i] * 10,
                      color: Color.fromARGB(198, 74, 78, 74),
                      width: 10.0,
                      borderRadius: BorderRadius.circular(10),
                      backDrawRodData: BackgroundBarChartRodData(
                        show: true,
                        color: Colors.grey,
                      ),
                    ),
                  ],
                ),
              ),
              titlesData: FlTitlesData(
                bottomTitles: AxisTitles(
                  sideTitles: SideTitles(
                      getTitlesWidget: getTitles,
                      showTitles: true,
                      reservedSize: 38),
                ),
              ),
            ),
          ),
        ),
      ),
  • Related