Create Data Labels for Horizontal Bar Chart Custom Visualization

[cogsie]

Does anyone have a simple and basic example for creating data labels on a horizontal bar chart?

I am creating a simple custom visualization based on a horizontal bar chart.  I would like to add data labels, but I looked at the documentation for the DataLabelUtils and the DataLabelManagerDataLabelManager  but I am having difficulty understanding it.  Theoretically, I suppose I could create some SVG elements with the data values in them and have them anchored to the data points, but I was hoping there might be an easier built in way.  Also, I really like the collission detection that they have in the DataLabelManager and would love to take advantage of that.  Any help you can offer is much appreciated.   

[cogsie · Accepted solution]

In case anyone else has the same question, I thought I would post how I resolved this.

I wasn't able to figure out how to use the labels utility so instead I created my own labels.  It is composed of two elements, one being a text element and the other a rectangle (with rounded edges).  The positioning is based on the data points and then just offset from there a little bit.

The tricky part was making sure that the labels wouldn't go past an axis or overlap on top of each other.  In order to avoid this I put all the required values into lists (i.e. a list of x position, list of y position, list of hieght, etc.).  Then I compared the various list values to make sure there wasn't any undesired affects.  For example, in my particular case it is a horizontal bar chart and I wanted to make sure the labels did not go to the left of the y-axis.  After assigning the x-position for each label to a list variable I checked the label to see if any values were negative.  If they were, then I zeroed out all the relevant properties for that label so it would disappear.  

Then when I created the labels I iterated over the property lists and merged the results.  It seems to work exactly as intended.

Hopefully if you have a similar question/problem this is helpful.

[felixthecat_nyc]

Hi @cogsie - I was wondering if you could provide an example of this? I'm trying to achieve something similar and am not sure how to bind text boxes dynamically. Thanks