ResponsiveLine chart is not rendered when the dimensions of the container is not specified.

I am using Nivo for the first time. I found an example of what I want in the storybook. I just replaced Line with ResponsiveLine. However, the chart is not rendered if I do not specified width and height for the parent division.

Here’s the code:

import React from "react";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import CardContent from "@material-ui/core/CardContent";
import { ResponsiveLine } from "@nivo/line";
import { makeStyles } from "@material-ui/core/styles";

const commonProperties = {
    animate: true,
    enableSlices: "x",
};

const curveOptions = ["linear", "monotoneX", "step", "stepBefore", "stepAfter"];

const useStyles = makeStyles((theme) => ({
    chartRoot: {
        padding: theme.spacing(6),
        borderRadius: theme.spacing(2),
        backgroundColor: "white",
        width: 620,
        height: 240,
        border: "1px solid rgba(0,0,0,0.15)",
        transition: "box-shadow 0.3s ease-in-out",
        "&:hover": {
            border: "1px solid " + theme.palette.primary.main,
            boxShadow: "0px 5px 15px rgba(0,0,0,0.1)",
        },
    },
    toolTip: {
        backgroundColor: "white",
        border: "2px solid " + theme.palette.primary.main,
        borderRadius: theme.spacing(2),
        padding: theme.spacing(2),
        fontFamily: "Helvetica",
        fontSize: 12,
        color: theme.palette.primary.main,
        fontWeight: "bold",
        boxShadow: "0px 5px 15px rgba(0,0,0,0.1)",
        marginBottom: theme.spacing(2),
    },
    content: {
        minHeight: 600,
        minWidth: 600,
        width: 600,
        height: 600
    },
}));

export default function NetSubscriberChange() {
    const classes = useStyles();
    const toolTipElement = (props) => {
        return <div className={classes.toolTip}>{props.point.data.y} °C</div>;
    };
    return (
        <Card>
            <CardHeader title="Net Subscriber Change" />
            <CardContent className={classes.content}>
                <ResponsiveLine
                    {...commonProperties}
                    curve="monotoneX"
                    data={[
                        {
                            id: "fake corp. A",
                            data: [
                                { x: 0, y: 7 },
                                { x: 1, y: 5 },
                                { x: 2, y: 11 },
                                { x: 3, y: 9 },
                                { x: 4, y: 13 },
                                { x: 7, y: 16 },
                                { x: 9, y: 12 },
                            ],
                        },
                    ]}
                    xScale={{
                        type: "linear",
                        min: 0,
                        max: "auto",
                    }}
                    axisLeft={{
                        legend: "linear scale",
                        legendOffset: 12,
                    }}
                    axisBottom={{
                        legend: "linear scale",
                        legendOffset: -12,
                    }}
                    tooltip={toolTipElement}
                    colors={{ scheme: "paired" }}
                />
            </CardContent>
        </Card>
    );
}

I am not sure if this is a bug or if I am missing something. Please help.

[wyze]

For Responsive charts the parent container needs to specify width/height.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!