Issue Adding C3 Chart Into Component

I have a react question. I am trying to add in a c3 chart using the docs found here: https://c3js.org/samples/chart_donut.html and I used someone with a similar problem on stack over flow here: https://stackoverflow.com/questions/51362924/c3-chart-not-rendering-in-react-project . My c3 pie chart is not rendering. I threw in some console logs but couldnt see any printed so I figured out that the chart is not initiating (even though I set up a const to initiate). Any ideas? Here is my use effect as well as where it is inside the return

`useEffect(() => {
const initializeChart = () => {
console.log("Initializing chart...");

  // Extract data from expenses for the initial chart
  const chartData = budget.expenses.map((expense) => [
    expense.name,
    expense.amount,
  ]);

  console.log("Chart data:", chartData);

  const newChart = c3.generate({
    bindto: '#chart', // Specify the element where the chart will be rendered
    data: {
      columns: chartData,
      type: 'donut',
      onclick: function (d, i) {
        console.log('onclick', d, i);
      },
      onmouseover: function (d, i) {
        console.log('onmouseover', d, i);
      },
      onmouseout: function (d, i) {
        console.log('onmouseout', d, i);
      },
    },
    donut: {
      title: 'Expenses Distribution',
    },
  });

  console.log("Chart initialized:", newChart);

  // Unload some data after another delay (2500 milliseconds in this example)
  setTimeout(() => {
    const idsToUnload = budget.expenses.slice(0, 2).map((expense) => expense.id);
    newChart.unload({
      ids: idsToUnload,
    });
    console.log("Data unloaded from chart:", idsToUnload);
  }, 2500);

  setChart(newChart); // Set the chart instance in the state
};`

And this is the part thats within my return

{budget.expenses && budget.expenses.length > 0 ? ( <div className="grid-md"> <h2> <span className="accent">{budget.name}</span> Expenses </h2> {chart && <div id="chart">{chart}</div>} <Table expenses={budget.expenses} showBudget={false} /> </div>

Blog

Issue Adding C3 Chart Into Component

Eleah Burman

Join Our Newsletter. No Spam, Only the good stuff.

Related