Get started with react-nvd3 CDN

MIT licensed

React-nvd3 is a popular React library for rendering NVD3 data visualization charts.

Tags:
  • React
  • D3
  • NVD3
  • graph
  • reusable
  • chart

Stable version

Copied!

How to start using react-nvd3 CDN


import React from 'react';

class LineChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          key: 'Series 1',
          values: [10, 15, 12, 17, 18, 20],
        },
        {
          key: 'Series 2',
          values: [7, 11, 14, 13, 9, 12],
        },
      ],
    };
  }

  render() {
    return (
      <div style={{ height: '400px' }}>
        <nvd3
          type="lineChart"
          data={this.state.data}
          xKey="key"
          yKey="values"
          useInteractiveGuideline={true}
        />
      </div>
    );
  }
}

export default LineChart;
Copied!
Copied!

All versions