Draw smoothed line area chart on UI

Hello,

I am going to implement a chart to display the time and units count, and the original design looks like this:

Design

I am trying to create a chart using UE5 WBP the closest thing I can do is something like this:

UE5

There are many things are different, such as the line should be smooth line, the chart will have a area filled with gradient colors.

We have a web project and it has a chart like this, the project is using Node.js:

WebChart

Is there any way that I can make the chart in UE5 looks similar as the original design or looks like in the website?

Thank you very much for checking this question!

You would most likely have to do this with a render target drawing each pixel precisely. Not sure it can be done in blueprints. Perhaps with
“Begin Draw Canvas to Render Target” and “End Draw Canvas to Render Target” drawing precise lines in the canvas context, but it would probably have bad performance.

Best way would be to construct the render target in c++ and then plot each pixel line by line.