Expense Chart - Frontend Mentor

The Prerequisites

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.

<div class="balance">
        <div class="bal-section">
          <h2>My balance</h2>
          <p class="monthly-balance">$921.48</p>
        </div>
        <div class="svg">
          <i class="uil uil-adjust-circle"></i>
        </div>
      </div>

.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.

 <div class="chart-div">
        <h1>Spending - Last 7 days</h1>
        <div class="js-chart">
          <canvas id="myChart" style="width:100%;max-width:700px"></canvas>
        </div>
        <hr />
        <div class="bottom-data">
          <div class="left">
            <h3>Total this month</h3>
            <p class="monthly-total">$478.33</p>
          </div>
          <div class="right">
            <h4>+2.4%</h4>
            <p class="per">from last month</p>
          </div>
        </div>
      </div>

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.

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.

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!

Blog

Expense Chart - Frontend Mentor

VirtualPuja

The Prerequisites

Creating the Expense Chart

HTML5 and CSS

JavaScript

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

Related