Home › Forums › Feature Requests & Feedback › Add labelMinWidth property to axis

Add labelMinWidth property to axis

Viewing 6 posts - 1 through 6 (of 6 total)
  • June 27, 2018 at 11:37 pm #21292

    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.

    Performance Time Series Data (Right click + open in new tab)

    June 28, 2018 at 12:08 am #21297

    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

    June 28, 2018 at 2:15 am #21298

    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

    June 29, 2018 at 11:16 pm #21343

    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

    July 9, 2018 at 11:27 pm #21731

    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.

    July 10, 2018 at 11:10 am #21740

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.