{"id":20459949,"url":"https://github.com/njeruthuo/expense-chart","last_synced_at":"2026-04-09T18:55:14.826Z","repository":{"id":240188890,"uuid":"801906667","full_name":"njeruthuo/expense-chart","owner":"njeruthuo","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-17T07:02:10.000Z","size":173,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-19T17:52:35.375Z","etag":null,"topics":["chartjs","reactjs","tailwindcss","vitejs"],"latest_commit_sha":null,"homepage":"https://expense-chart-dusky.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/njeruthuo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-17T06:38:25.000Z","updated_at":"2024-05-17T07:02:56.000Z","dependencies_parsed_at":"2024-05-17T08:26:49.141Z","dependency_job_id":"7648ff1b-4cba-47ed-91cc-81df942158d7","html_url":"https://github.com/njeruthuo/expense-chart","commit_stats":null,"previous_names":["njeruthuo/expense-chart"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/njeruthuo/expense-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/njeruthuo%2Fexpense-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/njeruthuo%2Fexpense-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/njeruthuo%2Fexpense-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/njeruthuo%2Fexpense-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/njeruthuo","download_url":"https://codeload.github.com/njeruthuo/expense-chart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/njeruthuo%2Fexpense-chart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276655550,"owners_count":25680941,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-23T02:00:09.130Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chartjs","reactjs","tailwindcss","vitejs"],"created_at":"2024-11-15T12:17:49.899Z","updated_at":"2025-09-23T21:47:34.187Z","avatar_url":"https://github.com/njeruthuo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Expenses chart component solution\n\nThis is a solution to the [Expenses chart component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/expenses-chart-component-e7yJBUdjwt). Frontend Mentor challenges help you improve your coding skills by building realistic projects.\n\n## Table of contents\n\n- [Overview](#overview)\n  - [The challenge](#the-challenge)\n  - [Screenshot](#screenshot)\n  - [Links](#links)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n- [Author](#author)\n\n## Overview\n\n### The challenge\n\nUsers should be able to:\n\n- View the bar chart and hover over the individual bars to see the correct amounts for each day\n- See the current day’s bar highlighted in a different colour to the other bars\n- View the optimal layout for the content depending on their device’s screen size\n- See hover states for all interactive elements on the page\n- **Bonus**: Use the JSON data file provided to dynamically size the bars on the chart\n\n### Screenshot\n\n![](./screenshots/s2.png)\n![](./screenshots/s1.png)\n![](./screenshots/s3.png)\n\n### Links\n\n- Solution URL: [https://github.com/njeruthuo/expense-chart](https://github.com/njeruthuo/expense-chart)\n- Live Site URL: [https://expense-chart-dusky.vercel.app/](https://expense-chart-dusky.vercel.app/)\n\n### Built with\n\n- Flexbox\n- Chartsjs\n- CSS Grid\n- TailwindCSS\n- Mobile-first workflow\n- [React](https://reactjs.org/) - JS library\n- [Charts.js](http:google.com/charts.js/)\n- [Styled Components](https://styled-components.com/) - For styles\n\n### What I learned\n\nUsing chart.js to make responsive and dynamic charts.\n\n```js\nimport { Bar } from \"react-chartjs-2\";\nimport weekData from \"../data.json\";\n\nimport {\n  Chart as ChartJS,\n  CategoryScale,\n  LinearScale,\n  BarElement,\n  Title,\n  Tooltip,\n  Legend,\n} from \"chart.js\";\n\nChartJS.register(\n  CategoryScale,\n  LinearScale,\n  BarElement,\n  Title,\n  Tooltip,\n  Legend\n);\n\nconst BarGraph = () =\u003e {\n  // Transform the data\n  const labels = weekData.map((item) =\u003e item.day);\n  const dataValues = weekData.map((item) =\u003e item.amount);\n\n  // Find the maximum value\n  const maxAmount = Math.max(...dataValues);\n\n  // Set background colors with a different color for the max value\n  const backgroundColors = dataValues.map((amount) =\u003e\n    amount === maxAmount ? \"hsl(186, 34%, 60%)\" : \"hsl(10, 79%, 65%)\"\n  );\n\n  const borderColors = dataValues.map((amount) =\u003e\n    amount === maxAmount ? \"hsl(186, 34%, 60%)\" : \"hsl(10, 79%, 65%)\"\n  );\n\n  // Chart.js data structure\n  const data = {\n    labels: labels,\n    datasets: [\n      {\n        label: \"Daily Amount\",\n        data: dataValues,\n        backgroundColor: backgroundColors,\n        borderColor: borderColors,\n        borderWidth: 0,\n      },\n    ],\n  };\n\n  // Chart.js options\n  const options = {\n    responsive: true,\n    plugins: {\n      legend: {\n        display: false, // Hide the legend\n      },\n      title: {\n        display: false,\n        text: \"Daily Amounts\",\n      },\n    },\n    scales: {\n      x: {\n        ticks: {\n          display: true, // Show x-axis labels (days of the week)\n        },\n        grid: {\n          display: false, // Hide x-axis grid lines\n        },\n      },\n      y: {\n        display: false, // Hide the y-axis\n        ticks: {\n          display: false, // Hide y-axis labels\n        },\n        grid: {\n          display: false, // Hide y-axis grid lines\n        },\n      },\n    },\n  };\n\n  return \u003cBar data={data} options={options} /\u003e;\n};\n\nexport default BarGraph;\n```\n\n## Author\n\n- Website - [https://frontend-portfolio-amber.vercel.app/](https://frontend-portfolio-amber.vercel.app/)\n- Frontend Mentor - [@njeruthuo](https://www.frontendmentor.io/profile/njeruthuo)\n- Twitter - [@njeru19_njeru](https://www.twitter.com/njeru19_njeru)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnjeruthuo%2Fexpense-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnjeruthuo%2Fexpense-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnjeruthuo%2Fexpense-chart/lists"}