Nivo: Choropleth Legend is Missing for unknownColor.

Created on 13 Jun 2020  路  3Comments  路  Source: plouc/nivo

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

geo bug

Most helpful comment

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

All 3 comments

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

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

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tj picture tj  路  4Comments

danpettay picture danpettay  路  3Comments

stahlmanDesign picture stahlmanDesign  路  4Comments

Haaziq-Uvais picture Haaziq-Uvais  路  3Comments

p45mark picture p45mark  路  3Comments