TimeChart icon indicating copy to clipboard operation
TimeChart copied to clipboard

React examples

Open Tenshinra opened this issue 4 years ago • 1 comments

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

Tenshinra avatar Aug 04 '21 13:08 Tenshinra

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;

karniv00l avatar Dec 14 '21 22:12 karniv00l