charts_flutter labels/text on x-axis overlapping each other

Question

I rendered bar chart using the charts_flutter package in flutter. But the domain label on x-axis overlap each other. Is there a way I can resolve this? Is there a way to either incline the text or increase the width of the chart so that it becomes horizontally scrollable?

I have tried searching for any solutions like labelspecs but could not reach a solution. Here's my code -

double maxheight = .80 * MediaQuery.of(context).size.height;
        var series = [
          new charts.Series(
            domainFn: (BarChartConfig barchartconfig, _) => barchartconfig.name,
            measureFn: (BarChartConfig barchartconfig, _) => barchartconfig.rowcount,
            colorFn: (BarChartConfig barchartconfig, _) => barchartconfig.color,
            id: 'Count',
            data: datacharts,
          )
        ]; 
        var chart = new charts.BarChart(
          series,
          animate: true,
          animationDuration: Duration(seconds: 2),
        );
        return SizedBox(
          height: maxheight,
          child: chart,
        );

Fresco

@WhiteHat no it does not solve my issue because it is for web.... I tried doing something similar but it just won't work – Fresco

child: charts.BarChart(series, animate: true), how to make clickable each bar in bar chart . – Achievement

Answer 1

@aswani-prakash answer is good,

If you want your labels visible, Then you can simply rotate x-axis labels.

BarChart(
    ...
    domainAxis: charts.OrdinalAxisSpec(
              renderSpec: charts.SmallTickRendererSpec(labelRotation: 60),
       ),
 ),

Dilatation

child: charts.BarChart(series, animate: true), how to make clickable each bar in bar chart . – Achievement

Answer 2

Could you post the build function of your chart widget?

Here's an example of adjusting the font size via domainAxis -> renderSpec -> labelStyle -> fontSize:

https://google.github.io/charts/flutter/example/axes/custom_font_size_and_color

Also, you may set minimumPaddingBetweenLabelsPx: 0 within the renderSpec object to adjust the padding between labels. The whole build function could then look somewhat like this:

  @override
  Widget build(BuildContext context) {
    return new charts.BarChart(
      seriesList,
      animate: animate,

      /// Assign a custom style for the domain axis.
      ///
      /// This is an OrdinalAxisSpec to match up with BarChart's default
      /// ordinal domain axis (use NumericAxisSpec or DateTimeAxisSpec for
      /// other charts).
      domainAxis: new charts.OrdinalAxisSpec(
          renderSpec: new charts.SmallTickRendererSpec(
              minimumPaddingBetweenLabelsPx: 0
              // Tick and Label styling here.
              labelStyle: new charts.TextStyleSpec(
                  fontSize: 18, // size in Pts.
                  color: charts.MaterialPalette.black),

              // Change the line colors to match text color.
              lineStyle: new charts.LineStyleSpec(
                  color: charts.MaterialPalette.black))),

      /// Assign a custom style for the measure axis.
      primaryMeasureAxis: new charts.NumericAxisSpec(
          renderSpec: new charts.GridlineRendererSpec(

              // Tick and Label styling here.
              labelStyle: new charts.TextStyleSpec(
                  fontSize: 18, // size in Pts.
                  color: charts.MaterialPalette.black),

              // Change the line colors to match text color.
              lineStyle: new charts.LineStyleSpec(
                  color: charts.MaterialPalette.black))),
    );
  }

Sokoto

Answer 3

Set a sliding viewport and ordinal viewport

          var chart = charts.BarChart(
                series,
                animate: true,
                domainAxis: new charts.OrdinalAxisSpec(
                    viewport: new charts.OrdinalViewport('AePS', 3),
                ),

                behaviors: [
                    new charts.SeriesLegend(),
                    new charts.SlidingViewport(),
                    new charts.PanAndZoomBehavior(),

                ],
            )

Whitewash