highcharts-react-native
highcharts-react-native copied to clipboard
highcharts
Is there anyway to use this library in a project which is initialized by Expo & using Typescript template?
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<any>();
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 (
<View style={styles.container}>
<HighchartsReactNative
styles={styles.container}
options={chartOptions}
/>
</View>
)
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
justifyContent: 'center',
flex: 1
}
});
export default Chart;
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.
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.
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}
/>
)
}
Had tough time using the package. So went about custom approach using WebView.
utils/graph-webview-html.tsfunction 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.tsfunction 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.tsxexport 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. 👍
