Display min:sec:millisec on Y axis

[Romeo Gianfranco]

I'm not able to figure it out how to display on Y axis min:sec:millisec. I'm representing timing of swim races.

Thanks

[Sriram Kiran Senthilkumar]

Hi Romeo,  

  

Greetings from Syncfusion. We have analyzed on your scenario at our end and we would like to share some information regarding our chart widget. Currently, we only have numeric axis and logarithmic axis support for y-axis in our chart widget. However, the requested scenario regarding displaying date time values (say in min:sec:millisec) in the y-axis in the chart can be achieved using a workaround with the help of the NumericAxis and onAxisLabelrender event available in the chart. We have also created a simple workaround chart sample in which we have converted the data time values to millisecondssinceepoch values and passed into the chart using the yValueMapper function and with the help of the onAxisLabelRender event, we have converted the millisecondssinceepoch values to required datetime value format (say min:sec:millisec) so that the axis labels gets rendered in min:sec:millisec datetime format respectively. Please refer the code snippet below for further reference. 

SfCartesianChart( 

            onAxisLabelRender: (args) { 

              if (args.axisName == 'primaryYAxis') { 

                // Converted the axis label value which is in millisecondsSinceEpoch and parsed the  

                // required date-time values in the string format (min:sec:millisec) and passed into 

                // axis label’s text argument variable. 

                args.text = 

                    DateTime.fromMillisecondsSinceEpoch(args.value.toInt()) 

                            .minute 

                            .toString() + 

                        ':' + 

                        DateTime.fromMillisecondsSinceEpoch(args.value.toInt()) 

                            .second 

                            .toString() + 

                        ':' + 

                        DateTime.fromMillisecondsSinceEpoch(args.value.toInt()) 

                            .millisecond 

                            .toString(); 

              } 

            }, 

            primaryXAxis: CategoryAxis(), 

            primaryYAxis: NumericAxis( 

                // Assigned a name for the y-axis in order to use it in the callback event. 

                name: 'primaryYAxis'), 

            series: <ChartSeries<SwinData, String>>[ 

              ColumnSeries<SwinData, String>( 

                  dataSource: chartData, 

                  xValueMapper: (SwinData data, _) => data.playerName, 

                  yValueMapper: (SwinData data, _) { 

                    // Passing the datetime values in milliseconds in to the chart 

                    return data.finishTime.millisecondsSinceEpoch; 

                  }, 

                  dataLabelSettings: DataLabelSettings(isVisible: true), 

                  markerSettings: MarkerSettings(isVisible: true)) 

            ] 

) 

 

Screenshot: 

  

 

We have also attached the workaround sample below for your reference. 

Sample: https://www.syncfusion.com/downloads/support/forum/160066/ze/f160066_workaroundsample-956275226 

  

Please check the above-attached sample and revert us if you still have further concerns. 

 

Regards, 

Sriram Kiran 

[Romeo Gianfranco]

Thank you very much!. I do still have a problem. I need the tooltip labels but the Y axis value is still displayed as an integer and not like in the Y axis.

Is there a workaround also for that?

Thank you very much,

[Dharanitharan Palanisamy]

Hi Romeo, 

  

Thanks for the revert. We have analyzed your scenario and it can be achieved by using the onTooltipRender event. Here you can get the y value of each point and you can customize the tooltip as your required. Find the code to achieve your requirement and this can be changed based on your scenario. 

  

Code Snippet:     

onTooltipRender: (args) { 

              String yValue = args.dataPoints[args.pointIndex].y.toString(); 

              args.text = 

                  DateTime.fromMillisecondsSinceEpoch(int.parse(yValue)) 

                          .minute 

                          .toString() + 

                      ':' + 

                      DateTime.fromMillisecondsSinceEpoch(int.parse(yValue)) 

                          .second 

                          .toString() + 

                      ':' + 

                      DateTime.fromMillisecondsSinceEpoch(int.parse(yValue)) 

                          .millisecond 

                          .toString(); 

            }, 

  

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/f160066-1233550174 

Screenshot:  

 

Kindly revert us if you need any further assistance. 

  

 

 

Thanks, 

Dharanitharan. P 

[Romeo Gianfranco]

Hello, I have updated the Syncfusion version but now the onAxisLabelRender is not anymore available. How can I proceed in order to have rendered the Y axis with minutes:seconds:milliseconds?

Thank you

Gianfranco

[Yuvaraj Gajaraj]

Hi Romeo,

We recommend the axisLabelFormatter callback instead of onAxisLabelRender because we have removed the onAxisLabelRender callback in the chart from the 19.4.38 version and have the callback axisLabelFormatter inside the axis to customize the axis label. So, you can use this callback and customize the axis label in the respective axis. We have attached the code snippet below to achieve your requirement.

Code snippet:

primaryYAxis: NumericAxis(

              axisLabelFormatter: (args) {

                String text =

                  DateTime.fromMillisecondsSinceEpoch(int.parse(args.text))

                          .minute

                          .toString() +

                      ':' +

                      DateTime.fromMillisecondsSinceEpoch(int.parse(args.text))

                          .second

                          .toString() +

                      ':' +

                      DateTime.fromMillisecondsSinceEpoch(int.parse(args.text))

                          .millisecond

                          .toString();

                          return ChartAxisLabel(text, args.textStyle);

              },

                rangePadding: ChartRangePadding.additional,

                name: 'primaryYAxis'),

UG: https://help.syncfusion.com/flutter/cartesian-charts/callbacks#axislabelformatter

If you have any queries, please get back to us.

Regards,

Yuvaraj.