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

Choropleth: Support fill color by value or label #2606

Open
fabio-carvalho88 opened this issue Jun 11, 2024 · 0 comments
Open

Choropleth: Support fill color by value or label #2606

fabio-carvalho88 opened this issue Jun 11, 2024 · 0 comments

Comments

@fabio-carvalho88
Copy link

fabio-carvalho88 commented Jun 11, 2024

Is your feature request related to a problem? Please describe.
#2068

Describe the solution you'd like
The goal is to have control over the color used for each country value.

Describe alternatives you've considered

I've tried using the following props:

  1. defs + match

Defining a pattern/color and then applying a match condition. The problem here is that it seems to only work with id and I want to be able to do it with values.

  1. fillColor

Passing a callback to apply color based on the current country label (name).

  fillColor={function ({ label }) {
          console.log("Label: ", label);
          if (
            tier1.find(({ id }) => id.toLowerCase() === label.toLowerCase())
          ) {
            return "#42108B";
          } else if (
            tier2.find(({ id }) => id.toLowerCase() === label.toLowerCase())
          ) {
            return "#7522E0"; // tier 2
          } else if (
            tier3.find(({ id }) => id.toLowerCase() === label.toLowerCase())
          ) {
            return "#EFE6FD"; // tier 3
          } else {
            return ""; 
          }
        }}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants