How to create a chart with custom graphics?

Question

I need to create a chart looking like the image above, but I have no idea how. The data needs to be dynamic and it would great to also include some animation when the chart is loaded.

My tech stack includes:

• Vue.js
• Chart.js
• TailwindCSS

Could anyone point me in the right direction of how achieve this? Would be really much appreciated :)

I've researched using Chart.js with Vue.js, but I'm having trouble finding resources that address the custom graphic (the yellow lines).

Answer 1

To achieve a chart similar to the one in yours, here are a few key resources and steps you can check, maybe it will be helpful:

• To create the curved line with a shaded area, check out the Chart.js documentation on line charts: https://www.chartjs.org/docs/latest/charts/line.html
• For the shaded area below the curve, you can use a gradient. Here's a useful video tutorial on how to set up a gradient fill in Chart.js: https://www.youtube.com/watch?v=e-15uzfcd-I

Additionally, if you are open to exploring other libraries, I recommend checking eg: Apache ECharts, which I also use in my project. While I don’t have a chart like you but ECharts has a lot of great examples that might inspire you: https://echarts.apache.org/examples/en/index.html#chart-type-line