text: // import React from 'react';
  
  // const ExampleChart = () => {
  //   return <div>chart</div>;
  // };
  
  // export default ExampleChart;
  
  // STEP 1 - Include Dependencies
  // Include react
  import React from "react";
  
  // Include the react-fusioncharts component
  import ReactFC from "react-fusioncharts";
  
  // Include the fusioncharts library
  import FusionCharts from "fusioncharts";
  
  // Include the chart type
  import Chart from "fusioncharts/fusioncharts.charts";
  
  // Include the theme as fusion
  import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
  
  // Adding the chart and theme as dependency to the core fusioncharts
  ReactFC.fcRoot(FusionCharts, Chart, FusionTheme);
  
  // STEP 2 - Chart Data
  
  // STEP 3 - Creating the JSON object to store the chart configurations
  
  // STEP 4 - Creating the DOM element to pass the react-fusioncharts component
  
  const ChartComponent = ({ data }) => {
    const chartConfigs = {
      type: "bar3d", // The chart type
      width: "100%", // Width of the chart
      height: "400", // Height of the chart
      dataFormat: "json", // Data type
      dataSource: {
        // Chart Configuration
        chart: {
          //Set the chart caption
          caption: "Most Forked",
          yAxisName: "Forks",
          xAxisName: "Repos",
          xAxisNameFontSize: "16px",
          yAxisNameFontSize: "16px",
          // paletteColors: '#f0db4f',
        },
        // Chart Data
        data,
      },
    };
    return <ReactFC {...chartConfigs} />;
  };
  
  export default ChartComponent;
  