I am using reactC3js module to load a chart an I am not able to load y axis dynamically

Question

I am using reactC3js module for creating line charts and not avle to load y axis data dynamically , the y axis takes the data sent first and after that it is not updating and re-rendering the chart

Answer 1

Here an example I did for you.

https://codesandbox.io/s/wkyw9xrj7k

Demo : https://wkyw9xrj7k.codesandbox.io/

Hope this will help you.

import React from "react";
import ReactDOM from "react-dom";
import C3Chart from "react-c3js";
import "c3/c3.css";
import "./styles.css";

class App extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     chartData: {
      columns: [
       ["data1", 30, 200, 100, 400, 150, 250],
       ["data2", 50, 20, 10, 40, 15, 25]
      ]
    }
   };
 }


 //Dynamically change the X-axis value with random numbers..

 changeX = () => {
   let chartData = this.state.chartData;
   let newX = chartData.columns[0].map((n, i) => {
     return i > 0 ? (Math.random() * 100).toFixed(2) : n;
   });
   chartData.columns[0] = newX;
   this.setState({ chartData });
  };


 //Dynamically change the Y-axis value with random numbers similar to changeX. 

 changeY = () => {
   let chartData = this.state.chartData;
   let newY = chartData.columns[1].map((n, i) => {
     return i > 0 ? (Math.random() * 100).toFixed(2) : n;
   });
   chartData.columns[1] = newY;
   this.setState({ chartData });
 };

 render() {
   return (
     <div>
       <C3Chart data={this.state.chartData} />
       <button onClick={() => this.changeX()}>changeX</button>
       <button onClick={() => this.changeY()}>changeY</button>
     </div>
   );
 }
}

const mountNode = document.getElementById("root");
ReactDOM.render(<App />, mountNode);