Horizontal Bar Charts: Can I overlay labels on top of the bars?

This is a great tool!! Thank you so much for the hard work.

I am creating a dashboard in Flutter web app with multiple [fl_chart][1] widgets. I don't have a lot of real estate to spare. Currently I have four LineCharts and I'm trying to fit in a horizontal [BarChart][2].

So, each bar contains a label that indicates what the data point is. The problem is that the bar is most often not long enough to contain the label. This causes a right overflow error. Is there any way to have the labels overlay the bars themselves and display without an overflow?

I have attached a screenshot of my BarChart. I like how it looks except for the overflow and I would like the values (not the labels) to be right justified.


I have provided the code below. I am just using static data to flesh this out.

- DashboardScreen Widget
- UsageChartLanguagePair Widget
- LanguagePair Model Data

DashboardScreen Widget:

import 'package:project/widgets/usage_chart_language_pair.dart';
import 'package:project/models/language_pair_model.dart';

class DashboardPage extends StatefulWidget
{
const DashboardPage({ Key? key, required this.title }) : super(key: key);

final String title;

@override
State createState() => _DashboardPageState();
}

class _DashboardPageState extends State with AutomaticKeepAliveClientMixin
{
// All the other widgets

// fl_chart: Horizontal BarChart for Language Pairs
Row
(
children: const
[
Text( 'Language Pairs', style: TextStyle ( color: Colors.white, fontSize: 24.0 ), ),
Spacer(),
],
),

const SizedBox( height: kDefaultPadding, ),

...languagePairs.map
(
(e) => UsageCharLanguagePairs
(
percent: e.percent,
percentHighest: e.percentHighest,
languagePair: e.languagePair,
),
),

...
}

UsageChartLanguagePair Widget

import 'package:flutter/material.dart';
import 'package:project/config/constants.dart';

class UsageChartLanguagePair extends StatelessWidget
{
final double percent;
final double percentHighest;
final String languagePair;

const UsageChartLanguagePair
(
{
Key? key,
required this.percent,
required this.percentHighest,
required this.languagePair,
}
) : super(key: key);

@override
Widget build(BuildContext context)
{
return LayoutBuilder
(
builder: (context, constraints)
{
return Container
(
width: (percent / percentHighest) * constraints.maxWidth,
height: 30.0,
padding: const EdgeInsets.symmetric( horizontal: kDefaultPadding, ),
margin: const EdgeInsets.only(bottom: kDefaultPadding),
decoration: BoxDecoration
(
color: percent == percentHighest
? yellowColor.withOpacity(0.5)
: yellowColor.withOpacity(0.2),
borderRadius: BorderRadius.circular(30.0),
),
child: Row
(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:
[
Text( languagePair, style: const TextStyle( color: Colors.white, ), ),
Text( '$percent', style: const TextStyle( color: yellowColor, ), ),
],
),
);
}
);
}
}

LanguagePair Model Data:

class LanguagePairModel
{
final String languagePair;
final double percent;
final double percentHighest;

LanguagePairModel
({
required this.languagePair,
required this.percent,
required this.percentHighest,
});
}

List languagePairs =
[
LanguagePairModel( languagePair: 'English > Spanish', percent: 22.52, percentHighest: 22.52, ),
LanguagePairModel( languagePair: 'Portuguese > English', percent: 11.87, percentHighest: 22.52, ),
LanguagePairModel( languagePair: 'Spanish (US) > English', percent: 05.59, percentHighest: 22.52, ),
LanguagePairModel( languagePair: 'English > French', percent: 04.77, percentHighest: 22.52, ),
LanguagePairModel( languagePair: 'English > German', percent: 04.34, percentHighest: 22.52, ),
LanguagePairModel( languagePair: 'English > Korean', percent: 3.79, percentHighest: 22.52, ),
LanguagePairModel( languagePair: 'English > Serbian', percent: 2.80, percentHighest: 22.52, ),
LanguagePairModel( languagePair: 'Other', percent: 22.18, percentHighest: 22.52, ),
];

[1]: https://github.com/imaNNeo/fl_chart
[2]: https://github.com/imaNNeo/fl_chart/blob/master/repo_files/documentations/bar_chart.md
Thanks!

Steve

Start with the linked BarChart documentation and reproduce the supplied horizontal-bar layout from the UsageChartLanguagePair widget. Define done as supporting labels over the bars, avoiding right overflow, and right-justifying the values; the issue does not name a repository file or test to run.

Written by the indexing model from the issue text.