Forums Home / Wijmo / General Discussion
Posted by: Yifan_Zhang on 2 July 2020, 4:21 am EST
Yifan_Zhang
Posted 2 July 2020, 4:21 am EST
Hi, sometimes the axis labels will not be equally spaced when resizing. Here is an example of unequally spaced x axis labels: https://jsfiddle.net/1e2xjnvb/
It seems it tries to avoid label text overlapping for the negative values. But unequally spaced axis labels don’t look right. The labels interval should be consistent. Could you help me resolve this?
ashwin.saxena
Posted 2 July 2020, 5:46 pm EST
Hi Yifan,
Just set the overlappingLabels property of axisX to wijmo.chart.OverlappingLabels.Show. Refer to the updated sample below:
https://jsfiddle.net/dphc3ex4/3/
Regards,
Ashwin
Yifan_Zhang
Posted 7 July 2020, 6:24 am EST
Thanks for the reply. Will that have any side effects for rotated labels?
Yifan_Zhang
Posted 7 July 2020, 6:26 am EST
Also for that sample, the labels are not technically overlapping when shown, so why would it be hidden when the overlappingLabels property is set to auto?
ashwin.saxena
Posted 7 July 2020, 4:43 pm EST
Hi Yifan,
You can rotate the labels as per your requirements. OverlappingLabels will not affect the labelAngle.
Regarding the 2nd query, it is true that the labels do not overlap but we have a little extra buffer for overlapping. That is why the labels were hidden.
~regards
Yifan_Zhang
Posted 8 July 2020, 5:30 am EST
Hi Ashwin,
Thanks for the answers. But setting the OverlappingLabels to Show still makes me feel concerned like we don’t want the overlapping labels and we don’t want the inconsistent label spaces as well. What I’m thinking is that if the overlapping labels are hidden, shouldn’t the space be still consistent?
ashwin.saxena
Posted 8 July 2020, 5:32 pm EST
Hey Yifan,
There is one other thing you can do. Instead of displaying the overlappingLabels, you may increase the unit between each of the axis labels. For example, if you will set the majorUnit of axisX to 3, then the space between the labels will increase but it will be consistent.
>>What I’m thinking is that if the overlapping labels are hidden, shouldn’t the space be still consistent?
The space between the labels is set by majorUnit but if the labels are overlapping, then they are hidden by default. As I said, if you will increase the majorUnit, then the space between the labels will also increase.
Please refer to the updated sample below and let me know whether this works for you:
https://jsfiddle.net/jcqm23x6/1/
~regards
Yifan_Zhang
Posted 10 July 2020, 6:16 pm EST
Hi Ashwin,
Thanks for the idea. The major unit might work if we know the actual data. However, the data can be changed and the chart can be resized, the labels would be even auto rotated when it is needed, it would be difficult for us to hard-code any major unit.
ashwin.saxena
Posted 12 July 2020, 8:06 pm EST
Hi Yifan,
You can update the majorUnit of x-axis as per your requirements.
Unfortunately, there are no other workaround for this issue. I would suggest you use the overlappingLabels along with the labelAngle property to rotate the labels with consistent space.
~regards
benoit.laplante
Posted 24 August 2022, 7:56 am EST
Hi agree with Yifan, unequal spacing looks weird. I am asking for an improvement request to find a way to configure axis for consistent spacing between ticks without overlapping labels. Something like chart.axisX.enforceConsistentMajorTickSpacing = true;
sonu.pandey
Posted 24 August 2022, 11:37 pm EST
Hello,
Could you please explain more about the request you have mentioned above? as per the above responses by ashwin on this thread. The scenario is expected and can be resolved by the above-shared approaches(which fit your requirement).
It would help us to explain the Dev team about your requirement, what would like to achieve by setting chart.axisX.enforceConsistentMajorTickSpacing.
Regards
