How to add second array of data to TinyArea graph in antd?-CodePudding

In a React project, a numeric data is plotted which resembles a graph and that data is displayed at specific points when hovered over the graph. Here the numeric data is in array format but, I need to add second array of data to display the corresponding 'dates' to that data. Any appropriate solution?

Below is the code for reference

const DemoTinyArea: React.FC = () => {
  var data = [
    264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592
  ];
{/* var data2 = [
    '2021-06-01T00:00:00','2021-07-01T00:00:00', '2021-09-01T00:00:00', '2021-02-01T00:00:00', '2021-03-01T00:00:00', '2021-04-01T00:00:00', '2021-07-01T00:00:00', '2021-01-01T00:00:00', '2021-02-01T00:00:00', '2021-05-01T00:00:00', '2021-08-01T00:00:00', '2021-04-01T00:00:00' 
] */}
  var config = {
    height: 60,
    autoFit: false,
    data: data, // How to append data2 here
    smooth: true,
  };
  return <TinyArea {...config} />;
};

As can be seen from above code, an array of data is plotted but, one more array of data is to be appended to show the 'date' data when hovered. Any optimal solution highly appreciated.

This is codesandbox link: https://codesandbox.io/s/gallant-davinci-0hykv?file=/App.tsx

CodePudding user response：

The TinyArea component seems to only use a numeric value. If you want to show the corresponding date when hovered you can use a custom tooltip:

import React, { useState, useEffect } from "react";
import { TinyArea } from "@ant-design/charts";

const DemoTinyArea: React.FC = () => {
  var data = [264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592];
  var data2 = [
    "2021-06-01T00:00:00",
    "2021-07-01T00:00:00",
    "2021-09-01T00:00:00",
    "2021-02-01T00:00:00",
    "2021-03-01T00:00:00",
    "2021-04-01T00:00:00",
    "2021-07-01T00:00:00",
    "2021-01-01T00:00:00",
    "2021-02-01T00:00:00",
    "2021-05-01T00:00:00",
    "2021-08-01T00:00:00",
    "2021-04-01T00:00:00"
  ];
  var config = {
    height: 60,
    autoFit: false,
    data: data,
    tooltip: {
      customContent: (index) => {
        // Format the date
        return <div>{data2[index]}</div>;
      }
    },
    smooth: true
  };
  return <TinyArea {...config} />;
};

export default DemoTinyArea;

You could also consider using another component that can use date for the X-Axis.