Creating UI-Based Graphs in Unity?

[wise nest]

Hey, I'm pretty new to Unity and I'd like to build a graphs system for my heavily data and UI based game. I'd like to create something looking similar to the Cities Skylines 2 graphs which I've attached. What are some methods you'd recommend for achieving this effect?

I've been researching over the last few days on various approaches like:

• Rotating rects along the canvas - creates unwanted jagged effect on steep lines (not fixable with anti-aliasing)
• Rendering a custom mesh using the canvas renderer - same jagged issue, I also have no idea where to learn about creating that colour fill effect with a border like in cities skylines ive done a lot of googling but I really don't know where to look

I've attached this jagged effect I've been talking about, which is partially fixable with 8x MSAA anti aliasing but this still doesn't completely solve the problem.

[violet knot]

Yeah, rotated rects will always look jaggy on steep angles. Best bet is building the graph with a custom mesh or shader so you can get smooth lines + filled areas like in Cities Skylines. I’ve set up similar graph systems before, can help you get it working clean. Btw, do you need the graph to update live with game data or just render static sets?
@wise nest

[wise nest]

That would be really helpful :)
I did make a start using a mesh which is what's in the second screenshot but have no idea how to get that filled border effect or fix that aliasing effect

Even seeing some source code or some resources would be really great

[wise nest]

It will mostly just update when the player clicks a button to move forward in time essentially but updates won't be too frequent

[calm canyon]

UITookit has a vector API that's handy for this sort of thing
https://docs.unity.cn/2023.2/Documentation/Manual/UIE-generate-2d-visual-content.html

[violet knot]

Yeah that’s doable, the fill + border just needs the right mesh/shader setup. I can help you get it working directly if you want—would you like me to jump in on your project or just share some resources/code?
@wise nest

[wise nest]

that would be great :)

when would you be free?

oh didn't realise that was a question 😄

yeah resources for now would be great and if i can't figure it out we could always do the second option

[violet knot]

Sounds good. For meshes + filled areas, check out Unity’s Mesh API docs (https://docs.unity3d.com/ScriptReference/Mesh.html) and this tutorial on procedural mesh generation: https://catlikecoding.com/unity/tutorials/mesh-basics/. For clean lines/fills, using a shader is the way to go—this guide is solid: https://thebookofshaders.com/. There’s also a good Unity forum thread on smooth graph rendering: https://forum.unity.com/threads/simple-line-graph.556703/. That should get you started—if you hit a wall, just ping me and I can help you build it out. @wise nest

[wise nest]

thanks so much ill let you know how it goes :)

[wise nest]

@violet knot ended up using uitoolkit and the vector api and got something really nice (still a WIP)