Closed nikitagupta55 closed 7 years ago
You should be able to do something like this (adapted from the documentation example)
import React, { useEffect, useMemo, useRef } from 'react';
import d3_timeseries from 'd3-timeseries'
const TimeseriesVisualization = ({ data, width = 1080 }) => {
const ref = useRef();
const chart = useMemo(() => {
return d3_timeseries()
.addSerie(data, { x: 'date', y: 'value' }, { interpolate: 'monotone', color: "#333" })
.width(width)
}, [data, width])
useEffect(() => {
chart(ref.current)
}, [ref, chart]);
return (
<div ref={ref} />
);
};
export default TimeseriesVisualization;
Although I am currently facing a problem with this code where the chart is rendered twice.
This lib is not a React component. You can write a wrapper around it with React ref callback. But it's a lot of work so if you need a quick graph, maybe you should search for a react library instead.