plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.24k stars 1.03k forks source link

Choropleth Legend is Missing for unknownColor. #992

Open Buvaneshkumar7 opened 4 years ago

Buvaneshkumar7 commented 4 years ago

unknownColor is missing in Legends on Choropleth, please add the this.

wyze commented 4 years ago

Hi @Buvaneshkumar7, I'm not sure I follow. Can you explain a little bit please? Or show an example of what you mean?

Buvaneshkumar7 commented 4 years ago

Hi @wyze, I am using @nivo/geo in my project to plot the chart and I have added legends to the charts .There is a props "unknownColor" which is used to color the country that has no value, is there any way to add this the legends.

As of now legends is not showing for the country that has no value. As you see the attached image there are few countries with blue color how to add this to legends.

  const MyResponsiveChoropleth = ({ data /* see data tab */ }) => (

  <ResponsiveChoropleth
    data={data}
    features={countries.features}
    colors="nivo"
    unknownColor="blue"
    label="properties.name"
    valueFormat=".2s"
    projectionTranslation={[0.5, 0.5]}
    enableGraticule={true}
    graticuleLineColor="#dddddd"
    borderWidth={0.5}
    borderColor="#152538"
    legends={[
      {
        anchor: "bottom-left",
        direction: "column",
        justify: true,
        translateX: 20,
        translateY: -100,
        itemsSpacing: 0,
        itemWidth: 94,
        itemHeight: 18,
        itemDirection: "left-to-right",
        itemTextColor: "#444444",
        itemOpacity: 0.85,
        symbolSize: 18,
        effects: [
          {
            on: "hover",
            style: {
              itemTextColor: "#000000",
              itemOpacity: 1
            }
          }
        ]
      }
    ]}
  />
)
Capture
wyze commented 4 years ago

Okay, thanks for the more detailed response. I'll have to take a look at how the legend data is generated.