0

I followed this tutorial to get an intro to React and everything works as intended. So I tried to add another of the Nivo plots, sunburst, following the same method.

My App.js imports this new scene sunburst import in App.js

It also as the route set up sunburst route add in App.js

I've made a sunburst.jsx scene file sunburst.jsx scene file

And, just like the pie component, pie component

A SunburstChart.jsx component following the same formula, with mock data from nivo.

start of mock data

import { ResponsiveSunburst } from "@nivo/sunburst";
//import { tokens } from "../theme";
//import { useTheme } from "@mui/material";
import { mockSunburstData as data } from "../data/mockData";

const SunburstChart = () => {
  //const theme = useTheme();
  //const colors = tokens(theme.palette.mode);
  return (
    <ResponsiveSunburst
    data={data}
    margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
    id="name"
    value="loc"
    cornerRadius={2}
    borderColor={{ theme: 'background' }}
    colors={{ scheme: 'nivo' }}
    childColor={{
        from: 'color',
        modifiers: [
            [
                'brighter',
                0.1
            ]
        ]
    }}
    enableArcLabels={true}
    arcLabelsSkipAngle={10}
    arcLabelsTextColor={{
        from: 'color',
        modifiers: [
            [
                'darker',
                1.4
            ]
        ]
    }}
    />
  );
};

export default SunburstChart;

As it is, I get no errors. But I also get a blank background where I should get my sunburst chart.

pie chart showing up correctly

vs

sunburst chart not showing

I'm at a loss and it compiles with no errors, so I have no idea where the bug is.

I have tried changing the code within the component definition, as the tutorial modifies a bit what the nivo website outputs, but no dice. I've replaced the Sunburst section with code for a simple Pie graph, that works fine : the problem isn't with routes or imports.

pie graph inspect element

sunburst graph inspect element

Nothing is rendered.

SteveAdmin
  • 11
  • 2

1 Answers1

0

Ok this answer is probably late, but I had the same issue myself and I found what what was causing the problem. By only specifying the height, the chart will for some reason automatically have width 0. If you also specify a width prop you should see the chart appear.

So for your innermost Box element:

<Box heigth="500px" width="500px">
  <SunbursrChart />
</Box>
Dan G
  • 95
  • 6