How to render chart with equal gaps between the points

[Iyar Avital]

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?

[Hariharasudhan Kanagaraj]

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

[Iyar Avital]

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.

[Yuvaraj Gajaraj]

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.

[Iyar Avital]

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!

[Iyar Avital]

One more problem when I am using DateTimeCategoryAxis.

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

[Yuvaraj Gajaraj]

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.