CODEWITHSUNDEEP
reactjschartsantd
Owenn
Owenn

Reputation: 1150

How to achieve multi line area chart with Ant Design Charts?

What I'm trying to do is I want to plot a line which represents the values of predictions and 2 other lines which represent the upper 95% Confidence Interval and the lower 95% Confidence Interval. I want to achieve this using Ant Design Charts. What I have so far is a Multi Line Chart, but I want the confidence Interval to be an area.

My data:

const data = [
    {"date":"2021-11-17", "category":"upper_95", "value":23.87625},
    {"date":"2021-11-17", "category":"lower_95", "value":20.32322},
    {"date":"2021-11-17", "category":"prediction","value":21.21381},
    {"date":"2021-11-18", "category":"upper_95", "value":25.87625},
    {"date":"2021-11-18", "category":"lower_95", "value":22.32322},
    {"date":"2021-11-18", "category":"prediction","value":19.21381},
    {"date":"2021-11-19", "category":"upper_95", "value":26.87625},
    {"date":"2021-11-19", "category":"lower_95", "value":24.32322},
    {"date":"2021-11-19", "category":"prediction","value":25.21381},
    ...
]

My code so far:

const Graph = () => {
    const config = {
         data,
         xField: "date",
         yField: "value",
         seriesField: "category",
         ...
    };
    
    return <Line {...config} />
};

Upvotes: 1

Views: 2528

Answers (1)

alfonso solis
alfonso solis

Reputation: 91

"Ant Design Charts" support area charts: https://charts.ant.design/en/examples/area/stacked#basic-slider

Instead of:

return <Line {...config} />

Try with:

return <Area {...config} />

Upvotes: 2

Related Questions