We will show the expenses incurred by a user over a given month in a scatter plot. This will provide them with a visual overview of how their expenses pan out over a month. The following screenshot shows how the scatter plot will render with user expense data:
We plot the expense amounts versus the day of the month when it was incurred on the y axis and x axis, respectively. Hovering over a plotted bubble displays how much was spent on which date for that specific expense record. In the following sections, we will implement this feature by first adding a backend API that will return the expenses for the given month in the format needed to render it in a Victory Scatter chart. Then, we will add a React component that will retrieve this data from the backend and render it in the Victory Scatter chart.