Election Results

Two components for election night coverage: a candidate results table with party-colored summary bar, and a vote margin indicator with historical comparison. Built-in party color recognition for Democratic, Republican, Libertarian, Green, and Independent.

Presidential Race

2024 Presidential Election

National popular vote

99% of precincts reporting

Donald Trump ✓ Republican
49.6% 77,302,892
Kamala Harris Democratic
48.1% 75,012,341
Chase Oliver Libertarian
1.3% 2,048,532
Jill Stein Green
1.0% 1,548,210
Skip chart, view as data table
2024 Presidential Election: National popular vote
CandidatePartyVotesShare
Kamala HarrisDemocratic75,012,34148.1%
Donald TrumpRepublican77,302,89249.6%
Chase OliverLibertarian2,048,5321.3%
Jill SteinGreen1,548,2101.0%

Source: Associated Press

Senate Race

Pennsylvania Senate

2024 general election

97% of precincts reporting

Dave McCormick ✓ Republican
49.8% 3,395,201
Bob Casey Democratic
48.7% 3,320,145
John Thomas Libertarian
1.5% 102,340
Skip chart, view as data table
Pennsylvania Senate: 2024 general election
CandidatePartyVotesShare
Bob CaseyDemocratic3,320,14548.7%
Dave McCormickRepublican3,395,20149.8%
John ThomasLibertarian102,3401.5%

Source: AP

Vote Margin

Margin with Historical Comparison

Colorblind-Safe Mode

2024 Presidential (colorblind palette)

Donald Trump ✓ Republican
49.6% 77,302,892
Kamala Harris Democratic
48.1% 75,012,341
Chase Oliver Libertarian
1.3% 2,048,532
Jill Stein Green
1.0% 1,548,210
Skip chart, view as data table
2024 Presidential (colorblind palette)
CandidatePartyVotesShare
Kamala HarrisDemocratic75,012,34148.1%
Donald TrumpRepublican77,302,89249.6%
Chase OliverLibertarian2,048,5321.3%
Jill SteinGreen1,548,2101.0%

ElectionResults — Usage

<ElectionResults
  data={[
    { candidate: 'Harris', party: 'Democratic', votes: 75012341, pct: 0.481 },
    { candidate: 'Trump', party: 'Republican', votes: 77302892, pct: 0.496 },
  ]}
  title="2024 Presidential Election"
  precinctsPct={0.99}
/>

ElectionResults — Props

PropTypeDefault
dataCandidateRow[]required
titlestringrequired
precinctsPctnumber (0–1)—
winnerstringauto (highest votes)
colorMode'default' | 'colorblind'auto-detect
partyColorsRecord<string, string>built-in D/R/I/L/G colors

VoteMargin — Usage

<VoteMargin
  margin={-1.5}
  title="Popular Vote Margin"
  historical={[
    { year: 2016, margin: -2.1 },
    { year: 2020, margin: 4.5 },
  ]}
/>

Positive margin = party A leads. Negative = party B leads.

VoteMargin — Props

PropTypeDefault
marginnumberrequired
partyA / partyBstring'Democratic' / 'Republican'
historical{ year, margin }[][]
maxMarginnumber30
colorMode'default' | 'colorblind'auto-detect

Data Shape

interface CandidateRow {
  candidate: string;
  party: string;      // 'Democratic', 'Republican', 'Libertarian', etc.
  votes: number;
  pct: number;        // 0–1 (0.481 = 48.1%)
}