We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to render chart with equal gaps between the points

I want to build a chart of 5 days.

Each point describes 2 minutes of the day, from 10:00 AM to 17:00 PM.

Right now, my chart looks like this: 


The red area is the time between the last point of one day at 17:00 PM and the point of the next day at 10:00 AM.


Can I prevent it? So that it will show the chart point after point?


6 Replies

HK Hariharasudhan Kanagaraj Syncfusion Team March 17, 2023 12:13 PM UTC

Hi Iyar Avital,


The requirement can be achieved using the DateTimeCategoryAxis. Kindly refer to the attached UG document regarding DateTimeCategoryAxis for further information.

UG, https://help.syncfusion.com/flutter/cartesian-charts/axis-types#date-time-category-axis


Thanks,
Hari Hara Sudhan. K



IA Iyar Avital March 19, 2023 08:12 AM UTC

Hi,

thank you very much for your answer.


I have a problem when I am trying to use 'DateTimeCategoryAxis', the annotation, in the end, wasn't shown.


My annotation is:




And I'm sure that this point is in the range (this exactly point) on the chart.


Do you know why that happens?





Edit: My dates are between 12.03-16.03, each day from 9:30 to 17:00. The annotation was work if the x value is between 12.03 - 15.03. why that?

Edit 2: I cand show the chart for all the width

Edit 3: If the date item category 'IsVisible' is false, the annotation wasn't shown in any situation.



YG Yuvaraj Gajaraj Syncfusion Team March 20, 2023 01:30 PM UTC

Hi Iyar,


Query #1: I have a problem when I am trying to use 'DateTimeCategoryAxis', the annotation, in the end, wasn't shown.


We have checked your code snippet and found that you have using the DateTime value for the x property in CartesianChartAnnotation, when you using the DateTimeCategoryAxis you must need to use the index value instead of the DateTime value for the x property in CartesianChartAnnotation. We have shared the code snippet below for your reference.


Code snippet:

annotations: const <CartesianChartAnnotation> [
CartesianChartAnnotation(
widget: Text('Annotation'),
horizontalAlignment: ChartAlignment.far,
coordinateUnit: CoordinateUnit.point,
x: 6,
y: 50,
)
],


Screenshot:



Query #2: I cand show the chart for all the width


We have checked your query at our end and as we are not able to understand what your proposing as your requirement, we kindly request you to share us with more information on your requirement in detail along with screenshots to screen recordings so that it will help us assist you in a better way.


Query #3: If the date item category 'IsVisible' is false, the annotation wasn't shown in any situation.


We have also ensured with the isVisible property to false in DateTimeCategoryAxis the annotation will be shown without any issue.


Regards,

Yuvaraj.



IA Iyar Avital March 21, 2023 08:40 AM UTC

Thanks!


There is simple example of what I mean about the width. It is the same chart exactly, with the same data. one time I am using DateTimeAxis and in the other DateTimeCategoryAxis.


DateTimeCategoryAxis:



DateTimeAxis:



I tried adding RangePadding.none but its looks the same.

I dont want the space on the sides.


thank you very much!



IA Iyar Avital replied to Yuvaraj Gajaraj March 21, 2023 11:59 AM UTC

One more problem when I am using DateTimeCategoryAxis.

The crosshair showing weird values in the x-axis, how can i control this?




YG Yuvaraj Gajaraj Syncfusion Team March 22, 2023 11:48 AM UTC

Hi Iyar,


Query #1: I dont want the space on the sides.


While using DateTimeCategryAxis the axis labels are placed between the ticks which is why it looks like space on the sides of the series. To avoid this, set the labelPlacement to onTicks, it will help you to remove the space on side of the series. We have shared the code snippet below.


Code snippet:

primaryXAxis: DateTimeCategoryAxis(
labelPlacement: LabelPlacement.onTicks,
),


Query #2: The crosshair showing weird values in the x-axis, how can i control this?


You can modify the crosshair tooltip value using the onCrosshairPositionChaning event, and convert the millisecond value into the DateTime value. We have shared the code snippet below for your reference.


Code snippet:

onCrosshairPositionChanging: (args) {
if (args.orientation == AxisOrientation.horizontal &&
num.tryParse(args.value) != null) {
// Modify the DateFormat type based on your requirement
args.text = DateFormat('yyyy MMM').format(
DateTime.fromMicrosecondsSinceEpoch(int.parse(args.value)));
}
},


Screenshot:



Regards,

Yuvaraj.


Loader.
Live Chat Icon For mobile
Up arrow icon