Submitted almost 3 years ago

Expenses chart component using D3.js

@hejkeikei

A solution to the Expenses chart component challenge

Solution retrospective

How was my work? Any feedback will be appreciated:) One thing I struggle the most is that SVG seems to unable to style like other HTML elements. For instance, the tooltips in the chart has a dark background with padding, but I couldn't just add background-color properties. In the end I manage to grouped rectangle and text together and attached the class on to grouped element. Do anyone have ideas? Is it okay to make text information such as tooltips with SVG?

Thanks in advance and happy coding!

Code

Please log in to post a comment

Community feedback

Elaine•11,360
@elaineleung
Posted almost 3 years ago
Hi Ting-Huei, well done in solving this challenge, and I think this is the first solution I've seen where SVGs are used for the bars. Definitely not an easy task, but it works as a solution, and you did great 🙂

Instead of using SVGs, have you tried changing the color of the background and giving the bars a height? That was what I did using JS with the json, and for both the bars and the tooltip, I just used regular divs for styling. To style the bar, I first created the bar as a new element using Javascript, and then I added a styling class, and I gave it a height using the data with a multiplier so that I can match the height in the bar chart.

You can check out my solution here as well as the styling for the tooltip and bars: https://www.frontendmentor.io/solutions/responsive-bar-chart-component-with-json-data-fetching-b2LJ5eTGIX

Well done here though, and I do think you solved this problem in a very creative way, even though it may not be the most economical way, but this is how we learn, so keep going!
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord