search

google / charts

https://pub.dev/packages/charts_flutter
Apache License 2.0
2.8k stars 1.2k forks source link

BarChart change bar label size, enable pan and pinch to zoom behavior #753

Open piotrkovsy1331 opened 2 years ago

piotrkovsy1331 commented 2 years ago

Hey Im facing a problems with BarChart:

  1. How can i enable zooming on te chart ?
  2. How can i change bar labels size and display direction ?

Description of issues:

  1. I want to achieve having a barChart with panning and pinch to zoom behavior, Google didn't helped me very much i found that i can add
    behaviors: [ charts.PanBehavior(), charts.PanAndZoomBehavior(), ],.
    to the BarChart parameters but it didn't work. Any ideas ?

    2.I have situations where i need to show more than 10 or 20 bars on one chart. When number of charts is small everything looks fine. Labels are shown properly. But when number of bars increases labels changes it display direction from horizontal to vertical. My goal is to block that behavior and force labels to stay horizontal and scale to the Bar's width. You can see it on screenshots below. Does anybody has idea how to solve it ?

Zrzut ekranu 2022-03-28 o 13 44 13 Zrzut ekranu 2022-03-28 o 13 44 27

`import 'package:charts_flutter/flutter.dart' as charts;

import '../models/drive_style_series.dart'; import 'package:flutter/material.dart';

class DriveSummaryChart extends StatelessWidget { const DriveSummaryChart({Key? key, required this.dataSeriesList}) : super(key: key);

final List dataSeriesList;

@override Widget build(BuildContext context) { List<charts.Series<DriveStyleSeries, String>> series = [ charts.Series( id: 'km', data: dataSeriesList, labelAccessorFn: (DriveStyleSeries series, ) => series.distance.toDouble().toStringAsFixed(1), domainFn: (DriveStyleSeries series, ) => series.date, measureFn: (DriveStyleSeries series, ) => series.distance, colorFn: (DriveStyleSeries series, ) => charts.ColorUtil.fromDartColor( Colors.greenAccent), ), ]; return SizedBox( height: 300, child: charts.BarChart( series, animate: true, animationDuration: const Duration(milliseconds: 200), barRendererDecorator: charts.BarLabelDecorator( labelPosition: charts.BarLabelPosition.outside, labelAnchor: charts.BarLabelAnchor.middle, labelPadding: 5, outsideLabelStyleSpec: charts.TextStyleSpec( color: charts.ColorUtil.fromDartColor(Colors.black)), ), primaryMeasureAxis: const charts.NumericAxisSpec(renderSpec: charts.NoneRenderSpec()), domainAxis: const charts.OrdinalAxisSpec( showAxisLine: false, renderSpec: charts.NoneRenderSpec()), behaviors: [ charts.PanBehavior(), charts.PanAndZoomBehavior(), ], layoutConfig: charts.LayoutConfig( bottomMarginSpec: charts.MarginSpec.fixedPixel(0), leftMarginSpec: charts.MarginSpec.fixedPixel(0), rightMarginSpec: charts.MarginSpec.fixedPixel(0), topMarginSpec: charts.MarginSpec.fixedPixel(20), ), ), ); } } `

dawid-niedzwiecki commented 2 years ago

Anyone solved this?