@nivo/core

What is @nivo/core?

@nivo/core is a part of the Nivo library, which provides a rich set of data visualization components, built on top of D3 and React. It allows developers to create highly customizable and responsive charts and graphs with ease.

What are @nivo/core's main functionalities?

Responsive Bar Chart

This code sample demonstrates how to create a responsive bar chart using the @nivo/bar component. The chart is configured to display data for different countries with customizable margins, padding, colors, and axis settings.

import { ResponsiveBar } from '@nivo/bar';

const data = [
  { country: 'USA', value: 100 },
  { country: 'China', value: 200 },
  { country: 'Japan', value: 150 }
];

const MyResponsiveBar = () => (
  <ResponsiveBar
    data={data}
    keys={['value']}
    indexBy='country'
    margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
    padding={0.3}
    colors={{ scheme: 'nivo' }}
    borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
    axisTop={null}
    axisRight={null}
    axisBottom={{
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: 'country',
      legendPosition: 'middle',
      legendOffset: 32
    }}
    axisLeft={{
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: 'value',
      legendPosition: 'middle',
      legendOffset: -40
    }}
  />
);

Responsive Line Chart

This code sample demonstrates how to create a responsive line chart using the @nivo/line component. The chart is configured to display data for different transportation methods with customizable margins, scales, colors, and axis settings.

import { ResponsiveLine } from '@nivo/line';

const data = [
  {
    id: 'japan',
    color: 'hsl(348, 70%, 50%)',
    data: [
      { x: 'plane', y: 200 },
      { x: 'helicopter', y: 300 },
      { x: 'boat', y: 100 }
    ]
  },
  {
    id: 'france',
    color: 'hsl(204, 70%, 50%)',
    data: [
      { x: 'plane', y: 150 },
      { x: 'helicopter', y: 250 },
      { x: 'boat', y: 200 }
    ]
  }
];

const MyResponsiveLine = () => (
  <ResponsiveLine
    data={data}
    margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
    xScale={{ type: 'point' }}
    yScale={{ type: 'linear', min: 'auto', max: 'auto', stacked: true, reverse: false }}
    axisTop={null}
    axisRight={null}
    axisBottom={{
      orient: 'bottom',
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: 'transportation',
      legendOffset: 36,
      legendPosition: 'middle'
    }}
    axisLeft={{
      orient: 'left',
      tickSize: 5,
      tickPadding: 5,
      tickRotation: 0,
      legend: 'count',
      legendOffset: -40,
      legendPosition: 'middle'
    }}
    colors={{ scheme: 'nivo' }}
    pointSize={10}
    pointColor={{ theme: 'background' }}
    pointBorderWidth={2}
    pointBorderColor={{ from: 'serieColor' }}
    pointLabelYOffset={-12}
    useMesh={true}
  />
);

Responsive Pie Chart

This code sample demonstrates how to create a responsive pie chart using the @nivo/pie component. The chart is configured to display data for different programming languages with customizable margins, inner radius, pad angle, corner radius, colors, and label settings.

import { ResponsivePie } from '@nivo/pie';

const data = [
  { id: 'javascript', label: 'javascript', value: 55 },
  { id: 'python', label: 'python', value: 25 },
  { id: 'java', label: 'java', value: 20 }
];

const MyResponsivePie = () => (
  <ResponsivePie
    data={data}
    margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
    innerRadius={0.5}
    padAngle={0.7}
    cornerRadius={3}
    colors={{ scheme: 'nivo' }}
    borderWidth={1}
    borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }}
    radialLabelsSkipAngle={10}
    radialLabelsTextXOffset={6}
    radialLabelsTextColor='#333333'
    radialLabelsLinkColor={{ from: 'color' }}
    sliceLabelsSkipAngle={10}
    sliceLabelsTextColor='#333333'
  />
);

Other packages similar to @nivo/core

recharts

Recharts is a Redefined chart library built with React and D3. It provides a set of composable chart components that are easy to use and highly customizable. Compared to @nivo/core, Recharts offers a more straightforward API but may lack some of the advanced customization options available in Nivo.

victory

Victory is a collection of composable React components for building interactive data visualizations. It is designed to be modular and flexible, allowing developers to create a wide range of chart types. Victory is similar to @nivo/core in terms of flexibility and customization but has a different approach to component composition and theming.

chart.js

Chart.js is a simple yet flexible JavaScript charting library for designers and developers. It provides a variety of chart types and is known for its ease of use and integration with various frameworks, including React. While Chart.js is not built specifically for React, it can be used with React through wrappers like react-chartjs-2. Compared to @nivo/core, Chart.js offers a more traditional approach to charting with a focus on simplicity and ease of use.

README

@nivo/core