0

I'm new to react. By my research, I figured out that React-D3-component can serve my purpose.

I'm looking for an example of a Multi-series Line chart with tooltip and zoomable function. Basic line chart would also make this trick for my first steps.

I've a create-react-app, boilerplate ready. I need to put up this graph into a create-react-app project.

Please guide me through an example, which explains step by step how to implement this kind of graph.

Håken Lid
  • 22,318
  • 9
  • 52
  • 67
Ashag
  • 837
  • 2
  • 15
  • 24

1 Answers1

0

Here are a few steps to do in order to make your app work:

  1. Config your create-react-app boiler plate with Webpack and make sure you can run it without React-D3-component module.

  2. Find the homepage component (normally main.js) try to modify some basic HTML elements and see if you can see the changes on page with hot-reloading. For instance, adding a H1 red tag.

  3. Install React-D3-component module with npm command:

    npm install react-d3-components --save

  4. Start adding React-D3-component into your homepage component you just modified by importing the module: 

    import ReactD3 from 'react-d3-components'

  5. Follow the example here, and create your chart components in your homepage.

This workflow should work for any React modules for testing purposes.

MattYao
  • 2,495
  • 15
  • 21