What is the gantt chart "type" in Anychart?

Question

I'm relatively new to React and I am trying to build a gantt chart using Anychart.

It seems pretty straight forward for other chart types, but I cannot work out what 'chart type' is needed for a gantt chart.

For example, I took the data from their site and just tried to plot it on a gantt chart:


function GanntChart() {

  const myData = [
    { name: 'Root', children: [
      { name: 'Parent 1', children: [
        { name: 'Child 1-1', value: 150000000 },
        { name: 'Child 1-2', value: 45000000 },
        { name: 'Child 1-3', value: 3200000 }
      ] },
      { name: 'Parent 2', children: [
        { name: 'Child 2-1', value: 55000000 },
        { name: 'Child 2-2', value: 10600000 },
        { name: 'Child 2-3', value: 5200000 }
      ] },
      { name: 'Parent 3', children: [
        { name: 'Child 3-1', value: 21000000 },
        { name: 'Child 3-2', value: 9000000 }
      ] }  
    ] } 
  ]


  return (
    <>
      <AnyChart
        type="gantt-chart" 
        data={myData}
        title="Simple gantt chart"
      />
    </>

  )

As you can see I have tried "gantt-chart" and a bunch of other variations.

Does anyone have an example of a basic gantt built in React?

Thanks

Have you tried "ganttProject"? That's how it is referenced [in the docs](https://api.anychart.com/anychart#ganttProject). — Andrew Gillis, Mar 14 '22 at 18:15
Amazing, works perfectly. Thanks for the link too, searched for ages! — coolduck, Mar 16 '22 at 09:56

score 0 · Answer 1 · answered Feb 15 '23 at 17:05

It is possible to build a lot of different chart types with anychart-react, and due to the complexity of Gantt Charts, the preferred approach is an embedding of vanilla JS into the React application.

Here is the example

import "./App.css";
import { useEffect } from "react";

//Importing a pure JS function
import { gantChart } from "./chart/anychartGantt";

function App() {
  //Create a data variable
    //Later you have to populate it with some actual data
  const myData = [];

  //Calling useEffect to get chart at the right time
  useEffect(() => {
    //Making a chart instance
    const chart = gantChart("chart_container", myData);

    //Preventing duplicate renders
    return () => chart.dispose();
  }, []);

  return (
    <div className="App">
      <div id="chart_container"></div>
    </div>
  );
}

export default App;

//This is the main function of a Gantt Chart. 
//All of the appereance settings should be done here

export const gantChart = (container, data) => {
  // Creates Gantt project chart.
  var chart = anychart.ganttProject();
  chart.data(data, "as-tree");
  chart.title("Creating Gantt chart with React and Anychart");
  chart.container(container);
  chart.draw();
  return chart;
}

In the attached GitHub repository, you can find this full example of using Anychart with React and Vanilla JS.

If you have found direct React implementation important for you, feel free to contact us at support@anychart.com.

What is the gantt chart "type" in Anychart?

1 Answers1