Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show bar value above each bar #7116

Closed
JeremyColton opened this issue May 3, 2016 · 25 comments · Fixed by #36511
Closed

Show bar value above each bar #7116

JeremyColton opened this issue May 3, 2016 · 25 comments · Fixed by #36511
Labels
Feature:ElasticCharts Issues related to the elastic-charts library Feature:Visualizations Generic visualization features (in case no more specific feature label is available) release_note:enhancement Team:Visualizations Visualization editors, elastic-charts and infrastructure

Comments

@JeremyColton
Copy link

After speaking with @Bargs I am raising this feature request:

I have a bar chart of count on Y-Axis and events on X-axis. When I mouseover a bar a tooltip appears with lots of info inside of it including the value of the count.

Please can you add a feature where I can show just the value of the count above each bar by default when the graph loads?

Many Thanks.

@rashidkpc rashidkpc changed the title Show bar count value above each bar by default for bar chart visual Show bar count value above each bar May 5, 2016
@rashidkpc rashidkpc changed the title Show bar count value above each bar Show bar value above each bar May 5, 2016
@JeremyColton
Copy link
Author

JeremyColton commented May 29, 2016

Hi @rashidkpc, any idea when this will be implemented, if at all? To emphasise the need, my graph has a Y axis that ranges from 0 to 10,000. One of my bars has a count of 5 and so the bar is scaled down such that it appears as a very thin coloured line. But doing mouse-over on it does not show the usual popup showing that bar's data. The line is so thin that the mouse-over event doesn't fire!

Many, many thanks.

@Bargs
Copy link
Contributor

Bargs commented May 31, 2016

@JeremyColton since this is a P4 it probably won't get picked up until a dev has the time and interest, so it could be awhile. PRs are welcome of course!

@tbragin tbragin added the Feature:Visualizations Generic visualization features (in case no more specific feature label is available) label Nov 1, 2016
@ppisljar ppisljar self-assigned this Dec 9, 2016
@epixa epixa removed the P4 label Apr 25, 2017
@SamyCoenen
Copy link

I wish this was a feature. It doesn't seem very difficult, you already have the value if your mouse is over the graph, right?

@raajheshkannaa
Copy link

+1 would love to see this built. Thank You.

@jpertejo
Copy link

+1 I also would like to see this feature. I think can be very useful in some cases to give additional information to users.

@talifhani
Copy link

👍

6 similar comments
@McSpace
Copy link

McSpace commented Nov 28, 2017

+1

@caio-tenorio
Copy link

+1

@SnchitGrover
Copy link

+1

@shinvdu
Copy link

shinvdu commented Mar 12, 2018

+1

@florck
Copy link

florck commented Mar 16, 2018

+1

@jellosozen
Copy link

jellosozen commented Apr 16, 2018

+1

@timroes timroes added the Feature:ElasticCharts Issues related to the elastic-charts library label May 3, 2018
@patdel76
Copy link

+1

@alexfrancoeur
Copy link

@timroes @AlonaNadler I know we have introduced support for data labels in pie charts and there was some exploratory work done for introducing to point series visualizations as well. Are we considering data label support for any visualization part of the visualization enhancements in the new editor experience?

@timroes
Copy link
Contributor

timroes commented May 15, 2018

@alexfrancoeur that is rather unrelated to the new editor, but to our new chart implementation, thus I labeled it with :EuiChart. We can support this if we build functionality for it into the chart. Depending on the state of the new editor, we could still add an option for that into the old editor.

@ssankarankut
Copy link

ssankarankut commented May 16, 2018

+1 @alexfrancoeur, @timroes Is this coming anytime soon ?

@timroes
Copy link
Contributor

timroes commented May 16, 2018

Not likely in any of the next minor releases. We first need to create feature parity with the new EUI chart component before we can use it in Kibana and then think about new chart styling features like this we want to add.

@azeebazy
Copy link

+1

@ssankarankut
Copy link

Thanks @timroes. I would like to make this changes to the current release and contribute. Any pointers to start with ? Since we already have data coming up in tooltip is it straight forward to make this implementation in all point series charts ?

@timroes
Copy link
Contributor

timroes commented May 16, 2018

You would basically need to implement that feature in the current chart implementation, which is in src/ui/public/vislib for all the charts you would want it and add options to the appropriate editors, that trigger that behavior. I don't think it will be straight forward, but will quite take some implementation effort to get this done (which is also why I don't want to do this for the current chart implementation anymore, that we know we will replace somewhere down the road).

@renicon
Copy link

renicon commented Jul 8, 2018

+1

1 similar comment
@27abhishek
Copy link

+1

@timroes timroes added the Team:Visualizations Visualization editors, elastic-charts and infrastructure label Sep 16, 2018
@niulin
Copy link

niulin commented Oct 11, 2018

+1

@suchitrasahoo7
Copy link

+1
When will this feature be available.
We need to show the values of each bar to present the exact data.

@ppisljar ppisljar removed their assignment Feb 11, 2019
@pdoongarwal
Copy link

+1

Ikuni17 pushed a commit that referenced this issue Sep 12, 2023
Major changes in this PR:

## Removal of `.euiAccordionForm` classNames

EUI is moving away from providing global `classNames` styles for
components - where possible, we want to provide props as opposed to
styles. As part of our ongoing Emotion conversion, we have removed the
following `EuiAccordion`-specific classes:
- `.euiAccordionForm` (replaced with `borders="horizontal"`)
- `.euiAccordionForm__button` (replaced with `buttonProps={{
paddingSize: 'm' }}`)
- `.euiAccordionForm__title` styles - this was only removing text
underlines on hover. If still desired, re-add this behavior with custom
CSS.
- `.euiAccordionForm__extraAction` - there was 1 usage of this in Kibana
in Watcher, which was converted to one-off custom inline Emotion CSS
instead.

This change accounts for the first 3-4 commits in the PR. ⚠️ If your
team was one of the 4-5 teams affected by this change, we would greatly
appreciate your help QAing the UI and ensuring it looks as desired/the
same as before.

## Fixed `EuiHeader` affordance

The Sass `euiHeaderAffordForFixed` mixin has been deprecated and
replaced by a global `--euiFixedHeadersOffset` CSS variable. This
variable updates independently and dynamically based on the number of
fixed headers on the page, and is usable by both Sass and Emotion. All
underlying EUI components that need to account for fixed headers (such
as flyouts and page sidebars/templates) have been updated to consume
this new variable.

This change cleans up a great deal of Sass code, and is incidentally
extremely timely with serverless efforts (as serverless has only one
fixed header and the classic Kibana chrome has two).

This change constitutes a majority of the commits in this PR, which
involve removing various fixed Sass header variables and replacing them
with the new CSS variable. I strongly recommend [reviewing changes by
commit if
possible](https://github.com/elastic/kibana/pull/165790/commits) to see
any associated changes that make sense together with any of your touched
file(s). ⚠️ If your team was affected by this change (primarily due to
custom header layouts), your help would be greatly appreciated QAing
your app to ensure no UI regressions in that regard have occurred.

---

`v88.1.0`⏩ `v88.2.0`

## [`88.2.0`](https://github.com/elastic/eui/tree/v88.2.0)

- Added a new `EuiTextTruncate` component, which provides custom
truncation options beyond native CSS
([#7116](elastic/eui#7116))
- Fixed-positioned `EuiHeader`s now set a global CSS
`--euiFixedHeadersOffset` variable, which updates dynamically based on
the number of fixed headers on the page.
([#7144](elastic/eui#7144))
- `EuiFlyout`s now dynamically set their position, height, and mask
based on the number of fixed headers on the page.
([#7144](elastic/eui#7144))
- Sticky-positioned `EuiPageSidebar`s now dynamically set their position
and height based on the number of fixed headers on the page. This can
still be overridden via the `sticky.offset` prop if needed.
([#7144](elastic/eui#7144))
- `EuiPageTemplate` now dynamically offsets content from any fixed
headers on the page. This can still be overridden via the `offset` prop
if needed. ([#7144](elastic/eui#7144))
- Updated `EuiAccordion` with a new `borders` prop
([#7154](elastic/eui#7154))
- Updated `EuiAccordion` with a new `buttonProps.paddingSize` prop
([#7154](elastic/eui#7154))

**Deprecations**

- Deprecated the Sass `euiHeaderAffordForFixed` mixin. Use the new
global CSS `var(--euiFixedHeadersOffset)` variable instead.
([#7144](elastic/eui#7144))

**CSS-in-JS conversions**

- Except for generic CSS utilities, EUI is moving away from providing
global `classNames` that are component-specific. As part of this effort,
we have removed the following `EuiAccordion`-specific classes:
([#7154](elastic/eui#7154))
- Removed `.euiAccordionForm` styles. Use the `borders="horizontal"`
prop instead
- Removed `.euiAccordionForm__button` styles. Use the `buttonProps={{
paddingSize: 'm' }}` prop instead
- Removed `.euiAccordionForm__extraAction` styles. Convert this to your
own custom CSS if necessary.
- Removed `.euiAccordionForm__title` styles. Convert this to your own
custom CSS if necessary.

---------

Co-authored-by: Stratoula Kalafateli <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:ElasticCharts Issues related to the elastic-charts library Feature:Visualizations Generic visualization features (in case no more specific feature label is available) release_note:enhancement Team:Visualizations Visualization editors, elastic-charts and infrastructure
Projects
None yet
Development

Successfully merging a pull request may close this issue.