2

enter image description here

I want to show a line like above in ant design timeline graph, ( Line Chart ). It's a dual Axes graph. I am using React and Ant Design. I want to show the line at any data point. I think I have to use annotations, but I am not getting how.

Data Structure is like below

      [
        {
          "date": "10/09/2020",
          "type": "Financial impact",
          "count": 2180
        },
.....
    ]

Here's my below Code for reference

import React from "react";
import { DualAxes } from "@ant-design/charts";
import { Row, Typography, Col } from "antd";
import { Badge } from "antd";
import NumberFormat from "react-number-format";

const TimelineChart = ({ data }: { data: any[] }) => {
  var config: any = {
    xField: "date",
    yField: ["count", "value"],
    data: data,
    xAxis: {
      label: {
        style: {
          fill: "#6E759F",
        },
      },
    },
    yAxis: {
      count: {
        label: {
          style: {
            fill: "#6E759F",
          },
        },
      },
      value: {
        label: {
          style: {
            fill: "#03838B",
          },
        },
      },
    },
    geometryOptions: [
      {
        geometry: "line",
        color: ["#2F54EB", "#9254DE"],
        seriesField: "type",
      },
      {
        geometry: "line",
        color: "#2AABAB",
        seriesField: "type",
      },
    ],
    legend: false,
      formatter: (data: any) => {
        return {
          ...data,
        };
      },
    },
  };
  return <DualAxes {...config} />;
};

export default TimelineChart;
lazyCoder
  • 499
  • 1
  • 4
  • 17

0 Answers0