enhancement to support horizontal bar chart.

[kw2019ltd]

enhancement to support horizontal bar and stacked bar charts.

[j4nk3e]

I'm working on horizontal bar charts: https://github.com/juumixx/fl_chart/commits/horizontal-bar-chart

Things that are still not behaving nicely are backdraw bars and stack items. The rest should be production ready.

[ksankumar]

Any update for horizontal bar chart?

[eripe970]

Any update on this?

[imaNNeo]

I'm busy as a bee 😢😢 I appreciate your help and your PRs

[imaNNeo]

We added StackedBarChart feature. I remove it from the title. Now we just need the horizontal bar chart. Thanks!

[imaNNeo]

There is a temporary workaround mentioned here

[2shrestha22]

Any update on this?

[imaNNeo]

Not yet!

[2shrestha22]

There is a temporary workaround mentioned here @imaNNeoFighT Okay, do you have any idea about rotating TooltipIndicators,

[imaNNeo]

Yes, it is on the way here.

[sawirricardo]

Hi, @imaNNeoFighT any updates on this? Thank you

[imaNNeo]

Hi @sawirricardo. Not yet sir!

[spoeck]

Hi @imaNNeoFighT , is there any update about the horizontal bar chart?

[imaNNeo]

Hi @spoeck. Unfortunately, not yet!

[akshatj427]

Hi @imaNNeoFighT i have recently started working with BarCharts in flutter and came across the fl_chart library as it had the highest popularity score. The current requirement for the app i am developing requires us to create a horizontal bar chart, would love to see it added to the library, is there any update on when can we expect it to be added?

[imaNNeo]

Hi @akshatj427 Unfortunately, I'm not working full-time on this project (I hope I could do) I work here in my free and leisure time. That's why everything is a little bit slow.

At the moment you can give a thumb up to make it a high-priority issue. And also donation helps me a lot to put more time into it.

[imaNNeo]

I forgot to tell you that you can also contribute to developing this feature! You can start by reading our guidelines.

[vishnuagbly]

Hi @imaNNeoFighT, is there any update on this?

[Mohammedqwasmeh]

any update on this?

[ParsaBarati]

Any updates?

[huynhmytuan]

Have any updates for this?

[zs-dima]

Any updates are welcome

[alexandr-efimov]

Hi, are there any updates except workaround with rotation? Thanks

[svki0001]

Any updates?

[Flynn2018]

Does this plugin support horizontal bar chart now? If yes, where can find an example?

[StnFlu]

Any updates?

[KinsleySen]

hi guys, this might be a workaround not for everyone but i currently using the line chart as a horizontal bar and the result like this

[amirudev]

Is there any updates for Horizontal Bar Chart ?

[imaNNeo]

Hi, unfortunately, I couldn't find enough free time to do that yet. Please stay tuned, you can also be my sponsor to motivate me, then I can put more of time into this project.

[wanglang]

any update on this?

[ThanhSon232]

y'all can wrap a RotatedBox outside and set quarterTurns: 1 to make it horizontal. That can be a temporary solve for this.

[SereinYx]

hi all, I tried to solve this problem with the existing api, so you can refer to it. I use the 0.67.0 version

` RotatedBox(quarterTurns: -3, child: BarChart( BarChartData( ... ));

BarTouchTooltipData( rotateAngle: 270, );

SideTitleWidget( angle: 4.7, ); `

[Woozy1]

Hi, I am having problems with aligning bottom titles (left titles after rotating) to the left, everything i tried it just looks like its centered.

First i rotated chart with RotatedBox(quarterTurns: 1,

This is my code for titles:

Widget bottomTitlesLanguages(double value, TitleMeta meta) {
    const style = TextStyle(fontSize: 10);
    if (value.toInt() < 0 || value.toInt() >= languageData.length) {
      return Container();
    }
    return SideTitleWidget(
      axisSide: meta.axisSide,
      space: 10, // Add space to separate the labels from the axis
      child: Transform.rotate(
        angle: -1.5708, // Rotate 90 degrees counter-clockwise (in radians)
        child: Container(
          alignment: Alignment.centerLeft, // Align text to the left
          child: Text(
            languageData[value.toInt()].x,
            style: style,
          ),
        ),
      ),
    );
  }

[techouse]

A basic version of this could be easily implemented using FractionallySizedBox.

[joceperin]

Hi, I am having problems with aligning bottom titles (left titles after rotating) to the left, everything i tried it just looks like its centered.

First i rotated chart with RotatedBox(quarterTurns: 1,

This is my code for titles:

Widget bottomTitlesLanguages(double value, TitleMeta meta) {
    const style = TextStyle(fontSize: 10);
    if (value.toInt() < 0 || value.toInt() >= languageData.length) {
      return Container();
    }
    return SideTitleWidget(
      axisSide: meta.axisSide,
      space: 10, // Add space to separate the labels from the axis
      child: Transform.rotate(
        angle: -1.5708, // Rotate 90 degrees counter-clockwise (in radians)
        child: Container(
          alignment: Alignment.centerLeft, // Align text to the left
          child: Text(
            languageData[value.toInt()].x,
            style: style,
          ),
        ),
      ),
    );
  }

In your Container add the width

[jeerovan]

Meanwhile, if you just need bar-chart

import 'package:flutter/material.dart';

class BarChartWidget extends StatelessWidget {
  final List<double> barData; // Data for bar lengths
  final List<String> yLabels; // Labels for the Y-axis
  final double maxValue; // Maximum value to scale the bars

  const BarChartWidget({super.key, 
    required this.barData,
    required this.yLabels,
    required this.maxValue,
  }) : assert(barData.length == yLabels.length,
            "Bar data and labels must have the same length");

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: List.generate(
          barData.length,
          (index) {
            double barWidth = (barData[index] / maxValue) * 300; // Bar scaling
            return Padding(
              padding: const EdgeInsets.symmetric(vertical: 4.0),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // Y-axis label
                  SizedBox(
                    width: 150,
                    child: Text(
                      yLabels[index],
                      style: const TextStyle(fontSize: 14),
                    ),
                  ),
                  // Horizontal bar
                  Container(
                    height: 20,
                    width: barWidth,
                    color: Colors.blue,
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}