Chart

The RhChart is a component that allows developers to create customizable charts. It has several props, including options for configuring the chart, settings for additional settings, style for custom styling, and loading to display a loading indicator. With RhChart, developers can create a wide range of chart types and customize them according to their needs.

Usage

Once installed, you can import the RhCharts component into your React application:

copy

import {RhCharts} from "@rhythm-ui/react"

Then, you can use the RhCharts component in your JSX code:

copy

function Charts() {
  const useChartOptions = () => {
    const categories = (function () {
      let now = new Date();
      const res = [];
      let len = 10;
      while (len--) {
        res.unshift(now.toLocaleTimeString().replace(/^\D*/, ""));
        now = new Date(+now - 2000);
      }
      return res;
    })();
    const categories2 = (function () {
      const res = [];
      let len = 10;
      while (len--) {
        res.push(10 - len - 1);
      }
      return res;
    })();
    const data = (function () {
      const res = [];
      let len = 10;
      while (len--) {
        res.push(Math.round(Math.random() * 1000));
      }
      return res;
    })();
    const data2 = (function () {
      const res = [];
      let len = 0;
      while (len < 10) {
        res.push(+(Math.random() * 10 + 5).toFixed(1));
        len++;
      }
      return res;
    })();

    const [chartOptions, setChartOptions] = useState({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#283b56",
          },
        },
      },
      legend: {},
      dataZoom: {
        show: false,
        start: 0,
        end: 100,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: true,
          data: categories,
        },
        {
          type: "category",
          boundaryGap: true,
          data: categories2,
        },
      ],
      yAxis: [
        {
          type: "value",
          scale: true,
          name: "Price",
          max: 30,
          min: 0,
          boundaryGap: [0.2, 0.2],
        },
        {
          type: "value",
          scale: true,
          name: "Order",
          max: 1200,
          min: 0,
          boundaryGap: [0.2, 0.2],
        },
      ],
      series: [
        {
          name: "Dynamic Bar",
          type: "bar",
          xAxisIndex: 1,
          yAxisIndex: 1,
          data: data,
        },
        {
          name: "Dynamic Line",
          type: "line",
          data: data2,
        },
      ],
    });

    return chartOptions;
  };

  return <RhCharts loading={false} option={useChartOptions()} />;
}

Chart Props

Name	Type	Description
option	EChartsOption	[Echarts Apache](https://echarts.apache.org/handbook/en/get-started/) has a setOption fn to draw the charts which accept two parameters option & settings(optional). This is the main prop for controlling almost everything about the chart. [All available properties](https://echarts.apache.org/en/option.html#title)
settings	SetOptionOpts	Second parameter for [setOption fn](https://echarts.apache.org/en/api.html#echartsInstance.setOption).
style	CSSProperties	Chart style property
loading	boolean	Show charts loading