COVID-19 SPFx information web part


In this post I describe the working and usage of a COVID-19 SPFx web part. The goal of this web part is to display basic information of the the COVID-19 impact for a specific country. The web part will show the following data:

  • Confirmed cases
  • Total deaths
  • Recovered cases
  • Last updated time

The screenshot below shows this web part on a demo site collection

Web part configuration

Country code

The only mandatory property is the country code. This code should be the ISO2 country code. A full list can be found here:

Show view history button

This option allows you to show historical data of the country. When set to true, an icon will be shown in the upper left corner. Clicking on it will open a pop-up with 4 tabs:

  • Confirmed cases: shows a graph of the confirmed cases plotted over time
  • Deaths: shows a graph of deaths plotted over time
  • Recovered: shows a graph of recovered people plotted over time
  • All: combines the previous 3 charts in 1 chart

View more statistics

You can provide an optional external link to redirect users to a website with more detailed statistics

Up count time

The counters that are displayed have some up count animation. By default the duration is set to 2 second but it is possible to change this using the slider in the web part properties


It is also possible to define the colors for the numbers. By default the following colors are set but these can be changed using the color pickers in the web part properties:

  • Confirmed cases: #69797e
  • Deaths: #d13438
  • Recoverd: #498205


The web part uses data provided by exposed through the following API:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Create a website or blog at

Up ↑

Create your website at
Get started
%d bloggers like this: