Home forums Using CanvasJS Waterfall indexLabel Alignment Issue

This topic contains 5 replies, has 2 voices, and was last updated by  Shashi Ranjan 2 months, 3 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #24470

    Hello there,

    https://jsfiddle.net/mdrobinson0124/41yk3xdb/

    I’m working on a waterfall chart and using indexLabels to show the values above each section of the waterfall.
    I’ve attempted to use “indexLabelPlacement: ‘outside’ ” to show the indexLabels outside of the chart, but it’s rendering a few of them on top of the bar.

    I notice that if I don’t use an ‘isCumulativeSum’ on my last dataPoint, the labels work fine for my first 4 data points, but still not the last one. (uncomment line 14, comment out line 13 in my fiddle to see what I’m talking about).

    Am I missing an option for this? Again, my end goal is just to have the indexLabels appear above or below the waterfall bar segments instead of on top of them.

    Thanks for any help!

    • This topic was modified 2 months, 3 weeks ago by  mdrobinson0124. Reason: fixed link
    #24474

    I’ve been trying to pinpoint the issue.
    I think it might have something to do with the small incremental waterfall steps.

    In my fiddle, if I change the y value of the 3rd data point from -102198 to -1021980 (adding a zero), the indexLabels render correctly.

    Same if I add a zero to the end of the 2nd data point.

    It seems that having incremental values that are a certain level smaller than the first and last waterfall bars is causing the issue. Any known remedy to this?

    #24475

    Additionally (sorry to tack on),

    I don’t see a property that allows you to center align the dataPoints labels along the X axis. Is this possible?

    #24484

    @mdrobinson0124,

    The occurrence of the above-mentioned scenario is due to the fact that there is no space available on the top of the DataPoints to display the indexLabel. To overcome this you can increase the Axis Y maximum to a certain value so that there is enough space available at the top for the indexLabel to be displayed as shown in this updated JSFiddle.

    I don’t see a property that allows you to center align the dataPoints labels along the X axis. Is this possible?

    Sorry, this feature is not available as of now.

    ____
    Shashi Ranjan
    Team CanvasJS

    #24485

    Got it, that works. Thanks!

    Are there any current plans to have x-axis dataPoint label alignment features added?

    #24492

    @mdrobinson0124,

    We have added this feature in our wishlist but there is no definite timeline yet regarding its release.

    ____
    Shashi Ranjan
    Team CanvasJS

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

You must be logged in to reply to this topic.