Description:

stacked bar chart

stacked_bar_chart #
A Flutter package for creating different types of charts.This package gives developer the flexibility to customize their graph as well.

Features #


Plot graphs

Stacked Rounded Rectangle Graph
Stacked Rectangele Graph
Net Line Graph
Net Point Graph



Customize your graph

Select if you want to display the net line
change core color,line color as well as line width of the net line



Scrollable

The graphs plotted are scrollable



Provide data in json format

You can use the toMap() and fromMap() methods to provide your data in json format



Style your Labels

You can style both you X-axis and Y-axis Labels.



Callback on bar tap

A callback is provided on tap of each bar. Developer can use this feature as per their need.



Installation #
In the dependencies: section of your pubspec.yaml, add the following line:
stacked_bar_chart:
copied to clipboard
Then import it as :
import 'package:stacked_bar_chart/stacked_bar_chart.dart';
copied to clipboard
Graph Types #
1. Stacked Rounded Rectangle Graph #

A simple stacked bar graph with rounded borders.



To plot this graph pass the GraphType.StackedRounded in graphType. as shown below

graphType: GraphType.StackedRounded
copied to clipboard
You can also change the styling of the line and point plotted.The color,width etc. can be changed using the netLine parameter as :
netLine: NetLine(
showPointOnly: false,
showLine: true,
lineColor: Colors.blue,
pointBorderColor: Colors.black,
coreColor: Colors.white,
),
copied to clipboard



2. Stacked Rectangle Graph #


A simple stacked bar graph with no rounded borders. You can customize it in the same way as the stacked rounded rectangle graph.


To plot this graph pass the GraphType.StackedRect in graphType. as shown below


graphType: GraphType.StackedRect
copied to clipboard



3. Net Line Graph #


A simple line graph plotted with the net values of the data provided. The net values of a particular data is calculated and plotted.It can also be customized in the same way as stacked rounded rectangle graph.


To plot this graph pass the GraphType.StackedRect in graphType. as shown below


graphType: GraphType.LineGraph
copied to clipboard

4. Net Point Graph #


A simple plot of the net values of the data.You can customize the point core and it's outer border using the netPoint parameter.


To plot this graph pass the GraphType.StackedRect in graphType. and then pass parameters in netLine to remove the line as shown below


graphType: GraphType.LineGraph
copied to clipboard
netLine: NetLine(
showPointOnly: true,
showLine: false,
lineColor: Colors.blue,
pointBorderColor: Colors.black,
coreColor: Colors.white,
),
copied to clipboard

USAGE #
class StackedBarGraph extends StatefulWidget {
StackedBarGraph({Key? key}) : super(key: key);

@override
_StackedBarGraphState createState() => _StackedBarGraphState();
}

class _StackedBarGraphState extends State<StackedBarGraph> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Stacked Rounded Rectangle Graph"),
),
body: Column(
children: [
SizedBox(
height: 50,
),
Graph(
GraphData(
"My Graph",
[
GraphBar(
DateTime(2020, 01),
[
GraphBarSection(200, color: Colors.pink),
GraphBarSection(900, color: Colors.blue),
GraphBarSection(-200, color: Colors.amber),
GraphBarSection(-700, color: Colors.purple),
],
),
GraphBar(
DateTime(2020, 2),
[
GraphBarSection(300, color: Colors.pink),
GraphBarSection(700, color: Colors.blue),
GraphBarSection(-400, color: Colors.amber),
GraphBarSection(-600, color: Colors.purple),
],
),
GraphBar(
DateTime(2020, 3),
[
GraphBarSection(400, color: Colors.pink),
GraphBarSection(700, color: Colors.blue),
GraphBarSection(-100, color: Colors.amber),
GraphBarSection(-900, color: Colors.purple),
],
),
GraphBar(
DateTime(2020, 4),
[
GraphBarSection(400, color: Colors.pink),
GraphBarSection(0, color: Colors.blue),
GraphBarSection(-800, color: Colors.amber),
GraphBarSection(-400, color: Colors.purple),
],
),
GraphBar(
DateTime(2020, 5),
[
GraphBarSection(700, color: Colors.pink),
GraphBarSection(900, color: Colors.blue),
GraphBarSection(-200, color: Colors.amber),
GraphBarSection(-100, color: Colors.purple),
],
),
GraphBar(
DateTime(2020, 6),
[
GraphBarSection(900, color: Colors.pink),
GraphBarSection(900, color: Colors.blue),
GraphBarSection(-200, color: Colors.amber),
GraphBarSection(-100, color: Colors.purple),
],
),
GraphBar(
DateTime(2020, 7),
[
GraphBarSection(300, color: Colors.pink),
GraphBarSection(800, color: Colors.blue),
GraphBarSection(-200, color: Colors.amber),
GraphBarSection(-1100, color: Colors.purple),
],
),
GraphBar(
DateTime(2020, 8),
[
GraphBarSection(250, color: Colors.pink),
GraphBarSection(980, color: Colors.blue),
GraphBarSection(-210, color: Colors.amber),
GraphBarSection(-720, color: Colors.purple),
],
),
GraphBar(
DateTime(2020, 9),
[
GraphBarSection(300, color: Colors.pink),
GraphBarSection(200, color: Colors.blue),
GraphBarSection(-200, color: Colors.amber),
GraphBarSection(-400, color: Colors.purple),
],
),
GraphBar(
DateTime(2020, 10),
[
GraphBarSection(200, color: Colors.pink),
GraphBarSection(900, color: Colors.blue),
GraphBarSection(-200, color: Colors.amber),
GraphBarSection(-700, color: Colors.purple),
],
),
],
Colors.white,
),
yLabelConfiguration: YLabelConfiguration(
labelStyle: TextStyle(
color: Colors.grey,
fontSize: 11,
),
interval: 500,
labelCount: 5,
labelMapper: (num value) {
return NumberFormat.compactCurrency(
locale: "en", decimalDigits: 0, symbol: "\$")
.format(value);
},
),
xLabelConfiguration: XLabelConfiguration(
labelStyle: TextStyle(
color: Colors.grey,
fontSize: 11,
),
labelMapper: (DateTime date) {
return DateFormat("MMM yyyy").format(date);
},
),
netLine: NetLine(
showLine: true,
lineColor: Colors.black,
pointBorderColor: Colors.black,
coreColor: Colors.yellow,
),
graphType: GraphType.StackedRounded,
onBarTapped: (GraphBar bar) {
print(bar.month);
},
),
],
),
);
}
}
copied to clipboard

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter