1

I have a simple graph in which I have x-axis as string and y-axis as int but my values are too long 10000 I need to show it as 10k

My code

     Container(
          height: MediaQuery.of(context).size.height * 0.25,
          child: SfCartesianChart(
              enableAxisAnimation: true,
              primaryXAxis: CategoryAxis(
                  majorGridLines: MajorGridLines(width: 0),
                  //Hide the axis line of x-axis
                  axisLine: AxisLine(width: 0),
                  interval: 1),
              primaryYAxis: NumericAxis(
                minimum: 0, maximum: highSale,
                interval: highSale < 200 ? 100 : 2000,
                majorGridLines: MajorGridLines(width: 0),
                //Hide the axis line of x-axis
                axisLine: AxisLine(width: 0),
              ),
              tooltipBehavior: _tooltip,
              plotAreaBorderWidth: 0,
              legend: Legend(isVisible: false),
              series: <ChartSeries<_ChartData, String>>[
                ColumnSeries<_ChartData, String>(
                    dataSource: weekly
                        ? data
                        : yearly
                            ? dataMonth
                            : monthly
                                ? dataDaily
                                : daily
                                    ? dataDaily
                                    : [],
                    xValueMapper: (_ChartData data, _) => data.x,
                    yValueMapper: (_ChartData data, _) => data.y,
                    
                    pointColorMapper: (_ChartData data, _) => data.color,
                    name: 'Week',
                    color: weekly ? kPrimaryColor : Colors.red)
              ]),
        ),
        

In the image you can see it's showing 36000 I need to show it as 36k I try to convert it to k value but the issue is on yValueMapper it's showing string isn't allowed. So what I was thinking is maybe there is some value to show mapper? like graph will work on value mapper and text will be different.

enter image description here

rameez khan
  • 73
  • 1
  • 23
  • 68

2 Answers2

5

The above answer is correct but you need to format the primary axis

Like this

  primaryYAxis: NumericAxis(
    numberFormat: NumberFormat.compact(),
  )
Umaiz Khan
  • 1,319
  • 3
  • 20
  • 66
  • [numberFormat](https://github.com/syncfusion/flutter-widgets/blob/ac9ea48cb13bfcb377f4bfccd577d1229d8bd62c/packages/syncfusion_flutter_charts/lib/src/chart/axis/numeric_axis.dart#L41) – Malbolged Nov 28 '21 at 23:20
0

You can use the NumberFormat class from intl package

Like so:

import 'package:intl/intl.dart';

void main() {
  final number = NumberFormat.compact().format(10000);

  print(number); // 10k
}
pedro pimont
  • 2,764
  • 1
  • 11
  • 24