C3.js React Tutorial

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.