Add labelMinWidth property to axis

[XIO Technologies]

I would love to be able to set a minimum width for the labels (specifically on the y-axis) so graphs can be compared accurately in a side-by-side comparison. See image below.

The start of the graph does not line up because the data on the y-axis is not the same number of digits, but the graphs need to be aligned to be read and compared accurately.

• This topic was modified 6 years, 5 months ago by XIO Technologies.
• This topic was modified 6 years, 5 months ago by XIO Technologies.
• This topic was modified 6 years, 5 months ago by XIO Technologies.

[Vishwas R]

@xio-technologies,

Thanks for your feedback.

You can align axisY of multiple chart by setting margin based on axisX bounds. Please take a look at this JSFiddle.

—
Vishwas R
Team CanvasJS

[XIO Technologies]

Vishwas R Thank you for the quick response. Your solution would work great if I had access to all of the charts in one place, however I should have mentioned I am using these charts in individual Angular components. I have set up a demo that replicates how I am using them. Keep in mind, the data in the demo is static, however, in our production environment, the data is loaded over AJAX and updated every 30 seconds. I have the loading of the data working, but I just wanted to let you know so it can help you understand more about what I am trying to do.

Is there a way to accomplish what I am trying to do in an Angular environment using the solution you posted above? It seems like a minimum width property would be helpful here, so that I don’t have to have access to the other charts. If it helps, I know that the values on my y-axis will be between 1-6 digits long (0-999,999)

Link to Demo

• This reply was modified 6 years, 5 months ago by XIO Technologies.

[Vishwas R]

@xio-technologies,

Thanks for your valuable suggestion on labelMinWidth. I will discuss with the team regarding.

Meanwhile, you can get reference of the chart components that are created and set the axis margin as shown in the jsfiddle.

—
Vishwas R
Team CanvasJS

[XIO Technologies]

I got the chart references from the components as you suggested, and I am able to get the graphs aligned, however I am now running into a new issue. Each time the graphs are re-rendered, the graphs shift a little to the right. They stay aligned, but they get narrower and narrower each re-render. This is an issue, as the graphs rerender on window resize, new data being fed to the graphs, and toggling a dataset on/off from the legend. Here’s an Updated Demo. You can do any of the aforementioned things to see the behavior I am talking about.

[Vishwas R]

@xio-technologies,

You seem to observe this behaviour as you are changing margin every time the chart changes onGraphChanges. In this scenario as you keep hiding / showing dataSeries by clicking legend, which inturn triggers onGraphChanges, it keeps adding margin to the chart every time. Setting margin only once, to align axisY of multiple charts should work fine in your case.

Please take a look at this updated code.

—
Vishwas R
Team CanvasJS