Wrap the x-axis label in flutter chart - Overlapping label

Question

How to fix the label overlapping issue in flutter chart

And how to remove border color in stacked bar

 Expanded(
                child: charts.BarChart(
                  _seriesData,
                  barGroupingType: charts.BarGroupingType.stacked,
                  domainAxis: new charts.OrdinalAxisSpec(
                    renderSpec: new charts.SmallTickRendererSpec(
                      labelJustification:
                          charts.TickLabelJustification.outside,
                      // Tick and Label styling here.
                      labelStyle: new charts.TextStyleSpec(
                          fontSize: 9, // size in Pts.
                          color: charts.MaterialPalette.black),

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

Answer 1

You can use labelRotation to prevent overlaping.

  @override
  Widget build(BuildContext context) {
    var seriesList = _createSampleData(data);

    return charts.BarChart(
      seriesList,
      animate: animate,
      barGroupingType: charts.BarGroupingType.grouped,
      defaultRenderer: charts.BarRendererConfig(cornerStrategy: const charts.ConstCornerStrategy(30)),
      domainAxis: charts.OrdinalAxisSpec(
          renderSpec: charts.SmallTickRendererSpec(
              minimumPaddingBetweenLabelsPx: 0,
              labelAnchor: charts.TickLabelAnchor.centered,
              labelStyle: charts.TextStyleSpec(
                fontSize: 10,
                color: charts.MaterialPalette.black,
              ),
              labelRotation: 60,
              // Change the line colors to match text color.
              lineStyle: charts.LineStyleSpec(color: charts.MaterialPalette.black))),
    );
  }

Answer 2

This will resolve the white border issue:

defaultRenderer: charts.BarRendererConfig(
    groupingType: charts.BarGroupingType.stacked,
    strokeWidthPx: 2.0,
),

for labels issue you might consider rotation, in following version the added labelRotation that would help some. thought for 90 it will shrink the chart :/

charts_flutter: ^0.8.1