Feature Request: Labels above bars in bar chart

[wolframarnold]

Hi Nick, Weidong,

I know that the label method isn't effective for bar charts, but I'd like to make a feature request to add labels above the bars in a bar chart. It would be really helpful to see, e.g. the total bar height as a label above the bar. Similar as the labels in the row chart or the pie chart, but above the bar.

I love your work. It's been very helpful.

Cheers,
Wolf

[NickQiZhu]

I assume the label will be on even when brush is turned on? and labels will be arranged vertically above each bar? I guess this will work well with ordinal bar chart with only a few bars; it will probably look very crowded when applied on a large histogram.

[wolframarnold]

Yes, yes and yes. It's for a sparse bar chart with ordinal or dates (like
weeks, months) as x-coordinate.

I spoke with my friend Weidong Yang about this, and he suggested he could
contribute a pull request. We both love your work, by the way!

On Tue, Jul 2, 2013 at 8:25 AM, Nick Zhu notifications@github.com wrote:

I assume the label will be on even when brush is turned on? and labels
will be arranged vertically above each bar? I guess this will work well
with ordinal bar chart with only a few bars; it will probably look very
crowded when applied on a large histogram.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/211#issuecomment-20352901
.

www.RubyFocus.biz --- San Francisco --- direct: 650-576-9048

[NickQiZhu]

👍 thats great. I think it would be great if it can be implemented as a reusable renderlet for bar chart.

[wolframarnold]

Ah, interesting idea. I'll forward this to Weidong.

Cheers,
Wolf

On Tue, Jul 9, 2013 at 8:54 AM, Nick Zhu notifications@github.com wrote:

[image: 👍] thats great. I think it would be great if it can be
implemented as a reusable renderlet for bar chart.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/211#issuecomment-20684224
.

www.RubyFocus.biz --- San Francisco --- direct: 650-576-9048

[gordonwoodhull]

SO question with a hacky but working renderlet solution:

http://stackoverflow.com/questions/25026010/show-values-on-top-of-bars-in-a-barchart

[dimirc]

I added a new alternative as a renderlet on the SO question that @gordonwoodhull referred to.

Is it ok with you if I do a PR to integrate this on bar-chart.js? and maybe we could just have a .renderLabel(true) so that users can enable this if needed.

PD: When using as renderlet I need also to add some additional code to postRender and preRedraw so that labels look good while they move when bars change.

[gordonwoodhull]

Thanks, please do. It will be much cleaner if integrated into dc.js. Please include a couple tests as well.

[nreese]

What is the status of this issue? Did a pull request ever get merged into the baseline? If so, is there an example showing how to create a bar chart with labels?

[gordonwoodhull]

Hi @nreese there's never been a PR on this. I'd go with @dimirc's second answer to the SO question above, and take @mr23's answer into account as well. If you want to file a PR that would be awesome.

[nreese]

How should labels behave for stacked bar charts?

[gordonwoodhull]

I think they would just show the total. It would be kinda messy to have them overlay the next bar up...

[nreese]

I was thinking of placing the labels above the bars. What should happen if there is not enough space between the top of the bar and the top of the chart for the label? Should the label be placed below the bar top for these instances?

[gordonwoodhull]

I would expect the domain of the chart to stretch a bit in that case. But I guess it's debatable.

[nreese]

It looks like the domain can be expanded by setting yAxisPadding. Should dc.js try to automatically set yAxisPadding to an appropriate value when rendering labels or should this be left up to the developer to manually set yAxisPadding as they see fit?

[gordonwoodhull]

Sure. It's not perfect because it will also expand the padding below the chart, but it will do.

I would just leave it to the user, since we do not even automatically adjust the margins for axes or axis labels. (It would be nice, but probably better to address the layout problem in a comprehensive way. Like the others, this one depends on text height, which is somewhat tricky.)

[nitinsurana]

+1 for having labels for stacked bar charts too with band-level support i.e. a bar with 3 bands will have 3 labels in the center/top/bottom of each band. It'll be nice to have configurable option to decide the placement position in the bar - top/bottom/center.
http://stackoverflow.com/questions/20345572/adding-text-labels-in-middle-of-each-bar-stacked-bar-chart-mouse-over-events

[prashant22april]

Hi All,
I urgently require a error bar charts using dc.js. Any help in this area would be highly appreciated. Something similar to the below image I am looking out for:

[gordonwoodhull]

Hi @prashant22april, this is an interesting request. However, it's unrelated to this issue (although slightly similar). And I just noticed this issue is actually closed (implemented in #1031 for 2.0 beta 21).

Please open a separate issue, or better yet, create a jsfiddle or bl.ock with some sample data and post the question on SO, and I'll try to implement a renderlet solution (without having to change dc.js).

@nitinsurana, I just noticed your comment here. That's also a separate request from this ticket, which is closed. Could you please open another ticket with the options you'd like to see?