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

Fill colors mismatch with tooltip colors? #1847

Closed
tony opened this issue Jan 1, 2021 · 5 comments
Closed

Fill colors mismatch with tooltip colors? #1847

tony opened this issue Jan 1, 2021 · 5 comments
Labels

Comments

@tony
Copy link

tony commented Jan 1, 2021

Is there a canonical way to specify these?

Description

image

Steps to check or reproduce

Sandbox example: https://stackblitz.com/edit/chart-mouseover-tooltip-colors?file=index.ts

@netil netil added the bug label Jan 7, 2021
@netil
Copy link
Member

netil commented Jan 7, 2021

It seems the specified color value from data.color isn't applied for tooltip.
Thanks for the report.

netil added a commit to netil/billboard.js that referenced this issue Jan 8, 2021
Fix insconsistent param type for color callback function

Ref naver#1847
@netil netil closed this as completed in 86ef214 Jan 8, 2021
@netil
Copy link
Member

netil commented Jan 8, 2021

The second param should pass data type, rather than the data id string.
So, your example code need to be change as follows.

color: (color, label) => {
     // as-is: return dataStore[label] ?? color;
     // to-be: return dataStore[label.id] ?? color;
}

you can try by installing the next tagged release.

npm install billboard.js@next

github-actions bot pushed a commit that referenced this issue Jan 8, 2021
# [2.2.0-next.4](2.2.0-next.3...2.2.0-next.4) (2021-01-08)

### Bug Fixes

* **color:** fix color callback mismatch ([86ef214](86ef214)), closes [#1847](#1847)
* **types:** fix .load() data type ([7108e7b](7108e7b)), closes [#1848](#1848)

### Features

* **gauge:** added support for drawing gauge from 'startingAngle' to 'arcLength' ([25954ad](25954ad)), closes [#1633](#1633) [#1803](#1803) [#1849](#1849)
@tony
Copy link
Author

tony commented Jan 9, 2021

@netil Hi there

I updated to 2.2.0-next.4 here,

can you explain what needs to be changed? I don't see an .id output in the colors

https://github.com/tony/cv/pull/1171/files#diff-24a94a1493a54600961bb8d87c244813ba47ddbcdee350436d7853af7a35c4d6R255

https://cv-react-v2.git-pull.com/dev/branch/v2-billboard.js-next/

@netil netil reopened this Jan 9, 2021
netil added a commit to netil/billboard.js that referenced this issue Jan 9, 2021
Fix color value setting caused by the naver#1857

Ref naver#1847
@netil netil closed this as completed in fad9e86 Jan 9, 2021
github-actions bot pushed a commit that referenced this issue Jan 9, 2021
# [2.2.0-next.5](2.2.0-next.4...2.2.0-next.5) (2021-01-09)

### Bug Fixes

* **arc:** fix setting color value ([fad9e86](fad9e86)), closes [#1857](#1857) [#1847](#1847)
@netil
Copy link
Member

netil commented Jan 9, 2021

@tony try again with the next.5 release.

You can try the fixed version at:

@tony
Copy link
Author

tony commented Jan 9, 2021

github-actions bot pushed a commit that referenced this issue Jan 26, 2021
# [2.2.0](2.1.4...2.2.0) (2021-01-26)

### Bug Fixes

* **api:** fix incorrect legend text positioning ([f1ede3f](f1ede3f)), closes [#1888](#1888)
* **api:** fix zoom for timesries axis ([0421a50](0421a50)), closes [#1868](#1868)
* **arc:** fix setting color value ([fad9e86](fad9e86)), closes [#1857](#1857) [#1847](#1847)
* **axis:** fix incorrect tick interval calculation ([1a96f3e](1a96f3e)), closes [#1896](#1896)
* **axis:** rotated horizontal xAxisHeight is calculated correctly after loading new data ([ef2754f](ef2754f)), closes [#1786](#1786) [#1787](#1787)
* **bar:** fix bar width on zoom ([25e987a](25e987a)), closes [#1907](#1907)
* **bar:** fix bar width rendering for 'total' data key ([eacaecb](eacaecb)), closes [#1818](#1818)
* **browser:** fix referencing global order ([8f84cb3](8f84cb3)), closes [#1778](#1778)
* **browser:** fix retrieving global ([3474ac0](3474ac0)), closes [#1826](#1826)
* **color:** fix color callback mismatch ([86ef214](86ef214)), closes [#1847](#1847)
* **data:** fix data.order to work for arc types ([3a716a0](3a716a0)), closes [#1863](#1863)
* **eventrect:** fix resizing event rect element after .load() ([12bf547](12bf547)), closes [#1864](#1864)
* **eventRect:** fix data.onclick work for scatter/bubble ([109c87d](109c87d)), closes [#1795](#1795)
* **point:** fix usePoint defs id value ([6df4653](6df4653)), closes [#1887](#1887)
* **radar:** fix data label text position ([c69d674](c69d674)), closes [#1871](#1871)
* **text:** data labels are working in Internet Explorer again ([865224e](865224e)), closes [#1877](#1877)
* **tooltip:** fix arc's tooltip interaction ([a8586a3](a8586a3)), closes [#1859](#1859)
* **types:** fix .load() data type ([7108e7b](7108e7b)), closes [#1848](#1848)

### Features

* **api:** make return values for axis.labels() ([efa5174](efa5174)), closes [#1865](#1865)
* **data:** Intent to ship data.label multiline ([8903aa6](8903aa6)), closes [#1784](#1784)
* **data.labels.colors:** Add callback support ([ac1affa](ac1affa)), closes [#1845](#1845)
* **gauge:** added support for drawing gauge from 'startingAngle' to 'arcLength' ([25954ad](25954ad)), closes [#1633](#1633) [#1803](#1803) [#1849](#1849)
* **gauge:** Intent to ship gauge.background ([632c600](632c600)), closes [#1804](#1804)
* **pie:** Intent to ship pie.outerRadius ([ca67418](ca67418)), closes [#1825](#1825)
* **point:** Intent to ship point.opacity ([fc5ad35](fc5ad35)), closes [#1867](#1867)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants