/Expenses-chart-component

Primary LanguageJavaScript

Frontend Mentor - Expenses chart component solution

This is a solution to the Expenses chart component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

  • View the bar chart and hover over the individual bars to see the correct amounts for each day
  • See the current day’s bar highlighted in a different colour to the other bars
  • View the optimal layout for the content depending on their device’s screen size
  • See hover states for all interactive elements on the page
  • Bonus: Use the JSON data file provided to dynamically size the bars on the chart

Screenshot

Mobile Preview

screenshot

Mobile Preview - active

screenshot

Desktop Preview

screenshot

Desktop Preview - desktop

screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • SAAS (SCSS)
  • Flexbox
  • Mobile-first workflow

What I learned

This project allowed me to really test my skills with using JSON data to input it within the chart. I learned a lot of about chart.js regarding its data and styling which took some time to understand. Recreating the design was the most enjoyable part of completing this project. There were some challenges that I faced with trying to complete this however, I gain lots of help from the documentation within chart.js to help me understand more about making changes.

Javascript - Chart.js:

const barChart = new Chart(canvasEl, {
    type: "bar",
    data: {
        labels: xAxis,
        datasets: [{
            data: yAxis,   
            backgroundColor: barColours,
            hoverBackgroundColor: hoverBarColors,
        }],
    },

Useful Resources

The main resource throughout my journey of completing this project was chart.js, particularly the configuration which is utilised to change the way the chart functions/behaves. Since the chart has different versions, the latest being 3.9.1, it was important that the information I found was up to date.

Continued development

For future developments, I want to learn more JS concepts and use more JS within future projects. I also want to practice more layouts that involve more of HTML and CSS/SCSS. Even though, I know how to use SCSS, I want to make the most use of its features such as having seperate files for good organisational skills.

Author