Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I set the max height on a Flutter Horizontal Bar Chart?

I'm using the horizontal bar chart for flutter that autosizes the bar heights.

https://google.github.io/charts/flutter/example/bar_charts/horizontal_bar_label.html

enter image description here

When I have a single bar as in this example I want to fix a maxheight (e.g. 10px) for the bar. How is this configured?

I'm looking at the constructor here but I haven't found a solution https://pub.dev/documentation/charts_flutter/latest/flutter/BarChart-class.html

      child: SizedBox(
        width: 300.0,
        height: 250.0,
        child: charts.BarChart(
          [
            charts.Series<OrdinalSales, String>(
                id: 'Sales',
                domainFn: (OrdinalSales sales, _) => sales.year,
                measureFn: (OrdinalSales sales, _) => sales.sales,
                data: localData,
                colorFn: (_, __) =>
                    charts.MaterialPalette.green.shadeDefault,
                labelAccessorFn: (OrdinalSales sales, _) =>
                    'Category 1: ${sales.sales.toString()}')
          ],
          animate: true,
          vertical: false,
          barRendererDecorator: new charts.BarLabelDecorator<String>(labelPosition: charts.BarLabelPosition.inside
          ),
          domainAxis:
          new charts.OrdinalAxisSpec(renderSpec: new charts.NoneRenderSpec()),
        ),
      ),
like image 787
user1961 Avatar asked May 27 '19 15:05

user1961


People also ask

How do you make a horizontal bar graph in flutter?

Horizontal bar chart using the column chart typeStep 1: First, declare and initialize the chartData with the required data source. Step 2: Then, initialize the SfCartesianChart and set the isTransposed property to true. // Setting isTransposed to true to render horizontally.


2 Answers

Workaround

You can try to wrap BarChart in to SizedBox, wrapped with SingleChildScrollView.

In pseudocode

- SingleChildScrollView
       - SizedBox
              - charts.BarChart

Flutter

SingleChildScrollView(
  child: SizedBox(
    height: 2000,
    child: HorizontalBarLabelChart(
      getData(),
    ),
  ),
),

Size calculation

Height of the SizedBox can be calculated base on number of data, e.g.:

numerOfElements * 50

Before

For 100 elements

enter image description here

After

For 100 elements (so height is 5000 because 100 * 50)

enter image description here

like image 194
Boken Avatar answered Sep 25 '22 02:09

Boken


Try to do this -

ConstrainedBox(
  constraints: BoxConstraints.expand(height: 50.0), // adjust the height here
  child: Your_chart_here, // place your chart here
),
like image 41
Harsh Kashyap Avatar answered Sep 22 '22 02:09

Harsh Kashyap