Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
60
IgxDataChartComponent: how to fix x axis width
posted

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

Parents
  • 34790
    Verified Answer
    Offline posted

    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.

Reply Children