'How to show data on top only on selected bar and also change color on chart in flutter?
I am trying to change the color of selected bar to green and show the value on top. I've used charts_flutter package to get this. But cannot get the desired model. It shows all the values, and color only shows related color on clicking.
Here is my code:
/// Bar chart example
import 'package:charts_flutter/flutter.dart';
import 'package:flutter/material.dart';
class SimpleBarChart extends StatefulWidget {
// final List<charts.Series> seriesList;
final bool animate;
SimpleBarChart({this.animate = true});
@override
State<SimpleBarChart> createState() => _SimpleBarChartState();
/// Create one series with sample hard coded data.
static List<Series<OrdinalSales, String>> _createSampleData() {
final data = [
OrdinalSales('Jan', 10),
OrdinalSales('Feb', 25),
OrdinalSales('Mar', 100),
OrdinalSales('Apr', 75),
OrdinalSales('May', 5),
OrdinalSales('Jun', 25),
// OrdinalSales('Jul', 100),
// OrdinalSales('Aug', 75),
// OrdinalSales('Sep', 5),
// OrdinalSales('Oct', 25),
// OrdinalSales('Nov', 100),
// OrdinalSales('Dec', 75),
];
var setColor = MaterialPalette.green.shadeDefault;
return [
Series<OrdinalSales, String>(
id: 'Sales',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: data,
colorFn: (datum, index) {
return setColor;
},
labelAccessorFn: (OrdinalSales sales, _) => sales.sales.toString()),
];
}
}
class _SimpleBarChartState extends State<SimpleBarChart> {
late String value;
List<Series<dynamic, String>> get seriesList =>
SimpleBarChart._createSampleData();
@override
Widget build(BuildContext context) {
return Container(
height: 80,
width: 400,
child: BarChart(
seriesList,
animate: widget.animate,
barRendererDecorator: BarLabelDecorator<String>(),
primaryMeasureAxis: NumericAxisSpec(renderSpec: NoneRenderSpec()),
domainAxis: const OrdinalAxisSpec(
showAxisLine: false,
renderSpec: SmallTickRendererSpec(
tickLengthPx: 0,
)),
selectionModels: [
SelectionModelConfig(
type: SelectionModelType.info,
changedListener: (SelectionModel model) {
if (model.hasDatumSelection) {
value = model.selectedSeries[0]
.measureFn(model.selectedDatum[0].index)
.toString();
print(value);
var selectedIndex = model.selectedDatum[0].index;
print(selectedIndex );
}
},
),
],
// behaviors: [
// LinePointHighlighter(
// selectionModelType: SelectionModelType.info,
// ),
// ],
),
);
}
}
/// Sample ordinal data type.
class OrdinalSales {
final String year;
final int sales;
OrdinalSales(this.year, this.sales);
}
this is output: enter image description here
but I want this: enter image description here
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
