highcharts / highcharts-react-native Goto Github PK
View Code? Open in Web Editor NEWLicense: Other
License: Other
My child component is a HighchartsReactNative component RatingsChart which derives its props from its parent. The code is like this:
import React, { Component } from 'react';
import HighchartsReactNative from '@highcharts/highcharts-react-native';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
ActivityIndicator,
} from 'react-native';
import { WebView } from 'react-native-webview';
import { COLORS } from '../../utils/Constants';
export default class RatingsChart extends Component<{}> {
constructor(props) {
super(props);
console.log("plot on chart: ", this.props.dataToPlot)
console.log("Cats on chart: ", this.props.catsToShow)
var CATS = this.props.catsToShow
this.state = {
freshData: this.props.dataToPlot,
chartOptions: {
chart: {
type: 'bar',
height: '48%',
width: 320,
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: CATS,
title: {
text: null
},
labels: {
align: 'left',
reserveSpace: true
},
style: {
fontWeight: 'bold',
fontSize: '40px',
},
visible: true,
lineWidth: 0
},
yAxis: {
min: 0,
title: {
text: '',
align: 'high'
},
style: {
fontSize: 10
},
labels: {
overflow: 'justify',
enabled: false,
},
gridLineWidth: 0
},
tooltip: {
valueSuffix: 'units'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
groupPadding: 0,
pointPadding: 0
},
pointWidth: 6,
}
},
legend: {
enabled: false,
layout: 'horizontal',
align: 'right',
verticalAlign: 'right',
x: -30,
y: 0,
floating: true,
borderWidth: 1,
backgroundColor:
'#cccccc',
shadow: true
},
credits: {
enabled: false
},
series: this.props.dataToPlot
}
};
}
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.dataToPlot !== nextState.freshData) {
return true
} else return false
}
componentDidMount() {
this.setState({
freshData: this.props.dataToPlot
})
}
render() {
return (
<View>
<HighchartsReactNative
styles={styles.container}
options={this.state.chartOptions}
oneToOne={true}
updateArgs={[true]}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#43AAcc',
justifyContent: 'center',
}
});
However it does not re-render whenever the props dataToPlot changes. I have included the options oneToOne={true}
and updateArgs={[true]}
(as was suggested in this SO issue and also in the other SO issue ; but the expected result is not achieved. Everytime I have to get the new updated chart after the new values of this.state.chartOptions.series
is updated (through the props this.props.dataToPlot
) I have to re-save the component RatingsChart.js file.
I have posted the same issue in SO.
I'm unable to get a basic chart working using a clean expo app.
expo init highcharts-example --npm # using yarn does not resolve the issue
cd highcharts-example
npm i @highcharts/highcharts-react-native
# copy basic usage example https://github.com/highcharts/highcharts-react-native#highcharts-chart
# from docs into Chart.js
npm start
Unable to resolve "react-native-webview" from "node_modules/@highcharts/highcharts-react-native/src/HighchartsReactNative.js" Failed building JavaScript bundle.
I know there have been recent changes with react-native-webview - perhaps they may be causing this issue.
I've created a sample repo for the issue: https://github.com/axelav/expo-highcharts
I'll paste in the package.json
here as well.
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@highcharts/highcharts-react-native": "^2.1.1",
"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-web": "~0.11.7"
},
"devDependencies": {
"babel-preset-expo": "~8.0.0",
"@babel/core": "^7.0.0"
},
"private": true
}
@sebastianbochan I have been looking for some project to contribute.
Do you have some tasks to assign me, I would like to help with anything on this project?
I admire a lot and congratulations for this project.
Hello,
Since it is just a webview with injected javascript it is unclear to me why plotOptions is not working.
In general it is a bit unclear what options are actually working. In the documentation you refer to the Highcharts API documentation, but it seems a lot of the options are actually not supported.
I have seen the various tickets marked as enhancement. But also things like plotOptions dont seem to be supported as well.
Best regards
Thilo
For a scenario I need onMessage callback when postMessage is called from webView
bb
Can I use it to draw 3D pie charts? now, I use the following options to do 3d pie charts does not work
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0,
},
}
Hi there!
I am trying to setup the package as indicated in the readme, but this error stills happen (running iOS, did not try Android yet):
Unhandled JS Exception: TypeError: Cannot read property 'width' of undefined
This error is located at:
in HighchartsReactNative
In my package.json:
@highcharts/highcharts-react-native": "^1.0.0",
"react": "^16.8.3",
"react-native": "^0.59.8",
Code snippet:
import HighchartsReactNative from '@highcharts/highcharts-react-native/src/HighchartsReactNative';
...
render() {
...
return (
...
<HighchartsReactNative
options={{
series: [{
data: [1, 3, 2],
}],
}}
style={{
flex: 1,
width,
height: 500,
}}
/>
...
);
}
Note that import HighchartsReactNative from '@highcharts/HighchartsReactNative';
results in an error as the package is not found.
Any help would be appreciated :)
Hi - I have a chart which has a split by option and depending on the split by can return a varying number of series. If, for example my chart has 2 series, and the new data has 3 series, after updating the chartOptions in the state, the 3rd series is not shown, despite the existing 2 series updating.
I believe in the React Highcharts wrapper there's a oneToOne prop which force updates all series, is this not including in this package?
export default class Highcharts extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
chartOptions: {
...,
series: this.props.data
}
};
}
componentDidUpdate(prevProps) {
const { data } = this.props;
if (!isEqual(data, prevProps.data)) {
this.setState(prevState => ({
chartOptions: {
...prevState.chartOptions,
series: data
}
}));
}
}
render() {
return (
<HighchartsReactNative
useCDN={true}
useSSL={true}
styles={styles.container}
webviewStyles={styles.container}
options={this.state.chartOptions}
/>
);
}
}
});
I have been trying to integrate my own custom font that is used throughout my app in the Highcharts but it does not recognise it. I have been unable to locate an example of where someone has used a custom font in their application without it being hosted externally. The .TTF file of the font is in my project folder and loaded asynchronously in my App.js. It would be much appreciated if someone could provide some guidance or if this feature could be added to the project.
Hi!
This library doesn't support HighMaps, HighStock and Gantt, right?
Do you have plan to support them?
Or are there any other repositories?
Hi Team, when we tried to run the sample example provided in Readme file, but the charts are not rendering and there is no error also.
<HighchartsReactNative
useCDN={true}
useSSL={true}
styles={chartStyles}
options={chartOptions}
modules={['map']}
/>
It doesn't work like this, any clue? @sebastianbochan thanks~
For the options I'm using exactly what worked for highcharts react web
export const getChartOptions = ({
// formatNumber,
// currency,
data,
height,
}: AreaChartOptions) => {
return {
exporting: {
enabled: false,
},
title: {
text: '',
},
chart: {
height,
borderRadius: rd('xSmall'),
backgroundColor: '#f8f8f9',
style: {
fontFamily: '"Montserrat", sans-serif',
},
},
plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66',
},
},
},
},
colorAxis: {
minColor: 'rgba(34,92,116,0.20)',
maxColor: '#225C74',
labels: {
enabled: true,
style: {
fontSize: 13,
},
},
},
tooltip: {
// formatter: function () {
// return (
// this.point.name +
// ': ' +
// formatNumber(this.point.value, {style: 'currency', currency})
// );
// },
},
legend: {
enabled: data.length > 0,
align: 'right',
verticalAlign: 'bottom',
},
series: [
{
animation: false,
mapData: worldContinentData,
joinBy: 'hc-key',
data,
dataLabels: {
enabled: true,
format: '{point.name}',
},
},
],
mapNavigation: {
enabled: false,
buttonOptions: {
verticalAlign: 'bottom',
},
},
};
};
I've built a spline mirror chart, I've set all initial values in the constructor and the chart loads perfectly fine. The issue occurs when I try to update, I just don't want to update the series. I want to update the whole chart including x and y axis as those values are dynamic.
Here is the initial state
this.state = {
chartOptions: {
credits: {
enabled: false
},
time: {
timezone: ''
},
chart: {
backgroundColor: '#272727',
zoomType: 'x',
panning: true
},
title: {
text: null,
style: {
color: '#E0E0E0',
fontSize: '20px'
},
align: 'left'
},
legend: {
useHTML: true,
borderWidth: 0,
itemMarginBottom: 5,
itemStyle: {
color: '#E0E0E0',
fontWeight: 'normal',
fontSize: '11px'
}
},
tooltip: {
useHTML: true,
followPointer: false,
formatter: function(){
return this.points.reduce(function(s, point){
let positiveValue = Highcharts.numberFormat(Math.abs(point.y), 0);
return '<div style="display: none;"><p style="display: none;font-size: 14px; margin: 2px 3px 2px 3px; color:#414549;">' + positiveValue + ' ' + point.series.name + '</p>';
}, '<p style="display: none;font-size: 11px; margin: 0px 3px 4px 3px; color: #7C7D80;"> Sustained at: ' + Highcharts.dateFormat('%H:%M:%S.%L', this.x) + '</p></div>');
},
shared: true,
borderWidth: 0,
borderRadius: 5,
padding: 10,
style: {
opacity: 0,
backgroundColor: '#272727'
}
},
xAxis: {
type: 'datetime',
lineColor: '#9F9F9F',
tickColor: '#9F9F9F',
tickLength: 0,
labels: {
style: {
color: '#9F9F9F'
}
},
index: 2,
min: startTime,
max: endTime
},
yAxis: [
{
// Primary yAxis
min: 0,
tickAmount: 3,
gridLineColor: '#474747',
gridLineWidth: 1,
title: {
text: null
},
opposite: true,
height: '50%',
plotLines: [
{
color: '#E0E0E0',
width: 1,
value: 0,
zIndex: 2
}
]
},
{
// Secondary yAxis
//reversed: true,
max: 0,
tickAmount: 3,
gridLineColor: '#474747',
gridLineWidth: 1,
title: {
text: null
},
labels: {
format: '{value} Gs',
formatter: function(){
let positiveValue = Highcharts.numberFormat(Math.abs(this.value), 0);
return positiveValue;
}
},
top: '50%',
height: '50%',
plotLines: [
{
color: 'white',
width: 1,
value: 0,
dashStyle: 'shortdot',
zIndex: 2
}
]
}
],
annotations: [
{
shapes: chartAnnotations
}
],
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function(e){
try {
var return_object = {
x: this.x,
y: this.y,
id: e.point.impact,
max_rotational: e.point.impact_max_rotational,
max_linear: e.point.impact_max_linear,
category: e.point.category
};
window.postMessage(JSON.stringify(return_object));
return;
function examine_variable(object_to_examine){
function get_class(object){
return Object.prototype.toString.call(object);
}
var event_objects = {};
// So here we can get get e.point.index.
for (var k in object_to_examine) {
var sub_key_count = 0;
var type = get_class(object_to_examine[k]);
if (type == '[object String]') {
event_objects[k] = object_to_examine[k];
} else if (type == '[object Object]') {
event_objects[k] = {};
// Go a second level deep:
for (var k2 in object_to_examine[k]) {
sub_key_count++;
event_objects[k][k2] = '' + object_to_examine[k][k2];
}
} else event_objects[k] = '' + object_to_examine[k];
}
window.postMessage(JSON.stringify(event_objects));
}
window.postMessage("Examining the event 'e' variable");
examine_variable(e);
if (e.point) {
window.postMessage("Examining the event 'e.point' variable");
examine_variable(e.point);
}
window.postMessage("Examining whtever 'this' is");
examine_variable(this);
} catch (exception) {
window.postMessage('Exception in the highcharts click: ' + exception);
}
}
}
}
}
},
series: [
{
data: maxLinearDataset,
name: '<span style="position: relative; top:2px">Gs</span>',
type: 'spline',
color: maxLinearColor,
yAxis: 1,
lineWidth: 0,
marker: {
symbol: 'circle',
enabled: true,
states: {
hover: {
enabled: true
}
},
radius: 5
},
states: {
hover: {
lineWidthPlus: 0
}
},
tooltip: {
valueSuffix: ' Gs',
valueDecimals: 0
}
},
{
name: '<span>rad/s<sup>2</sup></span>',
type: 'spline',
data: maxRotationalDataset,
color: maxRotationalColor,
lineWidth: 0,
marker: {
symbol: 'circle',
enabled: true,
states: {
hover: {
enabled: true
}
},
radius: 5
},
states: {
hover: {
lineWidthPlus: 0
}
},
tooltip: {
valueSuffix: ' <span>rad/s<sup>2</sup></span>',
valueDecimals: 0
}
}
]
}
};
The chart looks like this, which is the desired behaviour
After the values are updated I would like to redraw the chart with new data but when I
this.setState ({
chartOptions: {
credits: {
enabled: false
},
time: {
timezone: ''
},
chart: {
backgroundColor: '#272727',
zoomType: 'x',
panning: true
},
title: {
text: null,
style: {
color: '#E0E0E0',
fontSize: '20px'
},
align: 'left'
},
legend: {
useHTML: true,
borderWidth: 0,
itemMarginBottom: 5,
itemStyle: {
color: '#E0E0E0',
fontWeight: 'normal',
fontSize: '11px'
}
},
tooltip: {
// enabled: false,
useHTML: true,
followPointer: false,
formatter: function(){
return this.points.reduce(function(s, point){
let positiveValue = Highcharts.numberFormat(Math.abs(point.y), 0);
return '<div style="display: none;"><p style="display: none;font-size: 14px; margin: 2px 3px 2px 3px; color:#414549;">' + positiveValue + ' ' + point.series.name + '</p>';
}, '<p style="display: none;font-size: 11px; margin: 0px 3px 4px 3px; color: #7C7D80;"> Sustained at: ' + Highcharts.dateFormat('%H:%M:%S.%L', this.x) + '</p></div>');
},
shared: true,
borderWidth: 0,
borderRadius: 5,
padding: 10,
style: {
opacity: 0,
backgroundColor: '#272727'
}
},
xAxis: {
type: 'datetime',
lineColor: '#9F9F9F',
tickColor: '#9F9F9F',
tickLength: 0,
labels: {
style: {
color: '#9F9F9F'
}
},
index: 2,
min: startTime,
max: endTime
},
yAxis: [
{
// Primary yAxis
min: 0,
tickAmount: 3,
gridLineColor: '#474747',
gridLineWidth: 1,
title: {
text: null
},
opposite: true,
height: '50%',
plotLines: [
{
color: '#E0E0E0',
width: 1,
value: 0,
zIndex: 2
}
]
},
{
// Secondary yAxis
//reversed: true,
max: 0,
tickAmount: 3,
gridLineColor: '#474747',
gridLineWidth: 1,
title: {
text: null
},
labels: {
format: '{value} Gs',
formatter: function(){
let positiveValue = Highcharts.numberFormat(Math.abs(this.value), 0);
return positiveValue;
}
},
top: '50%',
height: '50%',
plotLines: [
{
color: 'white',
width: 1,
value: 0,
dashStyle: 'shortdot',
zIndex: 2
}
]
}
],
annotations: [
{
shapes: chartAnnotations
}
],
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function(e){
try {
var return_object = {
x: this.x,
y: this.y,
id: e.point.impact,
max_rotational: e.point.impact_max_rotational,
max_linear: e.point.impact_max_linear,
category: e.point.category
};
window.postMessage(JSON.stringify(return_object));
return;
function examine_variable(object_to_examine){
// Examine the event object or some other local object to see
// what we can pass
function get_class(object){
return Object.prototype.toString.call(object);
}
var event_objects = {};
// So here we can get get e.point.index.
for (var k in object_to_examine) {
var sub_key_count = 0;
var type = get_class(object_to_examine[k]);
if (type == '[object String]') {
event_objects[k] = object_to_examine[k];
} else if (type == '[object Object]') {
event_objects[k] = {};
// Go a second level deep:
for (var k2 in object_to_examine[k]) {
sub_key_count++;
event_objects[k][k2] = '' + object_to_examine[k][k2];
}
} else event_objects[k] = '' + object_to_examine[k];
}
window.postMessage(JSON.stringify(event_objects));
}
window.postMessage("Examining the event 'e' variable");
examine_variable(e);
if (e.point) {
window.postMessage("Examining the event 'e.point' variable");
examine_variable(e.point);
}
window.postMessage("Examining whtever 'this' is");
examine_variable(this);
} catch (exception) {
window.postMessage('Exception in the highcharts click: ' + exception);
}
}
}
}
}
},
series: [
{
data: maxLinearDataset,
name: '<span style="position: relative; top:2px">Gs</span>',
type: 'spline',
color: maxLinearColor,
yAxis: 1,
lineWidth: 0,
marker: {
symbol: 'circle',
enabled: true,
states: {
hover: {
enabled: true
}
},
radius: 5
},
states: {
hover: {
lineWidthPlus: 0
}
},
tooltip: {
valueSuffix: ' Gs',
valueDecimals: 0
}
},
{
name: '<span>rad/s<sup>2</sup></span>',
type: 'spline',
data: maxRotationalDataset,
color: maxRotationalColor,
lineWidth: 0,
marker: {
symbol: 'circle',
enabled: true,
states: {
hover: {
enabled: true
}
},
radius: 5
},
states: {
hover: {
lineWidthPlus: 0
}
},
tooltip: {
valueSuffix: ' <span>rad/s<sup>2</sup></span>',
valueDecimals: 0
}
}
]
}
});
Is there a way I can redraw the chart not update?
error: bundling failed: Error: Unable to resolve module `@highcharts/HighchartsReactNative` from `...`: Module `@highcharts/HighchartsReactNative` does not exist in the Haste module map
"@highcharts/highcharts-react-native": "^1.0.0",
"react": "16.8.3",
"react-native": "0.59.10",
node -v: v11.0.0
npm -v : 6.11.3
This is using an ejected RN app building via command line. I have tried clearing all cache etc re installed node_modules etc.
I would like to be able to pass styles or at least background prop directly to WebView to add backgroundColor: 'transparent'. Without that webview is white, which overriding my color set up for view.
Setting bg color directly to chart.options changing only the color of the chart area, not the whole webview container.
The wrapper is for React Native
and not React
.
Official minimal Highcharts wrapper for React.
at
https://github.com/highcharts/highcharts-react-native/blame/master/README.md#L2
Is there a chart similar to airbnb's react-rheostat?
When attempting to install highcharts-react-native
I get the following error in terminal:
npm WARN deprecated [email protected]: this package has been deprecated
npm ERR! path /Users/dev/Documents/Projects/my-project/client/node_modules/react-native-push-notification
npm ERR! code EISGIT
npm ERR! git /Users/dev/Documents/Projects/my-project/client/node_modules/react-native-push-notification: Appears to be a git repo or submodule.
npm ERR! git /Users/dev/Documents/Projects/my-project/client/node_modules/react-native-push-notification
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/dev/.npm/_logs/2019-05-10T14_20_05_980Z-debug.log
After uninstalling react-native-push-notification
I was able to install highcharts-react-native
, however after installing react-native-push-notification
again I continually receive the following error in the react-native-packager:
Error: jest-haste-map: Haste module naming collision:
Duplicate module name: react-animated
Paths: /Users/dev/Documents/Projects/my-project/client/node_modules/@highcharts/highcharts-react-native/node_modules/react-native/Libraries/Animated/release/package.json collides with /Users/dev/Documents/Projects/my-project/client/node_modules/react-native/Libraries/Animated/release/package.json
This error is caused by `hasteImpl` returning the same name for different files.
at setModule (/Users/dev/Documents/Projects/my-project/client/node_modules/jest-haste-map/build/index.js:569:17)
at workerReply (/Users/dev/Documents/Projects/my-project/client/node_modules/jest-haste-map/build/index.js:641:9)
at processTicksAndRejections (internal/process/next_tick.js:81:5)
::1 - - [10/May/2019:14:24:05 +0000] "POST /symbolicate HTTP/1.1" 500 - "-" "my-project/1 CFNetwork/978.0.7 Darwin/18.5.0"
Hello, i got this issues using android simulator:
On ios device and simulator works fine.
Encountered an error loading page, Object {
"canGoBack": false,
"canGoForward": false,
"code": -1,
"description": "net::ERR_FILE_NOT_FOUND",
"loading": false,
"target": 1757,
"title": "",
"url": "file:///android_asset/highcharts-layout/index.html",
}
Can you help me???
I use the following code and it doesn't work for me.
setInterval(function() {
y = 0
fetch("**url**", {
method: "GET",
headers: {
'Content-Type': 'application/json; charset=utf-8',
"Connection": "close",
}
})
.then(respone => respone.json())
.then(res => {
y = parseFloat(res[0].Value)
})
.catch(error => {
y = 0
});
series.addPoint(y, true, true);
}, 2000);
The fetch process seems to be ignored and only gives y = 0.
After the introduction of highcharts component according to the official package introduction of highcharts react native, I did not display the expected chart report in my project, which is a big help man!
Error loading page Domain :undefined Error Code:-1 Description:net::ERR_FILE_NOT_FOUND
After the introduction of highcharts component according to the official package introduction of highcharts react native, I did not display the expected chart report in my project, Seek help mogul!
Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-layout/css/styles.css' cannot be loaded as its extension is not registered in assetExts
why this error occurred?
Are drilldown and synchronised charts supported?
https://www.highcharts.com/demo/synchronized-charts
https://www.highcharts.com/demo/column-drilldown
The background color of the webview 'body' element is always white.
#36 is related, but the suggested fix does not work.Providing a background color via the webviewStylesProp does not solve this issue because it is the background color for the html rendered in the webview that is the problem.
Ideally, there would be a way to provide a body background color for the HTML rendered in the webview.
I am using this component in my project Android and iOS.
I already followed the all steps that I read in Read.me, i´m using React-Native 0.61 without Expo.
In Android the component works very well, but in iOS the chart is every a blank space, I tried to use CDN and it worked fine, so I think the problem is when the component try to read the files on /ios
Can someone help me, plese?
Building Projects with Native Code,react-native 0.61.1 can not use the highcharts-react-native.
If i have a chart and I tap on one of series item. How do I trigger a react native event where I send through the y value?
Thanks
Hi!
I have an issue with this library. When i need to show the chart it renders without any problem but sometimes it renders way beyond of the WebView container.
React Native version (no Expo): 0.61.4
Highcharts version: ^2.1.1
And the code is the following:
GraficoMedicion.js:
export default class GraficoMedicion extends React.Component {
constructor(props) {
super(props);
this.state = configuracionRelojVoltaje();
}
render() {
return (
<View>
<HighchartsReactNative
styles={styles.grafico}
options={this.state.chartOptions}
loader={true}
/>
</View>
);
}
}
// This was just some quick coding, im going to change this in the future (hardcoded data)
function configuracionRelojVoltaje() {
return (
{
chartOptions: {
chart: {
type: 'spline'
},
title: {
text: 'Site 1'
},
subtitle: {
text: 'Consumo energetico del site'
},
xAxis: {
categories: [
'Enero',
'Febrero',
'Marzo',
'Abril',
'Mayo',
'Junio',
'Julio',
'Agosto',
'Septiembre',
'Octubre',
'Noviembre',
'Diciembre'
],
},
yAxis: {
min: 0,
title: {
text: 'KWH',
align: 'high',
offset: 0,
rotation: 0,
y: -10
}
},
credits: null,
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Site 1',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
tooltip: {
enabled: true
},
}
}
)
}
const styles = StyleSheet.create({
grafico: {
height: 350,
width: '100%',
},
});
which is exported to:
PantallaKW.js:
export default class PantallaKW extends PureComponent {
componentDidMount() {
this._loadData()
}
_loadData = async () => {
// Some data fetched from the server
}
render() {
return (
this.state.isLoading ? (
// Here goes the loader component
): this.state.loadingError ? (
// Here goes the error component
): (
...
<Card elevation = { 5} >
<Card.Title
title='Grafico de uso'
subtitle='Se mostraran los ultimos 12 meses'
left={(props) => <Avatar.Icon {...props} icon="chart-bar" />}
/>
<Card.Content>
<GraficoMedicion /> <-- Chart goes here 👍
</Card.Content>
</Card>
...
)
}
}
I dont know if im doing something wrong or if it is a bug, but when i change the code inside GraficoMedicion.js and hot reload the app the chart renders correctly.
If you need more information i will be happy to give it! and sorry for my english, im not very good at yet.
Cheers!
I am trying to use the timezone feature https://api.highcharts.com/highcharts/time.timezone
What is the best way to import moment and moment-timezones?
Currently I am importing the scripts from a CDN in the index.html file (see below). It works, however, every time I navigate away and return the timezone reverts to the UTC. Am I approaching this in the wrong way?
Thanks
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div id="container" style="width: 100%; display:flex;flex-direction: column;"></div>
<script type="text/javascript" src="js/moment-timezone-with-data-2012-2022.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.min.js"></script>
</body>
</html>
Hi, it's working on expo start
at local development, but when I build a native iOS or Android bundle as expo build:ios
or expo publish
, it does not working
I have a bare expo react native app in which i m rendering an area chart with event object as shown below:
events: {
load: function () {
console.log(" =- =- =--= event fired =- -= =- =- =-");
},
},
However the log is not printing .
Do we need to load any module for events to work ?
Hi,
Is the work in progress to support this wrapper for react-native > 0.5.9 as Webview
is not going to be a part of core react-native. I've encountered few issues with the current wrapper if upgraded to use Webview
as a seperate package including window.postMessage("Some kind of message");
not working as expected.
Any suggestions?
Is this a bug? the chart doesn't seem to render.
Data I am trying to render -
[{
name: 'John',
data: [-170629.76639999845, -120629.76639999845, -124629.76639999845, -111629.76639999845, -156629.76639999845]
}, {
name: 'Jane',
data: [-170629.76639999845, -170629.76639999845, -170629.76639999845, -170629.76639999845, -170629.76639999845]
}, {
name: 'Joe',
data:[-100629.76639999845, -1700629.76639999845, -10629.76639999845, -190629.76639999845, -100629.76639999845]
}];
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.