@nivo/core

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'
  />
);