'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