Forum Discussion
Create Data Labels for Horizontal Bar Chart Custom Visualization
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.
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.
2 Replies
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.
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
