Keys are missing from the legend of a vertical grouped bar chart if the value for the first bar is zero

[martinalexrolph]

When Bar.js picks out the legend data for keys, it looks at all the bars with index 0, i.e. the first group or stack of bars, then uses these to generate the legend.

// nivo/packages/nivo-bar/src/Bar.js line 157

const legendDataForKeys = result.bars
    .filter(bar => bar.data.index === 0)
    .map(bar => ({
        label: bar.data.id,
        fill: bar.data.fill ? bar.data.fill : bar.color,
    }))
    .reverse()

However, if the value of a given data key on the first bar is 0 then that bar is not included in result.bars, presumably to reduce the rendering load by hiding zero-height bars. However, this means that when legendDataForKeys looks for bars, it misses out those keys.

One possible fix would be to include zero-height bars by amending generateVerticalGroupedBars in compute/grouped.js so that it does not exclude bars if they have no height.

// nivo/packages/nivo-bar/src/compute/grouped.js line 88

if (barWidth > 0) {
    keys.forEach((key, i) => {
        range(xScale.domain().length).forEach(index => {
            const x = xScale(getIndex(data[index])) + barWidth * i + innerPadding * i
            const y = getY(data[index][key])
            const barHeight = getHeight(data[index][key], y)

            if (barWidth > 0 /*&& barHeight > 0*/) { // Remove this condition
                const barData = {
                    id: key,

This has the disadvantage that we lose the performance benefit of not rendering zero-height bars so it should be possible to filter them out after the legend keys have been generated.

// nivo/packages/nivo-bar/src/Bar.js line 162

    }))
    .reverse()

const legendDataForIndexes = result.bars.filter(bar => bar.data.id === keys[0]).map(bar => ({
    label: bar.data.indexValue,
    fill: bar.data.fill ? bar.data.fill : bar.color,
}))

// Add filter here
result.bars = result.bars.filter(bar => bar.height === 0)

return (
    <Container isInteractive={isInteractive} theme={theme}>
        {({ showTooltip, hideTooltip }) => {
            const commonProps = {
                borderRadius,
                borderWidth,

[martinalexrolph]

Just spotted that this is a duplicate of #111 which is fixed by #128, but in a different way.

[plouc]

Fixed by #362