[Bug]: Some inconsistencies in x and y axis labels displayed (AreaChart)

[Ignotos]

Contact Details

michael.ignoto@gsoft.com

What happened?

example screenshot for reference:

1. For x-axis labels, it would be preferable to show as many dates as we can allow. In the example, we have the last 7 days + the current day (8 days total), there is room to show all days but some are skipped (Jan 1, Jan 3, Jan 5).

2. For the y-axis labels, in some instances not all numbers in the range are included, in the example I would expect all numbers 0 - 5 to be shown but only 0, 2, and 5 are shown. the range provided is min: 0 max: 5. Most of the time the y-axis labels are fine, but in this case with little data and a small range it doesn't behave like I would expect.

Component

AreaChart

Component Version

2.0.0

Which browsers are you seeing the problem on?

Firefox, Chrome, Microsoft Edge

Mobile Device

No response

Relevant log output

No response

[vicky-comeau]

Hi, can you provide what you put for the dataSet and dateRange please, thanks.

[franckgaudin]

For x-axis labels, it would be preferable to show as many dates as we can allow. In the example, we have the last 7 days + the current day (8 days total), there is room to show all days but some are skipped (Jan 1, Jan 3, Jan 5).

The component is configured to divide the number of elements by 7 and it automatically calculates which element to display. To fix the rendering we can add a property that allows to change this value for example in our case 8 which corresponds to the desired display.

For the y-axis labels, in some instances not all numbers in the range are included, in the example I would expect all numbers 0 - 5 to be shown but only 0, 2, and 5 are shown. the range provided is min: 0 max: 5. Most of the time the y-axis labels are fine, but in this case with little data and a small range it doesn't behave like I would expect.

The calculation of the Y axis is similar to the X axis for a better result we can choose a range of 0-6 ou 0-4 to divide the elements by 2.

Another option is to leave the props range empty so that the component calculates the spacing itself. It all depends on the desired result.

[Ignotos]

I think allowing us to specify the number of elements on the x-axis could be a good solution to this. As long as the chart remains responsive, so if the labels don't all fit on a mobile screen only a subset are shown so that there is no overlap between labels.

Also one more small thing related to this that I forgot to mention, seems the design team would like to have a specific date standard across all of OV, they seem correct for the French labels but for the English labels they are missing a period when the name is abbreviated, here is what the standard is:

english (example "Jan. 1" instead of "Jan 1"):

french (seems correct already):