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

[imaNNeo]

Just to update you that I'm working on the Horizontal Bar Charts.
So, I decided to add a rotationQuarterTurns which is an integer and you can set a number to determine the clockwise rotation count.
the default value is 0, and if you want to have a Horizontal Bar Chart, you have to create a BarChart and change this value to 1 (which means 90° clockwise)

(We're using RotatedBox under the hood)

It's still in progress, but you can already take a look at it here: #1827

CleanShot.2024-12-25.at.19.29.20.mp4

[stephane-archer]

there is a simple package if you have simple requirements, I currently use this: https://pub.dev/packages/staked_horizontal_bar_chart

[vishnuagbly]

There is also an advanced bar chart graph, to support all alignments with popups and all. https://pub.dev/packages/advanced_bar_chart

…

On Fri, 27 Dec 2024, 4:06 pm Stéphane Archer, ***@***.***> wrote: there is a simple package if you have simple requirements, I currently use this: https://pub.dev/packages/staked_horizontal_bar_chart — Reply to this email directly, view it on GitHub <#113 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMWY3GXYTFH47N2VEBNDIY32HUUSVAVCNFSM4JOE4WEKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TENJWGM2TMNBQHE3Q> . You are receiving this because you commented.Message ID: ***@***.***>

[imaNNeo]

Please check #1827 and let me know if you have any feedback.

Btw, I just want to mention that the work that I have done is sponsored (financially) by the Intero The sniffers
A big thanks to them.

I need to add some documentation and then I think I'm done with the PR.
I also wait for your feedback.
Cheers!

[imaNNeo]

Hi everyone. I have a good news 🎉
HorizontalBarChart has just been added in 0.70.1.
Please take a look and let me know your feedback.

So simply we have a new property called rotationQuarterTurns which rotates the chart's content 90 degrees in each step.
0 is the default and vertical chart, 1 is horizontal (left to right) chart, 2 is top-down chart and ...

CleanShot.2025-01-06.at.22.24.49.mp4

Keep in mind that when you rotate the chart, you need to make sure that there's enough space to render your chart's content. Otherwise, you have to make some changes manually to fit it in the other direction.
For example, take a look at this gist

Thanks again to Intero The Sniffers for their financial support for this feature.