Nivo ResponsivePie not being responsive

Question

I'm trying to replicate the Nivo Size Pie, where when you hover over a piece of the pie, that piece is enlarged based on activeOuterRadiusOffset & activeInnerRadiusOffset values, however in this case the hovered over piece is not changing in size. I saw an issue posted on the github for the chart being unresponsive and people using AutoSizer but copying that resulted in giving me a blank screen.

EDIT: I have a replica of the code and it seems to work properly on codesandbox but not in my application.

import React, {  useRef, Component} from 'react';
import "./styles.css";
import {respPie} from "./data";
import Button from '@material-ui/core/Button';
import {Pie, ResponsivePie} from "@nivo/pie";
// Current issue with switch system
// https://github.com/plouc/nivo/issues/411
//https://www.gitmemory.com/issue/plouc/nivo/411/476589260
export default function App {
    return (
        <div style={{height: 500, width:'99%'}}>
        <ResponsivePie
        data={respPie}
        margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
        innerRadius={0.3}
        padAngle={2}
        cornerRadius={3}
        activeOuterRadiusOffset={88}
        activeInnerRadiusOffset={1}
        borderWidth={1}
        borderColor={{ from: 'color', modifiers: [ [ 'darker', 0.2 ] ] }}
        arcLinkLabelsSkipAngle={5}
        arcLinkLabelsTextColor="#333333"
        arcLinkLabelsThickness={111}
        arcLinkLabelsColor={{ from: 'color', modifiers: [] }}
        arcLabelsSkipAngle={1}
        arcLabelsTextColor={{ from: 'color', modifiers: [ [ 'darker', 2 ] ] }}
        defs={[
            {
                id: 'dots',
                type: 'patternDots',
                background: 'inherit',
                color: 'rgba(255, 255, 255, 0.3)',
                size: 4,
                padding: 1,
                stagger: true
            },
            {
                id: 'lines',
                type: 'patternLines',
                background: 'inherit',
                color: 'rgba(255, 255, 255, 0.3)',
                rotation: -45,
                lineWidth: 6,
                spacing: 10
            }
        ]}
        fill={[
            {
                match: {
                    id: 'ruby'
                },
                id: 'dots'
            },
            {
                match: {
                    id: 'c'
                },
                id: 'dots'
            },
            {
                match: {
                    id: 'go'
                },
                id: 'dots'
            },
            {
                match: {
                    id: 'python'
                },
                id: 'dots'
            },
            {
                match: {
                    id: 'scala'
                },
                id: 'lines'
            },
            {
                match: {
                    id: 'lisp'
                },
                id: 'lines'
            },
            {
                match: {
                    id: 'elixir'
                },
                id: 'lines'
            },
            {
                match: {
                    id: 'javascript'
                },
                id: 'lines'
            }
        ]}
        legends={[
            {
                anchor: 'bottom',
                direction: 'row',
                justify: false,
                translateX: 0,
                translateY: 56,
                itemsSpacing: 0,
                itemWidth: 100,
                itemHeight: 18,
                itemTextColor: '#999',
                itemDirection: 'left-to-right',
                itemOpacity: 1,
                symbolSize: 18,
                symbolShape: 'circle',
                effects: [
                    {
                        on: 'hover',
                        style: {
                            itemTextColor: '#000'
                        }
                    }
                ]
            }
        ]}
    />
                    </div>
    )
}

Answer 1

Check which version of @nivo/pie you are using. It should be the same version as your @nivo/core.