Moving Datalabel on top of horizontal bar

[anihow]

Want to know if there is any way to move data label on top of the bar rather than start,center and End.

I want to move data label to move few pixels away from label in horizontal bar chart. Is there any attributes to achieve this?

[simonbrunel]

Can you create a jsfiddle with what you have so far and post a screenshot of what you are trying to achieve?

[anihow]

@simonbrunel Please find my code and i have no idea regarding fiddle. Test.txt

As Shown in the below image, As of now both my labels and data labels are mixed.. I want my data labels($95,$90) to be moved right side to the labels(sun,mon) dynamically according to the users wish on top of the bar(what i mean is to move data labels like few millimeters away from labels according to user wish).I am able to place it end or starting or middle but i want data label somewhere between start and center on top of the bar and maintain same for all the bars in barchart. Is there any attribute to do that? Please let me know.

[simonbrunel]

A jsfiddle greatly helps us to experiment or debug your code and save us lot of time trying to figure out what's going on. Test.txt is almost useless since it requires too much environment setup in order to be able to get a result, but also depends on inaccessible resources such as barchartjson.

... Is there any attribute to do that?

No, there is nothing that will do that magically but you could:

• add left padding to compensate the scale label (datababels: {padding: {left: 42}}), but that only works if your labels have the same width that doesn't change. Else, you could use a scriptable option to dynamically compute the left padding based on the label approximate size.
• merge labels, but that only works if both should have the same style (ie. font, color, etc.)

formatter: function(value, context) {
    var index = context.dataIndex;
    var label = context.chart.data.labels[index];
    return label + ': $' + value;
}

[anihow]

@simonbrunel Hi Simon, PFB the fiddlejs .

https://jsfiddle.net/anihow/0us7t2wg/3/

In the above code i am trying to move data labels away from the labels on top of the bar but i,m unable to do. I have tried above options but it is restricting the labels font to be exactly same as data labels and i have observed that data labels are moving on basis of bar but i want them to move on basis of labels (Ex: I am trying to move all data labels 5 millimeters away from the labels independent of the bars). can you please help me with this?

[simonbrunel]

Thanks for the fiddle, I understand what you are trying to achieve but unfortunately there is no easy/clean way to implement that use case. First, you are facing the following issue for which I still don't have a proper solution (so if you want your labels at the start, you need to make your scale start at zero). Then, you can't align vertically and offset horizontally.

The only (very limited) workaround I can suggest (jsfiddle):

• make your chart start at zero (scale.ticks.beginAtZero)
• anchor: 'start' and align: -45: that will bring your data label on top, right aligned
• offset: 8: set a value that makes the label aligned with the other scale label
• padding: {left: 32}: move the label horizontally (use a value that matches your scale label width)

It's definitely not ideal.

[anihow]

@simonbrunel Thanks Simon for the prompt response. It works Good for me.

Any plan to implement this feature in any of your future releases?

[simonbrunel]

Sure but I'm not sure what feature needs to be implemented and how?