Show values of bars inside bar charts #36511

mmeshi · 2019-05-11T19:31:16Z

Users can now add labels to bar chart also. (from all types: horizontal and vertical, stacked and normal)
Labels are auto hide if there is not enough space to display.
In stack mode (labels display inside the bar) - ~~color are varsia the bar's color (brighter or darker)~~ color are black or white depends on the darkness of the bar color.

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

elasticmachine · 2019-05-11T19:31:18Z

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

mmeshi · 2019-05-11T20:21:30Z

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

yes

timroes · 2019-05-22T09:52:17Z

Jenkins, test this

elasticmachine · 2019-05-22T10:08:13Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

timroes · 2019-05-24T11:19:10Z

Hi, could you please merge current master into your branch again. There were some CI failures that should be fixed by this.

mmeshi · 2019-05-24T11:31:02Z

This is what i did when i force-push before couple of minutes ago. is it still required?

timroes · 2019-05-24T11:33:02Z

Jenkins, test this - sorry I have overlooked the force push, after the last CI failure.

elasticmachine · 2019-05-24T12:54:28Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticcla · 2019-05-27T20:10:44Z

Hi @mmeshi, we have found your signature in our records, but it seems like you have signed with a different e-mail than the one used in your Git commit. Can you please add both of these e-mails into your Github profile (they can be hidden), so we can match your e-mails to your Github profile?

mmeshi · 2019-05-29T07:05:01Z

Hi @mmeshi, we have found your signature in our records, but it seems like you have signed with a different e-mail than the one used in your Git commit. Can you please add both of these e-mails into your Github profile (they can be hidden), so we can match your e-mails to your Github profile?

Done.

elasticmachine · 2019-05-29T17:49:17Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-06-07T16:20:15Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-06-09T20:26:06Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

markov00

Hey @mmeshi sorry for the delay on reviewing this.
I've took a first check on the functionality and this is what I've found:

I've tested with few color combination but seems that in some situation, adding the inverted color doesn't work right. I also think it's better to avoid using inverted colors on text and it's maybe better to add black or white color depending on the darkness of the bar color. For that you can use the utility function in EUI https://elastic.github.io/eui/#/utilities/is-color-dark:

import { isColorDark } from '@elastic/eui/lib/services';
const fontColor = isColorDark(...color) ?  'white' : 'black' ;

On this case for example the green and the blue/violet text on bars are quite indistinguishable from the bar

the Show Labels settings label doesn't imply a specific meaning. Maybe it's better to have something like: Show bar values on chart or Show values on chart @emmacunningham can you provide us a better "label" for this setting?
as this function is only available for bars, it will be better to hide the Show labels setting if we are visualising a line or area.

Thanks and sorry again for the long delay

cchaos

From a SASS perspective, LGTM

markov00

Changes LGTM! Thanks for implementing that feature, a lot of users request that. ❤️

elasticmachine · 2019-06-24T10:24:47Z

Pinging @elastic/kibana-app

timroes

Tested on Chrome Linux, works fine, code LGTM.

* add labels to bar chart * code simplification * clean trailing spaces * for stack mode label color will be w/b * change label message on option panel, and show the option only for histogram type * better way to manipulate axis to make room for labels * fixes for user defined axis, and negative value * fix label position in grouped vertical mode * refactor label color style to css classes * cosmetic changes in label classes

timroes · 2019-06-24T15:31:28Z

Hi Meir,

I just merged the PR and we're now "backporting" it for the 7.3 release. Thanks a lot for your contribution of such a valuable and highly requested feature. We really appreciate that you took the time to work with Marco and Caroline to get everything in a mergable state.

Cheer,
Tim

mmeshi · 2019-06-24T15:57:29Z

Many thanks for @timroes and other involved. I’m gonna to celebrate my first PR 🎉🎂

elasticmachine · 2019-06-24T16:31:51Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

* add labels to bar chart * code simplification * clean trailing spaces * for stack mode label color will be w/b * change label message on option panel, and show the option only for histogram type * better way to manipulate axis to make room for labels * fixes for user defined axis, and negative value * fix label position in grouped vertical mode * refactor label color style to css classes * cosmetic changes in label classes

milandrop · 2019-07-08T10:14:06Z

Hi Guys,

This future looks really interesting. Does anybody knows when it will been add to Kibana? I cannot see it yet

timroes · 2019-07-08T10:56:58Z

Hi, as you can see from the labels in this PR, the feature has been merged for the 7.3.0 release.

markov00 · 2019-08-01T07:58:41Z

Released yesterday: https://www.elastic.co/blog/kibana-7-3-0-released

AlexM566 · 2021-10-28T14:10:28Z

Hi,

Is this feature available in Lens, I am not sure if you can do it..

Thx,
Alex

nickofthyme · 2021-10-28T14:57:34Z

Hey Alex, unfortunately this is not yet widely supported in Lens. We are working through some issues with displaying values which you can track in #82954.

Currently, the option to show these values is under the Visual options (i.e. the brush icon ). This option is only enabled for charts with horizontal axis using Filters or Top Values functions. This is true for 7.15.1, I'm not sure about support for this on older versions or when this feature was added.

markov00 requested review from emmacunningham, markov00 and timroes May 20, 2019 15:24

rayafratkina changed the title ~~add labels to bat chart~~ add labels to bar chart May 22, 2019

timroes assigned markov00 and emmacunningham May 24, 2019

mmeshi force-pushed the barChartLabels branch from b04cfbf to 8cd5e3a Compare May 24, 2019 11:13

mmeshi force-pushed the barChartLabels branch from 8cd5e3a to 279e577 Compare May 27, 2019 20:10

mmeshi force-pushed the barChartLabels branch from 279e577 to 453a51b Compare May 27, 2019 20:21

mmeshi closed this May 29, 2019

mmeshi reopened this May 29, 2019

mmeshi force-pushed the barChartLabels branch 2 times, most recently from 2058be4 to 929bd1d Compare June 7, 2019 16:07

mmeshi force-pushed the barChartLabels branch from 929bd1d to 26c4812 Compare June 9, 2019 19:22

mmeshi closed this Jun 9, 2019

mmeshi reopened this Jun 9, 2019

markov00 reviewed Jun 10, 2019

View reviewed changes

cchaos approved these changes Jun 19, 2019

View reviewed changes

markov00 approved these changes Jun 24, 2019

View reviewed changes

markov00 added Feature:XYAxis XY-Axis charts (bar, area, line) release_note:enhancement Team:Visualizations Visualization editors, elastic-charts and infrastructure labels Jun 24, 2019

markov00 added v7.2.0 v7.3.0 v8.0.0 and removed v7.2.0 labels Jun 24, 2019

Merge branch 'master' of github.com:elastic/kibana into barChartLabels

3260ca1

timroes approved these changes Jun 24, 2019

View reviewed changes

timroes merged commit 0e20785 into elastic:master Jun 24, 2019

timroes changed the title ~~add labels to bar chart~~ Show values of bars inside bar charts Jun 24, 2019

timroes mentioned this pull request Jun 24, 2019

[7.x] Add setting to allow labels on bar chart (#36511) #39521

Merged

timroes added the release highlight label Jun 24, 2019

mmeshi deleted the barChartLabels branch June 24, 2019 15:36

timroes mentioned this pull request Nov 4, 2019

Show y-axis values within chart #11983

Closed

timroes mentioned this pull request Jan 18, 2020

[Lens] Display total value on top of each bar in the vertical bar chart #55262

Open

sulemanof mentioned this pull request May 19, 2020

[Visualize] Bar chart: Show missing values on chart setting #66375

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Show values of bars inside bar charts #36511

Show values of bars inside bar charts #36511

mmeshi commented May 11, 2019 •

edited

Loading

elasticmachine commented May 11, 2019

mmeshi commented May 11, 2019

timroes commented May 22, 2019

elasticmachine commented May 22, 2019

timroes commented May 24, 2019

mmeshi commented May 24, 2019

timroes commented May 24, 2019

elasticmachine commented May 24, 2019

elasticcla commented May 27, 2019

mmeshi commented May 29, 2019

elasticmachine commented May 29, 2019

elasticmachine commented Jun 7, 2019

elasticmachine commented Jun 9, 2019

markov00 left a comment •

edited

Loading

cchaos left a comment

markov00 left a comment

elasticmachine commented Jun 24, 2019

timroes left a comment

timroes commented Jun 24, 2019

mmeshi commented Jun 24, 2019

elasticmachine commented Jun 24, 2019

milandrop commented Jul 8, 2019

timroes commented Jul 8, 2019

markov00 commented Aug 1, 2019

AlexM566 commented Oct 28, 2021

nickofthyme commented Oct 28, 2021 •

edited

Loading

Show values of bars inside bar charts #36511

Show values of bars inside bar charts #36511

Conversation

mmeshi commented May 11, 2019 • edited Loading

Checklist

For maintainers

elasticmachine commented May 11, 2019

mmeshi commented May 11, 2019

timroes commented May 22, 2019

elasticmachine commented May 22, 2019

💔 Build Failed

timroes commented May 24, 2019

mmeshi commented May 24, 2019

timroes commented May 24, 2019

elasticmachine commented May 24, 2019

💔 Build Failed

elasticcla commented May 27, 2019

mmeshi commented May 29, 2019

elasticmachine commented May 29, 2019

💚 Build Succeeded

elasticmachine commented Jun 7, 2019

💔 Build Failed

elasticmachine commented Jun 9, 2019

💚 Build Succeeded

markov00 left a comment • edited Loading

Choose a reason for hiding this comment

cchaos left a comment

Choose a reason for hiding this comment

markov00 left a comment

Choose a reason for hiding this comment

elasticmachine commented Jun 24, 2019

timroes left a comment

Choose a reason for hiding this comment

timroes commented Jun 24, 2019

mmeshi commented Jun 24, 2019

elasticmachine commented Jun 24, 2019

💔 Build Failed

milandrop commented Jul 8, 2019

timroes commented Jul 8, 2019

markov00 commented Aug 1, 2019

AlexM566 commented Oct 28, 2021

nickofthyme commented Oct 28, 2021 • edited Loading

mmeshi commented May 11, 2019 •

edited

Loading

markov00 left a comment •

edited

Loading

nickofthyme commented Oct 28, 2021 •

edited

Loading