Adding Nivo Sunburst Charts to Your React Application
Written on
Chapter 1: Introduction to Nivo Sunburst Charts
In this section, we will explore the process of integrating Nivo's Sunburst charts into a React application. Nivo provides a powerful way to visualize data effectively.
Section 1.1: Installing Nivo
To incorporate Nivo into your project, you'll first need to install the necessary package. Execute the following command in your terminal:
npm i @nivo/sunburst
After installation, you can start creating your sunburst chart.
Section 1.2: Creating Your First Sunburst Chart
You can initialize your sunburst chart with the following code snippet:
import React from "react";
import { ResponsiveSunburst } from "@nivo/sunburst";
const data = {
name: "nivo",
color: "hsl(57, 70%, 50%)",
children: [
{
name: "viz",
color: "hsl(294, 70%, 50%)",
children: [
{
name: "stack",
color: "hsl(241, 70%, 50%)",
children: [
{ name: "cchart", color: "hsl(188, 70%, 50%)", loc: 61592 },
{ name: "xAxis", color: "hsl(215, 70%, 50%)", loc: 137929 },
{ name: "yAxis", color: "hsl(262, 70%, 50%)", loc: 120083 },
{ name: "layers", color: "hsl(284, 70%, 50%)", loc: 197403 }
]
},
{
name: "ppie",
color: "hsl(182, 70%, 50%)",
children: [
{
name: "chart",
color: "hsl(311, 70%, 50%)",
children: [
{
name: "pie",
color: "hsl(80, 70%, 50%)",
children: [
{ name: "outline", color: "hsl(264, 70%, 50%)", loc: 81213 },
{ name: "slices", color: "hsl(0, 70%, 50%)", loc: 186108 },
{ name: "bbox", color: "hsl(335, 70%, 50%)", loc: 172377 }
]
},
{ name: "donut", color: "hsl(66, 70%, 50%)", loc: 50826 },
{ name: "gauge", color: "hsl(140, 70%, 50%)", loc: 77497 }
]
},
{ name: "legends", color: "hsl(347, 70%, 50%)", loc: 62688 }
]
}
]
},
// Additional data entries...
]
};
const MyResponsiveSunburst = ({ data }) => (
<ResponsiveSunburst
data={data}
margin={{ top: 40, right: 40, bottom: 40, left: 40 }}
id="name"
value="loc"
cornerRadius={2}
borderWidth={1}
borderColor={{ from: 'color', modifiers: [ [ 'darker', 0.4 ] ] }}
colors={{ scheme: 'nivo' }}
animate={true}
motionConfig="slow"
/>
);
export default function App() {
return <MyResponsiveSunburst data={data} />;
}
In this code, the data object represents the structure of your sunburst chart. The ResponsiveSunburst component is crucial for rendering the chart, where you can customize various properties including margins, colors, and animations.
Chapter 2: Enhancing Your Chart Experience
To further enrich your understanding of integrating charts into React, check out the following video resources.
This video provides a comprehensive guide on how to effectively implement Nivo graphs in a CoreUI React template.
In this tutorial, you'll learn how to add various types of charts in React, covering seven different chart types.