C3.js chart – implementing componentDidUpdate

C3.js is a third-party library that makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. That means you don't need to write any D3 code anymore:

  1. componentDidUpdate: This React method is normally used to manage third-party UI elements and interact with the native UI. When we use a third-party library such as C3.jswe need to update the UI library with the new data. Install C3.js with npm:
  npm install c3
  1. After we install C3.js, we need to add the C3 CSS file to our index.html. For now, we can use the CDN they provide:
<!-- Add this on the <head> tag --><link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" ...

Get React Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.