How to show the xLabels independent of xValue
Hello,
I have a scenario where I have to show Year data for sync fusion scatter charts. My xLabels are "1", "2"... "31". the data I am have to show is each minute data (31 * 1440). Is there a way I can show the xLabels independent of x and y?
Thanks
ekta
Here is an example of the chart that I am try to get :
My xLabels are "1", "2"... "31". the data I am have to show is each minute data (31 * 1440). Is there a way I can show the xLabels independent of x and y?
Hi,
We have validated your query and attached screenshot. You can achieve your requirement by using the axisLabelFormatter in the DateTimeAxis. In the axisLabelFormatter, you can customize the labels and text style in the ChartAxisLabel. We have created a sample to show data for each minute. In the AxisRenderDetails parameter, you can obtain the labels as a String datatype. Now, you can convert the String datatype to an int to display data for each minute in the AxisLabels with ChartAxisLabel. We have shared a code snippet, screenshot, user guide documentation, and sample for your reference. You can modify the sample based on your needs. Please let us know if you need any further assistance.
UG,
https://help.syncfusion.com/flutter/cartesian-charts/callbacks#axislabelformatter
ScreenShot:
Code Snippet:
|
import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:intl/intl.dart';
void main() { return runApp(MyApp()); }
class MyApp extends StatefulWidget { MyApp({Key? key}) : super(key: key);
@override _MyAppState createState() => _MyAppState(); }
class _MyAppState extends State<MyApp> { List<SalesData> data1 = [ SalesData(DateTime(2000, 01, 01), 15), SalesData(DateTime(2000, 01, 06), 12), SalesData(DateTime(2000, 01, 14), 24), SalesData(DateTime(2000, 01, 19), 29), SalesData(DateTime(2000, 01, 25), 31), SalesData(DateTime(2000, 01, 30), 39), ];
@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: SfCartesianChart( primaryXAxis: DateTimeAxis( dateFormat: DateFormat("dd"), axisLabelFormatter: (AxisLabelRenderDetails details) { String text = (int.parse(details.text) * 1440).toString(); return ChartAxisLabel(text, details.textStyle); }, ), primaryYAxis: NumericAxis(), series: <ChartSeries<SalesData, DateTime>>[ ScatterSeries( animationDuration: 0, color: Colors.red, dataSource: data1, xValueMapper: (SalesData sales, _) => sales.date, yValueMapper: (SalesData value, _) => value.sales, ), LineSeries( animationDuration: 0, color: Colors.red, dataSource: data1, xValueMapper: (SalesData value, _) => value.date, yValueMapper: (SalesData value, _) => value.sales, ), ], ), ), ), ); } }
class SalesData { SalesData(this.date, this.sales);
final DateTime date; final double sales; } |
Regards,
Lokesh P.
Attachment: chart_185488_ab1efdf4.zip
Hi,
We have validated your query. You can achieve your requirement by using dateFormat in the DateTimeAxis. In the dateFormat, you can display the axis labels as days in a week or months in a year based on your needs. We have prepared a sample to achieve your requirement using DateFormat in the dateFormat property. We have shared a code snippet, screenshot, and sample for your reference. You can modify the sample based on your needs. Please let us know if you need any further assistance.
Output Screenshot:
Code Snippet:
|
import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:intl/intl.dart';
void main() { return runApp(MyApp()); }
class MyApp extends StatefulWidget { MyApp({Key? key}) : super(key: key);
@override _MyAppState createState() => _MyAppState(); }
class _MyAppState extends State<MyApp> { List<SalesData> data1 = [ SalesData(DateTime(2000, 01, 01), 15), SalesData(DateTime(2000, 02, 06), 12), SalesData(DateTime(2000, 03, 14), 24), SalesData(DateTime(2000, 04, 19), 29), SalesData(DateTime(2000, 05, 25), 31), SalesData(DateTime(2000, 06, 30), 39), ];
@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: SfCartesianChart( primaryXAxis: DateTimeAxis( // To display days in a week dateFormat: DateFormat("EEE"),
// To display months in a year // dateFormat: DateFormat("MMM"), ), primaryYAxis: NumericAxis(), series: <ChartSeries<SalesData, DateTime>>[ ScatterSeries( animationDuration: 0, color: Colors.red, dataSource: data1, xValueMapper: (SalesData sales, _) => sales.date, yValueMapper: (SalesData value, _) => value.sales, ), LineSeries( animationDuration: 0, color: Colors.red, dataSource: data1, xValueMapper: (SalesData value, _) => value.date, yValueMapper: (SalesData value, _) => value.sales, ), ], ), ), ), ); } }
class SalesData { SalesData(this.date, this.sales);
final DateTime date; final double sales; }
|
Regards,
Lokesh P.
Attachment: chart_185488_20631f4d.zip
This is my chart data where x in minutes. I am showing here the year data of ketone scores.
chartData - (xvalue = 29323, yvalue = 2
xvalue = 40036, yvalue = 3
xvalue = 108500, yvalue = 0
xvalue = 283111, yvalue = 1
xvalue = 287238, yvalue = 0
xvalue = 299063, yvalue = 1
xvalue = 313275, yvalue = 0
xvalue = 321796, yvalue = 1
xvalue = 337651, yvalue = 2
xvalue = 349057, yvalue = 1
xvalue = 380726, yvalue = 0).
The x Labels that I want to show is the first initial of the 12 months "J" , "F", "M".. "D". I am able to achieve this using core plot in iOS. how can I get the same behavior using sync fusion. Please see the attached screenshot. 
Hi,
We have validated your query and attached screenshot. You can achieve your requirement by using the axisLabelFormatter callback in the NumericAxis. In this callback, you will receive every axis label text that has been formatted based on the value. We have created a sample that displays the month name. We have converted the labels from a String datatype into an int datatype to convert them into DateTime. Later, we have displayed the month name in the specified year using the getMonth function to display in the primaryXAxis labels. We have also shared the user guide documentation, code snippet, and sample for your reference. Please let us know if you need any further details.
UG Link,
https://help.syncfusion.com/flutter/cartesian-charts/callbacks#axislabelformatter
Screenshot:
Code snippet:
|
import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_charts/charts.dart';
void main() { return runApp(MyApp()); }
class MyApp extends StatefulWidget { MyApp({Key? key}) : super(key: key);
@override _MyAppState createState() => _MyAppState(); }
class _MyAppState extends State<MyApp> { List<SalesData> data = [ SalesData(29323, 2), SalesData(40036, 3), SalesData(108500, 0), SalesData(283111, 1), SalesData(287238, 0), SalesData(299063, 1), SalesData(313275, 0), SalesData(321796, 1), SalesData(337651, 2), SalesData(349057, 1), SalesData(380726, 0), ];
@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: SfCartesianChart( primaryXAxis: NumericAxis( axisLabelFormatter: (AxisLabelRenderDetails details) { int date = int.parse(details.text); DateTime dateTime = DateTime.fromMillisecondsSinceEpoch( (DateTime(2000, 01, 01).millisecondsSinceEpoch + date * 86400000)); String monthName = getMonth(dateTime.month); return ChartAxisLabel(monthName, details.textStyle); }, ), primaryYAxis: NumericAxis(), series: <ChartSeries<SalesData, num>>[ LineSeries( animationDuration: 0, color: Colors.red, dataSource: data, xValueMapper: (SalesData sales, _) => sales.date, yValueMapper: (SalesData value, _) => value.sales, ), ], ), ), ), ); } }
// Function to get single-letter month String getMonth(int month) { switch (month) { case 1: return 'J'; case 2: return 'F'; case 3: return 'M'; case 4: return 'A'; case 5: return 'M'; case 6: return 'J'; case 7: return 'J'; case 8: return 'A'; case 9: return 'S'; case 10: return 'O'; case 11: return 'N'; case 12: return 'D'; default: return ''; } }
class SalesData { SalesData(this.date, this.sales);
final num date; final double sales; }
|
Regards,
Lokesh P.
Attachment: chart_185488_datetime_901f2b18.zip
