![GENERATE DYNAMIC CHARTS WITH VICTORY](https://magarticles.magzter.com/articles/5307/413871/5e4ede3424f75/GENERATE-DYNAMIC-CHARTS-WITH-VICTORY.jpg)
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 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 are supplied to it. Each one is exported from the “victory” package we installed from NPM. Our first one – VictoryPie – will draw a simple monochrome pie chart along with some sample data. Add one to our Uptime component.
The pie chart is a comparison between uptime and downtime. Given the percentage of uptime is a value between 0 and 1, we can calculate the downtime by seeing what’s left over.
Denne historien er fra April 2020-utgaven av NET.
Start din 7-dagers gratis prøveperiode på Magzter GOLD for å få tilgang til tusenvis av utvalgte premiumhistorier og 9000+ magasiner og aviser.
Allerede abonnent ? Logg på
Denne historien er fra April 2020-utgaven av NET.
Start din 7-dagers gratis prøveperiode på Magzter GOLD for å få tilgang til tusenvis av utvalgte premiumhistorier og 9000+ magasiner og aviser.
Allerede abonnent? Logg på
![Camille Gribbons](https://reseuro.magzter.com/100x125/articles/5307/436389/5ea19367af754/crp_Camille-Gribbons.jpg)
Camille Gribbons
UX designer at Booking.com, Camille Gribbons reveals how she first got into the industry
![THE 5G UI REVOLUTION](https://reseuro.magzter.com/100x125/articles/5307/436389/5ea1999b1a11e/crp_USER-INTERFACE-THE-5G-UI-REVOLUTION.jpg)
THE 5G UI REVOLUTION
Tris Tolliday describes his vision of a web UI catapulted forwards by 5G
![HOW TO SHOWCASE YOUR DEV SKILLS](https://reseuro.magzter.com/100x125/articles/5307/436389/5ea190aac8a70/crp_HOW-TO-SHOWCASE-YOUR-DEV-SKILLS.jpg)
HOW TO SHOWCASE YOUR DEV SKILLS
Aude Barral shares 5 top tips for landing your dream developer job
![KNIVES OUT](https://reseuro.magzter.com/100x125/articles/5307/436389/5ea19b5ebb2a3/crp_HOW-WE-BUILT-KNIVES-OUT.jpg)
KNIVES OUT
Murder mystery film, Knives Out, grabbed everyone’s attention, and so did the fun website that promoted it. Oblio tells Tom May how it created its innovative 3D navigation
![HOW EMOTIONAL LABOUR HINDERS WOMEN IN TECH](https://reseuro.magzter.com/100x125/articles/5307/436389/5ea198de497b9/crp_HOW-EMOTIONAL-LABOUR-HINDERS-WOMEN-IN-TECH.jpg)
HOW EMOTIONAL LABOUR HINDERS WOMEN IN TECH
Christine Brewis, head of digital marketing at Studio Graphene, discusses how gender parity in tech has changed over the last ten years, and what more can be done
![EDAN KWAN](https://reseuro.magzter.com/100x125/articles/5307/436389/5ea19610e3972/crp_PROFILE-EDAN-KWAN-lusionco.jpg)
EDAN KWAN
He swapped life as a singer for a career making eye-popping digital visuals. The Lusion founder chats to Tom May about battling demons, winning awards and where digital advertising is heading
![ANDREW COULDWELL](https://reseuro.magzter.com/100x125/articles/5307/436389/5ea19752cbade/crp_ANDREW-COULDWELL.jpg)
ANDREW COULDWELL
The Brit in LA discusses his new book on design systems, Laying the Foundations
![Top 5 Tips For Ensuring Web Content Is Accessible For All](https://reseuro.magzter.com/100x125/articles/5307/426953/5e81cd895ec52/crp_MAKING-YOUR-WEB-CONTENT-ACCESSIBLE.jpg)
Top 5 Tips For Ensuring Web Content Is Accessible For All
Merlyn Meredith outlines five top tips for ensuring web content is accessible for all
![WHAT DOES THE FUTURE HOLD FOR BROWSERS?](https://reseuro.magzter.com/100x125/articles/5307/426953/5e81b7355faee/crp_WHAT-DOES-THE-FUTURE-HOLD-FOR-BROWSERS.jpg)
WHAT DOES THE FUTURE HOLD FOR BROWSERS?
Nico Turco examines the state of play with browsers, whether developers should encourage diversity or monopoly and how Google fits into it all
![YEARS IN THE MAKING](https://reseuro.magzter.com/100x125/articles/5307/426953/5e81b32f906c9/crp_YEARS-IN-THE-MAKING.jpg)
YEARS IN THE MAKING
Exclusively for net: The latest in a series of anonymous accounts of nightmare clients