Bar Chart Label Overflow Hidden

3 posts, 0 answers
  1. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 13 Jan 2014 Link to this post

    I'm experiencing a difference between IE and Chrome with the label overflow on the charts.  I'm using the sparkline to create a few barcharts in a table, and the labels are being cut off when viewing it in Chrome, overflow is visible in IE10.

    Attached are some screenshots.  The bottom bar is 100%, the value = valueAxis.max.  The labels are set to "outsideEnd".  I've tried "insideEnd" which works when the value is 100%, but when the bar is 0% the "insideEnd" labels are cut off.  Not sure if I can make it conditional, display "insideEnd" if bar value is >50% and "outsideEnd" if bar value is <= 50%...

    DataViz version is Q3 2013 1119.

    The chart hierarchy is in:
          <table><tr><td><div><span id="sparkline"></span></div></td></tr></table>
    I've tried setting overflow:visible on all of the parent elements.
  2. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 13 Jan 2014 Link to this post

    Played with the dataBound event to use 'outsideEnd' when less than 25%, otherwise 'insideEnd'.  This works in the meantime, although not exactly the behavior I'd like (looks a little funny when there are several bars around that mark: 23, 24, 25, 26, 27, etc).
    dataBound: function (e) {
        e.sender.options.series[0].labels.position = function (point) {
            if (point.value >= 25) {
                return 'insideEnd';
            }
            return 'outsideEnd';
        }
    }
  3. Kendo UI is VS 2017 Ready
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 15 Jan 2014 Link to this post

    Hello,

    I don't think I can offer anything better than the functional approach that you're using.

    We have some research going regarding smart label position w/boundary detection.
    This is not ready for the prime time yet, but I hope one day such patches won't be necessary.

    Regards,
    T. Tsonev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top