Width of DateTimeAxis Bars

[Owen Kelly]

 I'm currently creating a graph which combines a line graph and a column chart, the column chart data is every hour, and I need the bars to be the width of one hour (i.e in the screenshot, there should be no space between the bars) I can only find the width value on the ColumnSeries which only takes a number between 0-1, with 1 not being a hours width, is there a way of setting the bar width to one hour?

Thanks

[Preethika Selvam]

Hi Owen,

We have analyzed your query and suspect that you have used the width or spacing property in the column series, which creates a gap between the segments. The spacing property is used to adjust the space between two segments, with a default value of 0. The value can range from 0 to 1, where 1 and 0 correspond to 100% and 0% of the available space, respectively. The width property is used to modify the width of the rectangle, with a default value of 0.7. This value also ranges from 0 to 1, where 1 and 0 represent 100% and 0% of the available width, respectively. To avoid the space between the columns, we recommend using the default values for both the spacing and width properties with a latest chart version 26.2.9. We have shared a user guide documentation and sample for your reference.

UG: https://help.syncfusion.com/flutter/cartesian-charts/chart-types/column-chart#column-width-and-spacing

Output for default column series rendering with default spacing and width:

If you still face any issue with a default spacing and width, we kindly request you to try replicating the reported issue in the test sample attached below. Please revert to us so that we can assist you in a better way.

Regards,

Preethika Selvam.

Attachment: fr194108_7cab72fd.zip

[Owen Kelly]

Hi Preethika,

Thanks for replying, and thank you for providing a code sample. I tried using the default values of width and spacing but was still getting the same error. It turns out the issue was related to the DateTime values I was passing to the series. The values being returned from my datatbase were in the format: "2024-08-20T00:00:00Z" and I was using DateTime.parse(value) to convert them to a DateTime Object, passing these into the chart caused the thin bars. however, recreating the DateTime Object manually, only as far as providing the hour has solved the problem (e.g creating an object with DateTime(year, month, day, hour))

Thanks 

[Preethika Selvam]

Hi Owen,

We tried to replicate the reported issue at our end. We tried the following ways to reproduce the issue:

• Checked with the latest chart version 26.2.10.
• Checked on Mobile, Web, and Windows platforms.
• Checked with DateTimeAxis and DateTimeCategoryAxis axis as a primaryXAxis.

Unfortunately, we are not able to reproduce the reported issue. So, we kindly request you to try to replicate the reported issue in the below attached test sample and provide us with more details regarding the specific scenario in which you are encountering this issue. This will help us to assist you more effectively.

Output:

Regards,

Preethika Selvam.

Attachment: fr194108_39fd7510.zip