![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwhqiuadz319sljnoi4g.png)

The Prerequisites

1. [Chart.js](https://www.chartjs.org/docs/4.4.0/) 2. [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 3. [JavaScript Object Constructor](https://www.w3schools.com/js/js_object_constructors.asp)

Creating the Expense Chart

HTML5 and CSS

The first container with the balance and SVG should be within a "div" element, which can be styled with Flexbox.

```html

My balance

$921.48

``` ```css .balance { display: flex; flex-direction: row; justify-content: space-around; background-color: var(--primary-color); width: 450px; height: 100px; border: none; border-radius: 20px; box-sizing: border-box; margin-top: 20px; } ```

The second container will reference the chart along with the monthly total. The "canvas" element is a container for the expense chart, which will be created via JavaScript.

```html

Spending - Last 7 days

Total this month

$478.33

+2.4%

from last month

```

JavaScript

You should create three variables for the labels, data, and the background colors for each of the bars. These variable will be used in the expense chart object.

```javascript const weekday = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]; const expenseValue = [17.45, 34.91, 52.36, 37.07, 23.79, 43.28, 25.48]; const barColors = ["#f4ceb8", "#e2cbd9", "#c2a2c2", "#bfd1d0", "#e9a7b8", "#a4d4dc", "#dfefc6"]; ```

By using the "new" keyword, you can create an instance of the "chart" object. You must reference the "id" from the "canvas" element to acquire the chart, which will allow you to add all the values to the properties.

```javascript new Chart("myChart", { type: "bar", data: { labels: weekday, datasets: [{ backgroundColor: barColors, data: expenseValue }] }, options: { scales: { x: { grid: { display: false } }, y: { grid: { display: false } } }, plugins: { legend: {display: false} }} }); ``` I hope you enjoyed this tutorial!

virtualpujadev

Expense Chart - Frontend Mentor

Join Our Newsletter. No Spam, Only the good stuff.