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} />
};

Source: React – Stack Overflow

November 25, 2021
Category : News
Tags: antd | charts | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.