How to use google chart in React-Native?

Question

I am trying to use google charts in my react native app.

Below is my code:

import React, {useState, useEffect} from 'react';
import {StyleSheet, View} from 'react-native';
import {WebView} from 'react-native-webview';
import {Chart} from 'react-google-charts';

const ChartScreen = (props: any) => {
    const ExampleChart = `
            <div className={'my-pretty-chart-container'}>
                <Chart
                    width={'500px'}
                    height={'300px'}
                    chartType="PieChart"
                    loader={<div>Loading Chart</div>}
                    data={[
                    ['Task', 'Hours per Day'],
                    ['Work', 11],
                    ['Eat', 2],
                    ['Commute', 2],
                    ['Watch TV', 2],
                    ['Sleep', 7],
                    ]}
                    options={{
                    title: 'My Daily Activities',
                    }}
                    rootProps={{ 'data-testid': '1' }}
                />
            </div>`;

    return (
        <View style={styles.container}>
            <WebView source={{html: ExampleChart}} style={styles.webStyle} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    webStyle: {
        marginTop: 20,
        height: 500,
        width: 320,
        flex: 1,
    },
});

export default ChartScreen;

I am using react-native-webview to display charts from react-google-charts.

But chart is not coming on screen, I don't know what I am doing wrong..!!

score 0 · Answer 1 · answered Sep 29 '21 at 22:34

You can't directly pass JSX into WebView as a string. You need to render the ReactJS element before passing it to WebView like below:

import { renderToString } from 'react-dom/server'
import { WebView } from 'react-native-webview';
import ExampleChart from './path-to-component';

<WebView source={{ html: renderToString(<ExampleChart />) }}></WebView>;

I didn't test it but in theory, it should work.

More info about ReactDOMServer.

score 0 · Answer 2 · answered Apr 25 '22 at 07:24

I have used google chart in webView like this and it worked...

export function GoogleCharts() {


    const ExampleChart = 

  `<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart', 'line']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Population');

        data.addRows({data});

        var linearOptions = {
          title: 'World Population Since 1400 A.D. in Linear Scale',
          legend: 'none',
          width: 450,
          height: 500,
          hAxis: {
            title: 'Date'
          },
          vAxis: {
            title: 'Population (millions)'
            ,
            scaleType: 'log'
          }
        };
        var logOptions = {
          title: 'World Population Since 1400 A.D. in Log Scale',
          legend: 'none',
          width: 450,
          height: 500,
           hAxis: {
            title: 'Date'
          },
          vAxis: {
            title: 'Population (millions)',
            ticks: [0, 1000, 2000, 4000, 6000]
          }
        };
        var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
       linearChart.draw(data, linearOptions);

      var logChart = new google.visualization.LineChart(document.getElementById('log_div'));
      logChart.draw(data, logOptions);

    };  
    </script>
  </head>
  <body>
    <table class="columns">
      <tr>
        <th>Linear Scale</th>
        <th>Log Scale</th>
      </tr>
      <tr>
        <td><div id="linear_div"></div></td>
        <td><div id="log_div"></div></td>
      </tr>
    </table>
  </body>
</html>`;



return (
    <View style={styles.container}>
      <WebView source={{html: (ExampleChart)}} style={styles.webStyle} />
    </View>
  );
}

How to use google chart in React-Native?

2 Answers2