Customize charts_flutter - draw line over - show data

user_4563658 0
Viewed 707

How can I draw one horizontal line over the chart (see blue line below) ? I was wondering how to draw one line over or above the bars to define the target value (4.7 in this example)

enter image description here

Another feature that I would like to know is how to show the data value over each bar? See image below.

enter image description here

Thanks in advance.

class CustomRoundedBars extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  CustomRoundedBars(this.seriesList, {this.animate});

  factory CustomRoundedBars.withSampleData() {
return new CustomRoundedBars(
  _createSampleData(),
  // Disable animations for image tests.
  animate: false,
);
  }

  @override
  Widget build(BuildContext context) {
return new charts.BarChart(
  seriesList,
  animate: animate,
  defaultRenderer: new charts.BarRendererConfig(
  cornerStrategy: const charts.ConstCornerStrategy(10)),
);
  }
flutter bar-chart charts
1 Answers
  1. To add the line:

In your _createSampleData() method, you'll need to return 2 sets of data. One for the monthly values (bar), and one for the target value (line), such as

  [
    Series<DataItem, String>(
      id: 'monthly',
      colorFn: (_, __) => MaterialPalette.green.shadeDefault,
      domainFn: (DataItem dataItem, _) => dataItem.label,
      measureFn: (DataItem dataItem, _) => dataItem.value,
      data: dataList,
    ),
    Series<DataItem, String>(
      id: 'average',
      colorFn: (_, __) => MaterialPalette.blue.shadeDefault,
      domainFn: (DataItem dataItem, _) => dataItem.label,
      measureFn: (DataItem dataItem, _) => targetValue,
      data: dataList,
    )..setAttribute(rendererIdKey, 'average'),
  ]

Then in your BarChart widget, add an additional config:

  customSeriesRenderers: [
    LineRendererConfig(
      customRendererId: 'average',
    ),
  ],

Make sure the customRenderedId is the same as rendererIdKey attribute.

  1. To add the value over the bar, this link may help: How to display data value of an item on click inside flutter charts
user_40181030
Related