How to change Y or X axis label in Flutter?

Question

I am trying to change my Y-axis label from number like 60,000 to 60k. Currently, I am using Charts_Flutter dependency.

Here is how my graph looks like:

And here is how my code looks like:

            child: charts.TimeSeriesChart(
              series,
              animate: true,
              domainAxis: new charts.DateTimeAxisSpec(
                tickFormatterSpec: new charts.AutoDateTimeTickFormatterSpec(
                  day: new charts.TimeFormatterSpec(
                    format: 'dd',
                    transitionFormat: 'dd MMM',
                  ),
                ),
              ),
              primaryMeasureAxis: new charts.NumericAxisSpec(
                renderSpec: new charts.GridlineRendererSpec(

                  // Tick and Label styling here.
                  labelStyle: new charts.TextStyleSpec(
                    fontSize: 10, // size in Pts.
                    color: charts.MaterialPalette.black
                  ),
                )
              ),
              defaultRenderer: charts.LineRendererConfig(
                includeArea: true,
                includeLine: true,
                includePoints: true,
                strokeWidthPx: 0.5,
                radiusPx: 1.5
              ),
              dateTimeFactory: const charts.LocalDateTimeFactory(),
              behaviors: [
                charts.PanAndZoomBehavior(),
                charts.SelectNearest(
                  eventTrigger: charts.SelectionTrigger.tap
                ),
                charts.LinePointHighlighter(
                  symbolRenderer: CustomCircleSymbolRenderer(size: size),
                ),
              ],
              selectionModels: [
                charts.SelectionModelConfig(
                type: charts.SelectionModelType.info,
                changedListener: (charts.SelectionModel model) {
                  if(model.hasDatumSelection) {
                    final tankVolumeValue = model.selectedSeries[0].measureFn(model.selectedDatum[0].index).round();
                    final dateValue = model.selectedSeries[0].domainFn(model.selectedDatum[0].index);
                    CustomCircleSymbolRenderer.value = '$dateValue \n $tankVolumeValue L';
                }
              })
            ]),
          ),
        );

Any idea on how to change the label is welcome.

Answer 1

With charts_flutter you can specify a NumberFormat using their BasicNumericTickFormatterSpec class (which... doesn't seem basic at all).

Then supply this formatter class to your chart

Below I've used NumberFormat.compact() which would turn 60,000 into 60K.

    /// Formatter for Y-axis numbers using [NumberFormat] compact
    ///
    /// Used in the [NumericAxisSpec] below.
    final myNumericFormatter =
        BasicNumericTickFormatterSpec.fromNumberFormat(
          NumberFormat.compact() // ← your format goes here
        );

    return TimeSeriesChart(seriesList,
        animate: animate,
        // Use myNumericFormatter on the primaryMeasureAxis
        primaryMeasureAxis: NumericAxisSpec(
            tickFormatterSpec: myNumericFormatter // ← pass your formatter here
        ),

Here's a full running example using the above:

import 'package:charts_flutter/flutter.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class ChartFormatPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chart Format'),
      ),
      body: Center(
        child: ChartCustomYAxis.withSampleData(),
      )
    );
  }
}

class ChartCustomYAxis extends StatelessWidget {
  final List<Series> seriesList;
  final bool animate;

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

  /// Creates a [TimeSeriesChart] with sample data and no transition.
  factory ChartCustomYAxis.withSampleData() {
    return ChartCustomYAxis(
      _createSampleData(),
      // Disable animations for image tests.
      animate: false,
    );
  }


  @override
  Widget build(BuildContext context) {
    /// Formatter for Y-axis numbers using [NumberFormat] compact
    ///
    /// Used in the [NumericAxisSpec] below.
    final myNumericFormatter =
        BasicNumericTickFormatterSpec.fromNumberFormat(
          NumberFormat.compact() // ← your format goes here
        );

    return TimeSeriesChart(seriesList,
        animate: animate,
        // Use myNumericFormatter on the primaryMeasureAxis
        primaryMeasureAxis: NumericAxisSpec(
            tickFormatterSpec: myNumericFormatter // ← pass your formatter here
        ),

        /// Customizes the date tick formatter. It will print the day of month
        /// as the default format, but include the month and year if it
        /// transitions to a new month.
        ///
        /// minute, hour, day, month, and year are all provided by default and
        /// you can override them following this pattern.
        domainAxis: DateTimeAxisSpec(
            tickFormatterSpec: AutoDateTimeTickFormatterSpec(
                day: TimeFormatterSpec(
                    format: 'd', transitionFormat: 'MM/dd/yyyy'))));
  }

  /// Create one series with sample hard coded data.
  static List<Series<MyRow, DateTime>> _createSampleData() {
    final data = [
      MyRow(DateTime(2017, 9, 25), 6000),
      MyRow(DateTime(2017, 9, 26), 8000),
      MyRow(DateTime(2017, 9, 27), 6000),
      MyRow(DateTime(2017, 9, 28), 9000),
      MyRow(DateTime(2017, 9, 29), 11000),
      MyRow(DateTime(2017, 9, 30), 15000),
      MyRow(DateTime(2017, 10, 01), 25000),
      MyRow(DateTime(2017, 10, 02), 33000),
      MyRow(DateTime(2017, 10, 03), 27000),
      MyRow(DateTime(2017, 10, 04), 31000),
      MyRow(DateTime(2017, 10, 05), 23000),
    ];

    return [
      Series<MyRow, DateTime>(
        id: 'Cost',
        domainFn: (MyRow row, _) => row.timeStamp,
        measureFn: (MyRow row, _) => row.cost,
        data: data,
      )
    ];
  }
}

/// Sample time series data type.
class MyRow {
  final DateTime timeStamp;
  final int cost;
  MyRow(this.timeStamp, this.cost);
}

The above example was stolen from here and modified to show NumberFormat.compact.