How can I show 0 value in @nivo/bar graph, or is there any way to show No Data label if the value is 0 coming from api

Question

I want to show 0 value on the Nivo Bar Graph, when the value is 0 it's now showing any line, is there any way to show 0 value in Bar graph. How can we add a No Data label if the value is zero on the graph line?

Graph Image

In the above picture link, the Budget and Quality Assurance percentage is 0, I want to show no data label on this line

Here is the code:

<ResponsiveBar
    data={this.state.compComparisonDataDivisionWiseDMEApi.data}
    keys={this.state.compComparisonDataDivisionWiseDMEApi.keys}
    indexBy="type"
    margin={{ top: 100, right: 0, bottom: 60, left: 100 }}
    padding={0.3}
    innerPadding={10}
    label={d => `${d.value}%`}
    // onClick={e => this.barChartClicked(e)}
    groupMode="grouped"
    colors={["#3d1f42", "#542b5a", "#68366f", "#93519c", "#68356f", "#93519c"]}
    layout="vertical"
    enableGridY={false}
    defs={[
        {
            id: 'dots',
            type: 'patternDots',
            background: 'inherit',
            color: '#38bcb2',
            size: 4,
            padding: 1,
            stagger: true
        },
        {
            id: 'lines',
            type: 'patternLines',
            background: 'inherit',
            color: '#eed312',
            rotation: -45,
            lineWidth: 6,
            spacing: 10
        }
    ]}
    fill={[
        {
            match: {
                id: 'fries'
            },
            id: 'dots'
        },
        {
            match: {
                id: 'sandwich'
            },
            id: 'lines'
        }
    ]}
    borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
    axisTop={null}
    axisRight={null}
    axisBottom={{
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: '',
        legendPosition: 'middle',
        legendOffset: 50
    }}
    axisLeft={{
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: '',
        legendPosition: 'middle',
        legendOffset: -60
    }}
    labelSkipWidth={12}
    labelSkipHeight={12}
    labelTextColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
    legends={[
        {
            dataFrom: 'keys',
            anchor: 'top-right',
            direction: 'column',
            justify: false,
            translateX: -100,
            translateY: -100,
            itemsSpacing: 2,
            itemWidth: 150,
            itemHeight: 25,
            itemDirection: 'left-to-right',
            itemOpacity: 0.85,
            symbolSize: 20,
            effects: [
                {
                    on: 'hover',
                    style: {
                        itemOpacity: 1
                    }
                }
            ]
        }
    ]}
    animate={true}
    motionStiffness={90}
    motionDamping={15}
/>

Answer 1

In the latest version of @nivo/bar (0.67.0 at this time), the bar with value zero are not filtered out. With zero values you will have :

To move the label up only for those with values 0, you can override the label props:

<ResponsiveBar
    .....
    label={(d) =>
        d.value === 0 ? <tspan y="-15">{d.value}</tspan> : d.value
    }
    .....
/>

which gives:

Sandbox