C3.js React Tutorial

What is C3.js?

C3.js is a high-level API on top of D3.js. It has an active community for support, is highly customizable, and benefits from having great code reusability. It has a steep learning curve and is more limited when it comes to the number of charts offered.

What is React?

React is a popular JavaScript library for building user interfaces, particularly single-page applications where dynamic content needs to be updated without reloading the page. Developed by Facebook (now Meta Platforms), React has grown in popularity due to its simplicity, efficiency, and scalability. It allows developers to build large web applications that can change data without reloading the page, offering a responsive and fluid user experience. React has a virtual DOM for faster manipulation, a component based architecture, and a great community for support. It is efficient, flexible, and widely used in the market.

C3.js React Code Example

Integrating C3.js, a D3-based reusable chart library, with React allows for creating interactive and dynamic charts within React apps. This example demonstrates how to create a simple line chart in a React component using C3.js.

Step 1: Install C3.js and D3.js

First, ensure both C3.js and D3.js are installed in your project, as C3.js is a D3-based library.

npm install c3 d3

Step 2: Create a React Component

Create a new React component where the chart will be rendered. This component will import C3.js and use it to generate a chart within a specified DOM element.

import React, { useEffect, useRef } from 'react';

import c3 from 'c3';

import 'c3/c3.css';

function LineChart() {

 // Ref to attach the chart

 const chartRef = useRef(null);

 useEffect(() => {

   // Generate the chart

   const chart = c3.generate({

     bindto: chartRef.current,

     data: {

       columns: [

         ['data1', 30, 200, 100, 400, 150, 250],

         ['data2', 50, 20, 10, 40, 15, 25]

       ],

       type: 'line' // Change type to 'bar', 'spline', etc. as needed

     }

   });

   // Optional: Cleanup on component unmount

   return () => {

     chart.destroy();

   };

 }, []); // Empty dependency array means this effect runs once on mount

 return (

   <div>

     <h2>Simple Line Chart</h2>

     {/* Chart container */}

     <div ref={chartRef}></div>

   </div>

 );

}

export default LineChart;

Step 3: Render the Component

Once your component is ready, it can be rendered inside any part of your React application. For example, you can include it in your App.js file like so:

import React from 'react';

import LineChart from './LineChart'; // Adjust the import path as necessary

function App() {

 return (

   <div className="App">

     <h1>My React App</h1>

     <LineChart />

   </div>

 );

}

export default App;

This will render the line chart within your React application. You can customize the chart data, type, and other options as per your needs by modifying the c3.generate configuration within the LineChart component.

ABOUT EXPLO

Explo, the publishers of Graphs & Trends, is an embedded analytics company. With Explo’s Dashboard and Report Builder product, you can a premium analytics experience for your users with minimal engineering bandwidth.
Learn more about Explo →