---
title: "Project Hours Chart — Free Framer component · Best of Framer"
description: "Free Framer component · by Ævar Bernburg · Charts. Project Hours Chart The Hours Worked Component displays total hours and project breakdowns in a clean, visual format."
canonical: "https://framer.elliotli.dev/component/project-hours-chart"
---

[Home](/)/[Components](/components)/[Charts](/components/category/charts)/Project Hours Chart

# Project Hours Chart

Show effort with a stunning chart

[View on Framer](https://framer.com/marketplace/components/project-hours-chart/?via=elliot-li)

![Project Hours Chart preview image 1](https://framer.elliotli.dev/og/component/project-hours-chart/d92d5c6eacbbd8da/1600x1200.jpg)

## Summary

Project Hours Chart The Hours Worked Component displays total hours and project breakdowns in a clean, visual format.

## Description

## Project Hours Chart

The Hours Worked Component displays total hours and project breakdowns in a clean, visual format. Ideal for portfolios, dashboards, or productivity tools, it helps communicate effort and dedication at a glance.

## Key features include:

-   **Total + Breakdown View** – Show overall hours alongside individual project contributions.
    
-   **Four Themes** – Choose from Light, Dark, Green, and Blue to match any style.
    
-   **Customizable Layouts** – Adjust typography, colors, spacing, and border radius to fit your design system.
    
-   **Toggles & Options** – Enable or disable comparison, legend, total hours worked, and more.
    
-   **Responsive Design** – Automatically adapts to mobile, tablet, and desktop screens.
    
-   **Professional & Engaging** – A clear way to highlight time investment for clients, teams, or personal tracking.
    
-   **Flexible Integration** – Works seamlessly across portfolios, reports, and dashboards.
    

## Dark Mode

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-5c46osi2-Y5MGqA9oc2XgyYQREK32P8JM4ZCayN)

## Rank history [How rankings work →](/terms#rankings)

-   All · #6059

## Details

- **Author**: Ævar Bernburg
- **Published**: 2025-09-25
- **Updated**: 2026-08-05
- **Added**: 2025-09-15
- **Categories**: Charts

## More like this

-   [29 Radar Chart](/component/29-radar-chart) — BrandingUp · Free — Spider chart with per-axis scales
-   [33 Bubble Chart](/component/33-bubble-chart) — BrandingUp · Free — Bubble chart with 3rd-value sizes
-   [Pricing Matrix](/component/pricing-matrix) — Ainsley Holmes · Free — Currency Payment Comparison Matrix
-   [Radial Dial](/component/radial-dial) — Oli Studio · $10 — Animated dial for a single metric