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;