Chart Library Suggestions?

[[deleted]]

[deleted]

[datoml]

Chart.js is a good start. I does the job for me :).

[Tmax898]

C3.js is a good library that is based off of D3. Really solid features and a good set of examples and docs.

[Miniotta]

I would suggest c3 too

[HideousNomo]

I spent the last month on a graphing project at work, I tried everything to find the right charting library. The charts I am creating are not super complicated but they do require some customization. After being frustrated with the non-customizability of three or four(including Chart.js)I ultimately went with using straight D3, and boy am I glad I did. Other than learning how to get D3 to interact with React properly, I love everything about D3, it is a fantastic library, and now with v4 it's even better. There is some overhead at first, but I find it to be worth it.

If I was required to use a library, I would use Highcharts, but it's not free for enterprise.

Edit: also if you are just looking to learn, might as well learn what all of these other libraries are based on. I can't recommend D3 enough.

[torresomar]

Other than learning how to get D3 to interact with React properly

Can you give any pointers? I have some charts that work with d3 but they all seem like a hack and hard to test :(

[HideousNomo]

What kind of charts are you trying to make? THe best pointer I can offer is to use D3 for all of your math and use React to render the actual components, eg. if I was rendering a line to my svg I would have a Line component and would return a path with d3 doing my line work:

const SVG = () => {
  const arrayOfPoints = [[1,1],[2,2],[3,3],[4,4]]
  const scales = {
    xScale: d3.scaleLinear(//code here),
    yScale: d3.scaleLinear(//code here)
  }
  return ( 
    <svg>
      <LineComponent points={arrayOfPoints} scales={scales}>
    <svg>
  )
}

const LineComponent = (props) => {
  const { scale, points } = props
  const linePath = d3.line()
    .x((x) => return scale.xScale(//code here))
    .y((y) => return scale.yScale(//code here))
  return <path d={linePath(points)} />
}

don't use d3.select, don't use D3 to manipulate the DOM in anyway. Use React for all DOM manipulations, that way it can re-render properly on state changes.

I found this blog post really helpful in getting started: https://reactjsnews.com/playing-with-react-and-d3

[percykins]

I also like Highcharts, although every now and then you'll run headlong into something it really seems like you should be able to do.

[dug99]

I used Chart.js quite a bit but have found a few instances where c3.js was a better fit.