Hi,
I have been requested to make a series of data charts starting at the same X to have the same width, so that all the intervals coincide visually (they're placed one below the other). It's of course possible to fix the width of the IgxChartComponent itself, but this won't do because these charts contain different vertical axes (one might contain one vertical axis, another might contain three) and there is no way to control the width of the actual chart rendered in the canvas (at least as far as I know).
I have tried the rather awkward approach of adding supplemental vertical axis rendered in white, so that the actual rendered charts match visually. As a brute-force approach as it may seem it works... until I hover on the chart with the most vertical axes, the crosshairs and the axis annotations get rendered... and the axes become slighty wider, thus causing the charts to be misaligned.
Any suggestion as to how to achieve this effect will be much appreciated.
Kind regards
Hello Cesar,
I have been investigating into the behavior you are describing, and it sounds like you have multiple igx-data-chart components stacked vertically and you are essentially trying to synchronize them. My best recommendation in this case would be to first ensure that each chart is the same width, and then to utilize the labelExtent property of the igx-numeric-y-axis. This property determines the amount of space that a particular y-axis takes up as it determines the amount of space between the axis and the edge of the control.
If you have one chart with a single igx-numeric-y-axis and another with two, you can essentially synchronize the width of the x-axis by setting the labelExtent of the two y-axes and then setting it to the sum of those two labelExtents to the one y-axis. For example, if you set each of the two y-axes to labelExtent=30, you can set the labelExtent of the one to 60 have them take up the same amount of space.
Please let me know if you have any other questions or concerns on this matter.
Hi Andrew,
thanks a lot for your fast and accurate response. It has worked, as far as the chart's width is concerned. There's also the secondary issue of making the grid lines coincide when the data sets in the different charts have slightly different minimum and maximum X values. The solution I've been trying is to manually set the minimum/maximum at the X axis as the minimum/maximum of the whole set of all chart's data sets. There is another property called 'actual(Minimum|Maximum)' there's no much information about. Should I guess it yields the currently rendered minimum and maximum when zooming is applied?
sorry for this late answer. Setting min/max on the X axis worked like a charm and all our vertically stacked data charts now look beautifully aligned and comparable by a simple visual inspection.
Thanks a lot for your feedback.
Thank you for your update on this matter. I am glad this worked to synchronize the widths of the chart.
Regarding the gridline synchronization, I would continue with the idea of keeping the minimum and maximum of the X-Axis the same. Since you can set the minimumValue and maximumValue in this case, it sounds like you are likely using an igx-numeric-x-axis, and so if you synchronize the values of those, you should be able to easily synchronize the gridlines.
Regarding the “actual” minimum/maximum value, these should only be used when you don’t explicitly set the minimumValue and maximumValue of the axis. There is also an actualVisible Minimum/Maximum value, which returns the values that are visible when zooming.