huww98 / TimeChart

An chart library specialized for large-scale time-series data, built on WebGL.
https://huww98.github.io/TimeChart
MIT License
365 stars 31 forks source link

React examples #31

Open Tenshinra opened 3 years ago

Tenshinra commented 3 years ago

Any plans to add some react examples for this lib? Would be very usefull :)

karniv00l commented 2 years ago

Something like this is working good:

import { useEffect, useRef } from 'react';
import TimeChart from 'timechart';

const Chart = () => {
  const chartRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const data = [];
    for (let x = 0; x < 100; x++) {
      data.push({ x, y: Math.random() });
    }

    const chart = new TimeChart(chartRef.current!, {
      series: [{ name: 'Random', data }],
      tooltip: true,
      zoom: {
        x: { autoRange: true },
        y: { autoRange: true },
      },
    });

    return () => chart.dispose();
  }, []);

  return (
    <div ref={chartRef} style={{ width: '100%', height: 500 }} />
  );
};

export default Chart;