How To Add C3Js Chart In React JS

In this article, we will learn how to add a C3Js chart in react js.

– First of all, we have to create a react application.

–  Then import the below package into your project.

npm i react-c3js

–  Adding CSS reference

import 'c3/c3.css';

– Now open your app.js file and add the below code:

import React from 'react'
import C3Chart from 'react-c3js';
import 'c3/c3.css';

const data = {
    columns: [
        ['data1', 30, 20, 50, 40, 60, 50],
        ['data2', 200, 130, 90, 240, 130, 220],
        ['data3', 300, 200, 160, 400, 250, 250],
        ['data4', 200, 130, 90, 240, 130, 220],
        ['data5', 130, 120, 150, 140, 160, 150],
    ],
    type: 'bar',
    types: {
        data3: 'spline',
        data4: 'line',
        data6: 'area',
    },
    groups: [
        ['data1', 'data2']
    ]
}

const App = () => {
    return (
        <div>
            <C3Chart data={data} />
        </div>
    )
}

export default App

Output: