Fusion chart showing No Data to display in React Native

[Anilkumar]

I am doing react native application. In that, I am trying to showing bar chart. So, I am using Fusion Chart, It is mandatory to use this library in my application. So, I followed this library installation and it was successful. But, Data is not showing at all. I have added annotations according to get my design. But,

No data to display showing in screen even data is there.

 

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      type: 'bar2d',
      width: '100%',
      height: '100%',
      dataFormat: 'json',
      dataSource: {
        chart: {
            captionFontSize: '16',
            subcaptionFontSize: '14',
            showAlternatevGridColor: '0',
            numDivLines: '0',
            valueFontColor: '#ffffff',
            yAxisMinValue: '0',
            yAxisMaxValue: '100',
            showYAxisValues: '0',
            // "canvasBorderColor" : "#b3ffb3",
            canvasBgColor: '#ffffff,#e6eeff',
            canvasTopMargin: '100',
            paletteColors: '#990000',
            usePlotGradientColor: '1',
            plotGradientColor: '#ff8080',
            divLineAlpha: '0',
            plotSpacePercent: '60',
            useDataPlotColorForLabels: '1',
            showPercentInTooltip: '0',
            showLegend: '1',
            showLabels: '0',
            showValues: '0',
            placeValuesInside: '1',
            showBorder: '0'
          },
          data: [
            {
              label: 'Travel & Leisure',
              value: '41'
            },
            {
              label: 'Advertising/Marketing/PR',
              value: '39'
            },
            {
              label: 'Other',
              value: '38'
            },
            {
              label: 'Real Estate',
              value: '32'
            },
          ],
          annotations: {
            showBelow: '0',
            autoScale: '1',
            groups: [{
              id: 'user-images',
              items: [{
                id: 'dyn-label-bg',
                color: '#000000',
                align: 'left',
                type: 'text',
                text: 'Best when calm',
                x: '$canvasStartX+0',
                y: '$dataset.0.set.0.ENDY-0'
              }, {
                id: 'dyn-label-bg',
                color: '#000000',
                align: 'left',
                type: 'text',
                text: 'Very Relaxed',
                x: '$canvasStartX+00',
                y: '$dataset.0.set.1.ENDY-0'
              }, {
                id: 'dyn-label-bg',
                color: '#000000',
                align: 'left',
                type: 'text',
                text: 'Mellow',
                x: '$canvasStartX+00',
                y: '$dataset.0.set.2.ENDY-0'
              }, {
                id: 'dyn-label-bg',
                color: '#000000',
                align: 'left',
                type: 'text',
                text: 'Out of Control',
                x: '$canvasStartX+00',
                y: '$dataset.0.set.3.ENDY-0'
              }]
            }]
          }
    }

    };

    this.libraryPath = Platform.select({
      // Specify fusioncharts.html file location
      ios: require('./assets/fusioncharts.html'),
      //android: { uri: 'file:///android_asset/fusioncharts.html' },
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.heading}>
          FusionCharts Integration with React Native
        </Text>
        <View style={styles.chartContainer}>
          <FusionCharts
            type={this.state.type}
            width={this.state.width}
            height={this.state.height}
            dataFormat={this.state.dataFormat}
            dataSource={this.state.dataSource}
            libraryPath={this.libraryPath} // set the libraryPath property
          />
        </View>
      </View>
    );
  }
}

 

Here is the link which I created in stackoverflow query.

https://stackoverflow.com/questions/54785081/fusion-chart-showing-no-data-to-display-in-react-native

I got stuck due to this issue from 2 days, Can anyone help me to fix this.

Its urgent work.

 

Thanks

Edited February 20, 2019 by Anilkumar