Earnings Chart Card

The “Earned so far” bar chart from the dashboard - a Recharts bar series with a Weekly / Monthly / Yearly segmented switcher, a count-up dollar headline, and a hover outline on the active bar.

Earned so far

Provided data

+14.8%

Earned so far: illustrative source-shaped fixture data
Category	Value
Jan	₹3,240
Feb	₹7,420
Mar	₹9,650
Apr	₹7,130
May	₹3,670
Jun	₹2,300
Jul	₹3,820
Aug	₹5,040
Sep	₹6,840
Oct	₹4,540
Nov	₹11,520
Dec	₹8,210

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="earnings-chart-card"/>;}

Advanced playground, API and recovery states ↗

Earnings Chart Card

Earned so far

Installation

Search Helios UI

Earnings Chart Card

Earned so far

Installation

Search Helios UI