net - UK (2020-04)

PROJECTS
Victory

VICTORY

we need from NPM, which includes React, Victory

and a couple of other libraries to help format the

data. Finally, start the development server.

> npm install

> npm start

The first component tracks the uptime of the

application in a pie chart. This Uptime component

gives a clear indication if the reliability falls below

acceptable standards. Open the component at:

src/Uptime/index.js.

Each chart component supplied by Victory has

sensible default values in case no other props

GENERATE DYNAMIC

CHARTS WITH VICTORY

Matt Crouch shows you how to build interactive charts and graphs in

React using customisable ready-made components

Collecting data can be very useful for any

project but making use of that data is more

important. If figures and values are presented in a

spreadsheet, for example, it can be difficult to tell

what – if any – significant information it holds.

Victory is a library that can build charts in a

declarative manner. It can respond to state changes

and animate to show any new data. Unlike other

libraries such as D3.js, it does not need direct control

of the DOM.

In this tutorial, we will be creating a pie chart and

a line chart using Victory. These will display the

output for a simulated status dashboard.

To begin, make sure the tutorial files are

downloaded and open up the tutorial directory on the

command line. Then install the dependencies that

View source

files here!

All the files you need for

this tutorial can be found at

https://github.com/

mattcrouch/victory-tutorial

ABOUT THE AUTHOR

MATT CROUCH

w: https://mattcrouch.net

t: @mattcrouchuk

job: Software engineer at

Vidsy

areas of expertise:

React, CSS-in-JS and

accessibility