D'Chart is a package for compact chart widgets.
The purpose of this pakage is simple way to use chart from community_charts_flutter.
Chart Available from community_charts_flutter:
- bar
- line
- pie
- donut
- gauge
The use of this package is made as concise as possible.
Wrap Chart with Widget Size like SizedBox, Container, Aspecration etc to set root size for chart
- Bar
DChartBar(
data: [
{
'id': 'Bar',
'data': [
{'domain': '2020', 'measure': 3},
{'domain': '2021', 'measure': 4},
{'domain': '2022', 'measure': 6},
{'domain': '2023', 'measure': 0.3},
],
},
],
domainLabelPaddingToAxisLine: 16,
axisLineTick: 2,
axisLinePointTick: 2,
axisLinePointWidth: 10,
axisLineColor: Colors.green,
measureLabelPaddingToAxisLine: 16,
barColor: (barData, index, id) => Colors.green,
showBarValue: true,
),- Line
DChartLine(
data: [
{
'id': 'Line',
'data': [
{'domain': 0, 'measure': 4.1},
{'domain': 2, 'measure': 4},
{'domain': 3, 'measure': 6},
{'domain': 4, 'measure': 1},
],
},
],
lineColor: (lineData, index, id) => Colors.amber,
),- Pie & Donut
DChartPie(
data: [
{'domain': 'Flutter', 'measure': 28},
{'domain': 'React Native', 'measure': 27},
{'domain': 'Ionic', 'measure': 20},
{'domain': 'Cordova', 'measure': 15},
],
fillColor: (pieData, index) => Colors.purple,
),
DChartPie(
data: [
{'domain': 'Flutter', 'measure': 28},
{'domain': 'React Native', 'measure': 27},
{'domain': 'Ionic', 'measure': 20},
{'domain': 'Cordova', 'measure': 15},
],
fillColor: (pieData, index) => Colors.purple,
donutWidth: 30,
labelColor: Colors.white,
),- Gauge
DChartGauge(
data: [
{'domain': 'Off', 'measure': 30},
{'domain': 'Warm', 'measure': 30},
{'domain': 'Hot', 'measure': 30},
],
fillColor: (pieData, index) {
switch (pieData['domain']) {
case 'Off':
return Colors.green;
case 'Warm':
return Colors.orange;
default:
return Colors.red;
}
},
showLabelLine: false,
pieLabel: (pieData, index) {
return "${pieData['domain']}";
},
labelPosition: PieLabelPosition.inside,
labelPadding: 0,
labelColor: Colors.white,
),- Bar Custom
for chart size, wrap with box widget or which widget have size
AspectRatio(
aspectRatio: 16 / 9,
child: DChartBarCustom(
showDomainLine: true,
showMeasureLine: true,
showDomainLabel: true,
showMeasureLabel: true,
spaceBetweenItem: 8,
listData: [
DChartBarDataCustom(
value: 13,
label: 'Jan',
color: Colors.blue,
),
DChartBarDataCustom(value: 20, label: 'Feb'),
DChartBarDataCustom(value: 30, label: 'Mar'),
DChartBarDataCustom(value: 40, label: 'Apr'),
DChartBarDataCustom(value: 25, label: 'Mei'),
],
),
),
List ranking = [
{'class': 'A', 'total': 23},
{'class': 'B', 'total': 14},
{'class': 'C', 'total': 8},
{'class': 'D', 'total': 7},
{'class': 'E', 'total': 21},
];
DChartBarCustom(
loadingDuration: const Duration(milliseconds: 1500),
showLoading: true,
valueAlign: Alignment.topCenter,
showDomainLine: true,
showDomainLabel: true,
showMeasureLine: true,
showMeasureLabel: true,
spaceDomainLabeltoChart: 10,
spaceMeasureLabeltoChart: 5,
spaceDomainLinetoChart: 15,
spaceMeasureLinetoChart: 20,
spaceBetweenItem: 16,
radiusBar: const BorderRadius.only(
topLeft: Radius.circular(8),
topRight: Radius.circular(8),
),
measureLabelStyle: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
color: Colors.purple,
),
domainLabelStyle: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
color: Colors.purple,
),
measureLineStyle:
const BorderSide(color: Colors.amber, width: 2),
domainLineStyle: const BorderSide(color: Colors.red, width: 2),
max: 25,
listData: List.generate(ranking.length, (index) {
Color currentColor =
Color((Random().nextDouble() * 0xFFFFFF).toInt());
return DChartBarDataCustom(
onTap: () {
print(
'${ranking[index]['class']} => ${ranking[index]['total']}',
);
},
elevation: 8,
value: ranking[index]['total'].toDouble(),
label: ranking[index]['class'],
color: currentColor.withOpacity(1),
splashColor: Colors.blue,
showValue: ranking[index]['class'] == 'C' ? false : true,
valueStyle: ranking[index]['class'] == 'A'
? const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
color: Colors.black,
)
: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
color: Colors.white,
),
labelCustom: ranking[index]['class'] == 'B'
? Transform.rotate(
angle: 5.5,
child: const Text('Bagus'),
)
: null,
valueCustom: ranking[index]['total'] > 20
? Align(
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
border: Border.all(width: 2),
shape: BoxShape.circle,
),
child: Text(
'${ranking[index]['total']}',
style: const TextStyle(
fontSize: 11,
color: Colors.red,
fontWeight: FontWeight.w900,
),
),
),
const Text(
'😄',
style: TextStyle(fontSize: 20),
),
],
),
)
: null,
valueTooltip: '${ranking[index]['total']} Student',
);
}),
),Tutorial : All Chart, Line Chart From Data Collection, [Bar Chart Custom] (Soon)
Support me for more feature & packages Donate
Check my app : Visit
Check My Tutorial & Course : Watch