\n );\n }\n}\n```\n\nUseful links for FusionTime\n\n- [How FusionTime works](https://www.fusioncharts.com/dev/fusiontime/getting-started/how-fusion-time-works)\n- [Create your first chart](https://www.fusioncharts.com/dev/fusiontime/getting-started/create-your-first-chart-in-fusiontime)\n\n## Drill Down Component\n\nA custom component to easily add drill down to your react application.\n\n### Syntax\n\n```javascript\nimport FusionCharts from 'fusioncharts';\nimport Charts from 'fusioncharts/fusioncharts.charts';\nimport ReactFC from 'react-fusioncharts';\nimport DrillDown from 'react-fusioncharts/components/DrillDown';\nDrillDown.fcRoot(FusionCharts, Charts);\n```\n\n```jsx\nclass MyComponent extends React.Component{\n constructor(props){\n super(props);\n this.plotChildMap = [ 0, 2, 1 ];\n this.dataSource = /*Data Source A : Given above */ ;\n this.btnConfig = {text : 'Back'};\n this.type= 'column2d';\n this.height = 400;\n this.width = 400;\n }\n render(){\n return (\n \n /* ReactFC as a child */\n \n ...\n /* DrillDown as a child for next level drill down*/\n \n )\n }\n}\n```\n\n#### Attribute Description\n\n- plotChildMap[Array(Number)| Array[Object]]\n\n - Array ( Number ) - Representation of child mapped to the plot of the parent data source passed to the `DrillDown`\n component . Array location are considered plot index of parent, the value corresponding to it are considered which child chart to render.\n `Eg. [0,2,1]` \n `0(location) -> 0 (value)` means clicking the first (zero indexed) data plot , render the 0th child , \n `1(location) -> 2(value)` means clicking the second data plot, render the 1st Child (Note: It is 0-indexed ) \n **Null case** : You can pass `null` for a data plot for which you dont want a drill down.\n - Array ( Object ) - Representation of child mapped with plot in form of an object of shape \n `{ \"plotPosition\": Number, \"childPosition\": Number }` \n This object holds information about which child render on a data plot is clicked. \n `Eg. [{ plotPosition: 1 , childPosition: 0}, { plotPosition: 0, childPosition: 1}]` \n Note: plotChildMap does not honour heterogeneous data , eg. Number and Object\n both. \n `[ 0 , { plotPosition:0, childPosition: 1 } ]`\n\n- btnConfig [Object]- Basic configuration without overriding the default button styles\n - `text`: PropTypes.string - Button Text\n - `color`: PropTypes.string\n - `backgroundColor`: PropTypes.string\n - `borderColor`: PropTypes.string\n - `fontSize`: PropTypes.string\n - `fontWeight`: PropTypes.string\n - `padding`: PropTypes.string\n - `fontFamily`: PropTypes.string\n- btnStyle [Object] - CSS styles which override the styles in default btnConfig except `text`.\n\n## Working with APIs\n\nTo call APIs we will need the chart object. To get the chart object for an React-FC component, pass a callback through the attribute `onRender`.\n\nWrite the callback:\n\nAs a separate function:\n\n```javascript\nvar chartRenderCallback = function (chart) {\n [Code goes here]\n}\n```\n\nOr, as a component class method:\n\n```javascript\nchartRenderCallback (chart) {\n [Code goes here]\n}\n```\n\nPass the callback as a prop, to which the chart object will be returned on rendering\n\n```\n\n```\n\n##### Consider the example below that conerts a Column 2D chart to a Pie 2D chart after 5 seconds.\n\n```javascript\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport FusionCharts from 'fusioncharts';\nimport Charts from 'fusioncharts/fusioncharts.charts';\nimport ReactFC from 'react-fusioncharts';\nimport FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\nReactFC.fcRoot(FusionCharts, Charts, FusionTheme);\n\nconst dataSource = /* Data source A given above */;\n\nconst chartConfigs = {\n type: 'column2d',\n width: 600,\n height: 400,\n dataFormat: 'json',\n dataSource: dataSource\n};\n\nclass Chart extends Component {\n // Convert the chart to a 2D Pie chart after 5 secs.\n alterChart(chart) {\n setTimeout(() => {\n chart.chartType('pie2d');\n }, 5000);\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n}\n\nReactDOM.render(, document.getElementById('root'));\n```\n\nlinks to help you get started:\n\n- [Live samples with code](https://fusioncharts.github.io/react-fusioncharts-component/)\n- [Documentation](https://www.fusioncharts.com/dev/getting-started/react/your-first-chart-using-react)\n- [Use Chart API events & methods in React](https://www.fusioncharts.com/dev/getting-started/react/configure-your-chart-using-react)\n- [Chart gallery](https://www.fusioncharts.com/explore/chart-gallery)\n- [FusionCharts API](https://www.fusioncharts.com/dev/api/fusioncharts)\n\n## Going Beyond Charts\n\n- Explore 20+ pre-built business specific dashboards for different industries like energy and manufacturing to business functions like sales, marketing and operations [here](https://www.fusioncharts.com/explore/dashboards).\n- See [Data Stories](https://www.fusioncharts.com/explore/data-stories) built using FusionCharts’ interactive JavaScript visualizations and learn how to communicate real-world narratives through underlying data to tell compelling stories.\n\n## For Contributors\n\n- Clone the repository and install dependencies\n\n```\n$ git clone https://github.com/fusioncharts/react-fusioncharts-component.git\n$ cd react-fusioncharts-component\n$ npm i\n$ npm start\n```\n\n- Run `npm run build` to start the dev server and point your browser at [http://localhost:3000/](http://localhost:3000/).\n\n## Licensing\n\nThe FusionCharts React integration component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FusionCharts library in your page separately, which has a [separate license](https://www.fusioncharts.com/buy).\n","readmeFilename":"README.md","users":{"jk6":true}}