Is there anyway to use this library in a project which is initialized by Expo & using Typescript template?

ngmikeng commented 3 years ago

I know this library is deprecated but hope someone has also met the issue. I tried following the instruction but it doesn't work.

My steps:

Install package by yarn
Create file metro.config.js
Install react-native-webview by yarn
Put some //@ts-ignore in code for ignore type checking

Try with the example code in a component


import React, { useEffect, useState } from "react";
import { View, StyleSheet } from "react-native";
// @ts-ignore
import HighchartsReactNative from "@highcharts/highcharts-react-native";

const Chart: React.FC = () => { const [chartOptions, setChartOptions] = useState();

useEffect(() => { let intervalId: NodeJS.Timer; const chartOptionsTest = { chart: { events: { load: function () { // @ts-ignore // set up the updating of the chart each second const series = this.series[0]; intervalId = setInterval(function () { const y = Math.random(); series.addPoint(y, true, true); }, 1000); } } }, series: [{ data: [1, 2, 3] }] } setChartOptions(chartOptionsTest);

return () => {
  if (intervalId) {
    clearInterval(intervalId);
  }
}

}, [])

return (

) }

const styles = StyleSheet.create({ container: { backgroundColor: '#fff', justifyContent: 'center', flex: 1 } });

export default Chart;

horstleung commented 3 years ago

what is the error?

ngmikeng commented 3 years ago

what is the error?

The chart doesn't show up although there isn't any error. I just wonder if there is anyone has used this library with the typescript template which is created by Expo CLI? or it doesn't work because it doesn't support typescript so we can close this issue.

horstleung commented 3 years ago

Can you inspect the webview? maybe there is an error there.

ngmikeng commented 3 years ago

Sorry, I can't inspect the webview, I've only tested it on a real device which is connected with Expo.

On Wed, Sep 15, 2021 at 10:44 AM Horst Leung @.***> wrote:

Can you inspect the webview? maybe there is an error there.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/highcharts/highcharts-react-native/issues/136#issuecomment-919674786, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACD7VDZEQAAS2X5L7TN3GLTUCAJDTANCNFSM5C66TKIQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

velen-lqc commented 7 months ago

Had tough time using the package. So went about custom approach using WebView.

`utils/graph-webview-html.ts`

function graphWebviewHtml(chartOptions: Highcharts.Options): string {
    return `
    <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
            <script src="https://code.highcharts.com/highcharts.js"></script>
            <script src="https://code.highcharts.com/highcharts-more.js"></script>
            <script src="https://code.highcharts.com/modules/exporting.js"></script>
            <script>
                var chartOptions = ${JSON.stringify(chartOptions)};
                function reviver(key, value) {
                    if (key === 'formatter' && typeof value === 'string') {
                        return new Function('return ' + value)();
                    }
                    return value;
                };

                const parsedChartConfig = JSON.parse(JSON.stringify(chartOptions), reviver);

                console.debug('chartOptions', chartOptions);
                document.addEventListener("DOMContentLoaded", (event) => {
                    Highcharts.chart('container', parsedChartConfig);    
                });
            </script>
        </head>
        <body>
            <div id="container"></div>
        </body>
    </html>
    `
}

export default graphWebviewHtml

`graphObject.ts`

function buildGraphObject() : Highcharts.Options  {
   return {
       chart: { ... },
       yAxis: {
        title: {
            text: null
        },
        labels: {
            formatter:
                'function () { return "$" + this.axis.defaultLabelFormatter.call(this); }' as unknown as Highcharts.AxisLabelsFormatterCallbackFunction,
        },
    },
    series:  { ... }
}

`HighChartsView.tsx`

export const HighChartView: React.FC<IHighChartViewProps> = ({
    style,
    webViewProps,
    chartOptions,
    onEndLoad,
    useInteractionEnabled = true
}) => {
    const html = useMemo(() => {
        if (isNil(chartOptions)) {
            return ''
        } else return graphWebviewHtml(chartOptions)
    }, [chartOptions])

    return (
        <WebView
            isUserInteractionEnabled={useInteractionEnabled}
            onLoadEnd={onEndLoad}
            originWhitelist={['']}
            style={style}
            source={{ html, baseUrl: 'web/' }}
            javaScriptEnabled={true}
            domStorageEnabled={true}
            scalesPageToFit={true}
            scrollEnabled={false}
            automaticallyAdjustContentInsets={true}
            scaleEnabled={false}
            {...webViewProps}
        />
    )
}

kbqdev commented 2 months ago

Had tough time using the package. So went about custom approach using WebView.

`utils/graph-webview-html.ts`

function graphWebviewHtml(chartOptions: Highcharts.Options): string {
  return `
    <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
            <script src="https://code.highcharts.com/highcharts.js"></script>
            <script src="https://code.highcharts.com/highcharts-more.js"></script>
            <script src="https://code.highcharts.com/modules/exporting.js"></script>
            <script>
                var chartOptions = ${JSON.stringify(chartOptions)};
                function reviver(key, value) {
                    if (key === 'formatter' && typeof value === 'string') {
                        return new Function('return ' + value)();
                    }
                    return value;
                };

                const parsedChartConfig = JSON.parse(JSON.stringify(chartOptions), reviver);

                console.debug('chartOptions', chartOptions);
                document.addEventListener("DOMContentLoaded", (event) => {
                    Highcharts.chart('container', parsedChartConfig);    
                });
            </script>
        </head>
        <body>
            <div id="container"></div>
        </body>
    </html>
    `
}

export default graphWebviewHtml

`graphObject.ts`

function buildGraphObject() : Highcharts.Options  {
   return {
       chart: { ... },
       yAxis: {
      title: {
          text: null
      },
      labels: {
          formatter:
              'function () { return "$" + this.axis.defaultLabelFormatter.call(this); }' as unknown as Highcharts.AxisLabelsFormatterCallbackFunction,
      },
  },
  series:  { ... }
}

`HighChartsView.tsx`

export const HighChartView: React.FC<IHighChartViewProps> = ({
  style,
  webViewProps,
  chartOptions,
  onEndLoad,
  useInteractionEnabled = true
}) => {
  const html = useMemo(() => {
      if (isNil(chartOptions)) {
          return ''
      } else return graphWebviewHtml(chartOptions)
  }, [chartOptions])

  return (
      <WebView
          isUserInteractionEnabled={useInteractionEnabled}
          onLoadEnd={onEndLoad}
          originWhitelist={['']}
          style={style}
          source={{ html, baseUrl: 'web/' }}
          javaScriptEnabled={true}
          domStorageEnabled={true}
          scalesPageToFit={true}
          scrollEnabled={false}
          automaticallyAdjustContentInsets={true}
          scaleEnabled={false}
          {...webViewProps}
      />
  )
}

I'm new here can you make a demo. That will be great. 👍

highcharts / highcharts-react-native