mcaule / d3-timeseries

Time series charting library based on d3.js
143 stars 39 forks source link

How do I render these timeseries graphs using create-react-app boilerplate? #4

Closed nikitagupta55 closed 7 years ago

mcaule commented 7 years ago

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.

keyvanm commented 1 year 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.