line chart by Pure react.js

Question

I am very new to react.js, I want to use react js to prepare a line chart without using other js file.
Is it possible to create one with only react.js?

Examples shown in the internet has D3 components, chart.js and so on. I am not sure if these are sub products of react.js. I would want to avoid other js files as much as possible and go with react.js only.

Answer 1

D3 and such have nothing to do with React. D3 can be used with it, although not completely (no animations, for instance) because in React you cannot mutate the DOM without changing a prop or a state. If something changes in your page without React knowing it, you will get an error looking like "Invariant violation: DOM mutated unexpectedly". The way you would work with D3 in React is to consider SVG elements as components just like all others you use in your app.

You don't need any D3 to do that actually: just use SVG elements such as <svg>, <line>, etc. as if they were usual components, to draw whatever you want in a div. Refer to the SVG docs.

For a line chart it is definitely doable. If you want a complex graph - or a pretty one - then why not use an external library ? The weight of the js file you import can end up comparing with the weight of your own js code, except there will be a thousand times less bugs.

Answer 2

try echarts by apache

there is a package react-echarts which allows to use echarts in react beautifully. Very good documentation