CODEWITHSUNDEEP
flutterchartsflutter-layout
Jarvis
Jarvis

Reputation: 1792

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

How to fix the label overlapping issue in flutter chart

And how to remove border color in stacked bar

er

 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),
                    ),
                  ),
                ),
              ),

Upvotes: 2

Views: 5833

Answers (4)

Ankit Mahadik
Ankit Mahadik

Reputation: 2435

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))),
    );
  }

enter image description here

Upvotes: 6

SHK
SHK

Reputation: 47

Since I had lots of configuration and performance issues with "charts_flutter". I made decision move to a popular web library chart flutter_echarts which take advantage of webview_flutter and their open source amazing library with a lot more configuration options. I purely moved for configuration issues and I was thinking that might hit to performance issue (because of whole webview concept) but fortunately I haven't. Highly recommended to check it out.

note: this change was not easy from data structure point of view since echart take string for its configuration and has different approach to the data grouping. But in my case It worth all the time I spent :)

Upvotes: 0

SHK
SHK

Reputation: 47

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

Upvotes: 2

Amir Vazirifar
Amir Vazirifar

Reputation: 151

check this out: https://stackoverflow.com/a/57201589/11551638 

var chart = charts.BarChart(
                series,
                animate: true,
/// 1- add this to have a default zoom in to solve the overlapping plus No. 2(down)

                domainAxis: new charts.OrdinalAxisSpec(
                    viewport: new charts.OrdinalViewport('AePS', 3),
                ),
                behaviors: [

                    new charts.SeriesLegend(),
/// 2- also for dealing with a lot of data specially for real-time graphs to scroll on the graph and more zoom in function
                    new charts.SlidingViewport(),
                    new charts.PanAndZoomBehavior(),
                ],
            )

my code:

          Expanded(
            child: charts.BarChart
            (_seriesBarData,
                animate: true,
                animationDuration: Duration(seconds:2),
              domainAxis: new charts.OrdinalAxisSpec(
                viewport: new charts.OrdinalViewport('AePS', 9),
              ),
                 behaviors: [
                   new charts.SlidingViewport(),
                   new charts.PanAndZoomBehavior(),
                   new charts.SeriesLegend(
                     entryTextStyle: charts.TextStyleSpec(
                        color: charts.MaterialPalette.black,
                        fontFamily: 'Normal',
                        fontSize: 15),
                   ),

Upvotes: 1

Related Questions