Mixing
How to use HighChart.getOption() with react-native-highchart
up vote
0
down vote
favorite
I am using highchart on react-native with this library. I have created simple activity gauge component from high chart official site. Here is the code of component.
import ChartView from 'react-native-highcharts';
import React, { Component } from 'react';
export default class Speedometer extends Component {
render() {
var Highcharts='Highcharts';
var conf={
chart: {
type: 'solidgauge',
height: '110%',
},
....
series: [{
name: 'Move',
data: [{
color: Highcharts.getOptions().colors[0],
radius: '112%',
innerRadius: '88%',
y: 80
}]
}, {
name: 'Exercise',
data: [{
color: Highcharts.getOptions().colors[1],
radius: '87%',
innerRadius: '63%',
y: 65
}]
}, {
name: 'Stand',
data: [{
color: Highcharts.getOptions().colors[2],
radius: '62%',
innerRadius: '38%',
y: 50
}]
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
return (
<ChartView style={{height:300}} more guage config={conf} options={options}></ChartView>
);
}
}
When i render this component on my screen i get the error
TypeError: TypeError: TypeError: TypeError: undefined is not a function (evaluating 'Highcharts.getOptions()')
How can i use getOptions or colors or theme or other variable with highchart inside react-native component.
javascript reactjs react-native highcharts
asked yesterday
Ahsan Sohail
390110
|
show 2 more comments
up vote
0
down vote
favorite
I am using highchart on react-native with this library. I have created simple activity gauge component from high chart official site. Here is the code of component.
import ChartView from 'react-native-highcharts';
import React, { Component } from 'react';
export default class Speedometer extends Component {
render() {
var Highcharts='Highcharts';
var conf={
chart: {
type: 'solidgauge',
height: '110%',
},
....
series: [{
name: 'Move',
data: [{
color: Highcharts.getOptions().colors[0],
radius: '112%',
innerRadius: '88%',
y: 80
}]
}, {
name: 'Exercise',
data: [{
color: Highcharts.getOptions().colors[1],
radius: '87%',
innerRadius: '63%',
y: 65
}]
}, {
name: 'Stand',
data: [{
color: Highcharts.getOptions().colors[2],
radius: '62%',
innerRadius: '38%',
y: 50
}]
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
return (
<ChartView style={{height:300}} more guage config={conf} options={options}></ChartView>
);
}
}
When i render this component on my screen i get the error
TypeError: TypeError: TypeError: TypeError: undefined is not a function (evaluating 'Highcharts.getOptions()')
How can i use getOptions or colors or theme or other variable with highchart inside react-native component.
javascript reactjs react-native highcharts
asked yesterday
Ahsan Sohail
390110
you still need toimport Highcharts from 'highcharts'- the other is a wrapper.
– Dimitar Christoff
yesterday
after the import i am getting this errorTypeError: undefined is not a function (evaluating '_highcharts.default.getOptions()')
– Ahsan Sohail
yesterday
REMEMBER to declare the variable Highcharts='Highcharts'- this has overwritten it. dunno what it's supposed to do when it assigns it to a string...
– Dimitar Christoff
yesterday
you mean i need to add theimport Highcharts from 'highcharts'andHighcharts='Highcharts'both ?
– Ahsan Sohail
yesterday
no, not tried the react native one but in react web port, you need to only do the import, not thevar Highcharts = 'Highcharts'.
– Dimitar Christoff
yesterday
|
show 2 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am using highchart on react-native with this library. I have created simple activity gauge component from high chart official site. Here is the code of component.
import ChartView from 'react-native-highcharts';
import React, { Component } from 'react';
export default class Speedometer extends Component {
render() {
var Highcharts='Highcharts';
var conf={
chart: {
type: 'solidgauge',
height: '110%',
},
....
series: [{
name: 'Move',
data: [{
color: Highcharts.getOptions().colors[0],
radius: '112%',
innerRadius: '88%',
y: 80
}]
}, {
name: 'Exercise',
data: [{
color: Highcharts.getOptions().colors[1],
radius: '87%',
innerRadius: '63%',
y: 65
}]
}, {
name: 'Stand',
data: [{
color: Highcharts.getOptions().colors[2],
radius: '62%',
innerRadius: '38%',
y: 50
}]
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
return (
<ChartView style={{height:300}} more guage config={conf} options={options}></ChartView>
);
}
}
When i render this component on my screen i get the error
TypeError: TypeError: TypeError: TypeError: undefined is not a function (evaluating 'Highcharts.getOptions()')
How can i use getOptions or colors or theme or other variable with highchart inside react-native component.
javascript reactjs react-native highcharts
asked yesterday
Ahsan Sohail
390110
I am using highchart on react-native with this library. I have created simple activity gauge component from high chart official site. Here is the code of component.
import ChartView from 'react-native-highcharts';
import React, { Component } from 'react';
export default class Speedometer extends Component {
render() {
var Highcharts='Highcharts';
var conf={
chart: {
type: 'solidgauge',
height: '110%',
},
....
series: [{
name: 'Move',
data: [{
color: Highcharts.getOptions().colors[0],
radius: '112%',
innerRadius: '88%',
y: 80
}]
}, {
name: 'Exercise',
data: [{
color: Highcharts.getOptions().colors[1],
radius: '87%',
innerRadius: '63%',
y: 65
}]
}, {
name: 'Stand',
data: [{
color: Highcharts.getOptions().colors[2],
radius: '62%',
innerRadius: '38%',
y: 50
}]
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
return (
<ChartView style={{height:300}} more guage config={conf} options={options}></ChartView>
);
}
}
When i render this component on my screen i get the error
TypeError: TypeError: TypeError: TypeError: undefined is not a function (evaluating 'Highcharts.getOptions()')
How can i use getOptions or colors or theme or other variable with highchart inside react-native component.
javascript reactjs react-native highcharts
javascript reactjs react-native highcharts
asked yesterday
Ahsan Sohail
390110
asked yesterday
Ahsan Sohail
390110
asked yesterday
Ahsan Sohail
390110
asked yesterday
Ahsan Sohail
390110
asked yesterday
Ahsan Sohail
390110
390110
you still need toimport Highcharts from 'highcharts'- the other is a wrapper.
– Dimitar Christoff
yesterday
after the import i am getting this errorTypeError: undefined is not a function (evaluating '_highcharts.default.getOptions()')
– Ahsan Sohail
yesterday
REMEMBER to declare the variable Highcharts='Highcharts'- this has overwritten it. dunno what it's supposed to do when it assigns it to a string...
– Dimitar Christoff
yesterday
you mean i need to add theimport Highcharts from 'highcharts'andHighcharts='Highcharts'both ?
– Ahsan Sohail
yesterday
no, not tried the react native one but in react web port, you need to only do the import, not thevar Highcharts = 'Highcharts'.
– Dimitar Christoff
yesterday
|
show 2 more comments
you still need toimport Highcharts from 'highcharts'- the other is a wrapper.
– Dimitar Christoff
yesterday
after the import i am getting this errorTypeError: undefined is not a function (evaluating '_highcharts.default.getOptions()')
– Ahsan Sohail
yesterday
REMEMBER to declare the variable Highcharts='Highcharts'- this has overwritten it. dunno what it's supposed to do when it assigns it to a string...
– Dimitar Christoff
yesterday
you mean i need to add theimport Highcharts from 'highcharts'andHighcharts='Highcharts'both ?
– Ahsan Sohail
yesterday
no, not tried the react native one but in react web port, you need to only do the import, not thevar Highcharts = 'Highcharts'.
– Dimitar Christoff
yesterday
you still need to
import Highcharts from 'highcharts' - the other is a wrapper.– Dimitar Christoff
yesterday
you still need to
import Highcharts from 'highcharts' - the other is a wrapper.– Dimitar Christoff
yesterday
after the import i am getting this error
TypeError: undefined is not a function (evaluating '_highcharts.default.getOptions()')– Ahsan Sohail
yesterday
after the import i am getting this error
TypeError: undefined is not a function (evaluating '_highcharts.default.getOptions()')– Ahsan Sohail
yesterday
REMEMBER to declare the variable Highcharts='Highcharts' - this has overwritten it. dunno what it's supposed to do when it assigns it to a string...– Dimitar Christoff
yesterday
REMEMBER to declare the variable Highcharts='Highcharts' - this has overwritten it. dunno what it's supposed to do when it assigns it to a string...– Dimitar Christoff
yesterday
you mean i need to add the
import Highcharts from 'highcharts' and Highcharts='Highcharts' both ?– Ahsan Sohail
yesterday
you mean i need to add the
import Highcharts from 'highcharts' and Highcharts='Highcharts' both ?– Ahsan Sohail
yesterday
no, not tried the react native one but in react web port, you need to only do the import, not the
var Highcharts = 'Highcharts'.– Dimitar Christoff
yesterday
no, not tried the react native one but in react web port, you need to only do the import, not the
var Highcharts = 'Highcharts'.– Dimitar Christoff
yesterday
|
show 2 more comments
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
You need to understand a few things here:
react-native-highchartslibrary create a dynamic html content and then inject into webview. Whatever is passed in theconfigprops ofChartViewis converted in to string content afterflattenObjectfunction inside the library.- If you look at the starting code of html content inside the library you would see that some javascript dependencies has been included and one of them is
highcharts. This highcharts library will make the variableHighchartsin the local scope of javascript inside webview. - You are getting this error because React thinks that
Highchartmust be define somewhere in the component and defineHighchartas a string, so if you access string.function it will throw error. - (Solution) you have two option here either to tweak the code inside the library and make it to accept flat string as props and pass this string directly to the
ChartView, or you can create dummyHighchartobject inside your root component to make theReactstop complaining about theHighchartobject. Once this object is passed throughCharViewhighchart would be available in javascript scope inside webview and BOOM you Charts are loading.
Now you know the problem you can come up with more solutions. Hope this helps!
answered 2 hours ago
Hamza Ahmed
262
New contributor
Hamza Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Thank you for the explanation!
– Ahsan Sohail
47 mins ago
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
You need to understand a few things here:
react-native-highchartslibrary create a dynamic html content and then inject into webview. Whatever is passed in theconfigprops ofChartViewis converted in to string content afterflattenObjectfunction inside the library.- If you look at the starting code of html content inside the library you would see that some javascript dependencies has been included and one of them is
highcharts. This highcharts library will make the variableHighchartsin the local scope of javascript inside webview. - You are getting this error because React thinks that
Highchartmust be define somewhere in the component and defineHighchartas a string, so if you access string.function it will throw error. - (Solution) you have two option here either to tweak the code inside the library and make it to accept flat string as props and pass this string directly to the
ChartView, or you can create dummyHighchartobject inside your root component to make theReactstop complaining about theHighchartobject. Once this object is passed throughCharViewhighchart would be available in javascript scope inside webview and BOOM you Charts are loading.
Now you know the problem you can come up with more solutions. Hope this helps!
answered 2 hours ago
Hamza Ahmed
262
New contributor
Hamza Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Thank you for the explanation!
– Ahsan Sohail
47 mins ago
add a comment |
up vote
1
down vote
accepted
You need to understand a few things here:
react-native-highchartslibrary create a dynamic html content and then inject into webview. Whatever is passed in theconfigprops ofChartViewis converted in to string content afterflattenObjectfunction inside the library.- If you look at the starting code of html content inside the library you would see that some javascript dependencies has been included and one of them is
highcharts. This highcharts library will make the variableHighchartsin the local scope of javascript inside webview. - You are getting this error because React thinks that
Highchartmust be define somewhere in the component and defineHighchartas a string, so if you access string.function it will throw error. - (Solution) you have two option here either to tweak the code inside the library and make it to accept flat string as props and pass this string directly to the
ChartView, or you can create dummyHighchartobject inside your root component to make theReactstop complaining about theHighchartobject. Once this object is passed throughCharViewhighchart would be available in javascript scope inside webview and BOOM you Charts are loading.
Now you know the problem you can come up with more solutions. Hope this helps!
answered 2 hours ago
Hamza Ahmed
262
New contributor
Hamza Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Thank you for the explanation!
– Ahsan Sohail
47 mins ago
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
You need to understand a few things here:
react-native-highchartslibrary create a dynamic html content and then inject into webview. Whatever is passed in theconfigprops ofChartViewis converted in to string content afterflattenObjectfunction inside the library.- If you look at the starting code of html content inside the library you would see that some javascript dependencies has been included and one of them is
highcharts. This highcharts library will make the variableHighchartsin the local scope of javascript inside webview. - You are getting this error because React thinks that
Highchartmust be define somewhere in the component and defineHighchartas a string, so if you access string.function it will throw error. - (Solution) you have two option here either to tweak the code inside the library and make it to accept flat string as props and pass this string directly to the
ChartView, or you can create dummyHighchartobject inside your root component to make theReactstop complaining about theHighchartobject. Once this object is passed throughCharViewhighchart would be available in javascript scope inside webview and BOOM you Charts are loading.
Now you know the problem you can come up with more solutions. Hope this helps!
answered 2 hours ago
Hamza Ahmed
262
New contributor
Hamza Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
You need to understand a few things here:
react-native-highchartslibrary create a dynamic html content and then inject into webview. Whatever is passed in theconfigprops ofChartViewis converted in to string content afterflattenObjectfunction inside the library.- If you look at the starting code of html content inside the library you would see that some javascript dependencies has been included and one of them is
highcharts. This highcharts library will make the variableHighchartsin the local scope of javascript inside webview. - You are getting this error because React thinks that
Highchartmust be define somewhere in the component and defineHighchartas a string, so if you access string.function it will throw error. - (Solution) you have two option here either to tweak the code inside the library and make it to accept flat string as props and pass this string directly to the
ChartView, or you can create dummyHighchartobject inside your root component to make theReactstop complaining about theHighchartobject. Once this object is passed throughCharViewhighchart would be available in javascript scope inside webview and BOOM you Charts are loading.
Now you know the problem you can come up with more solutions. Hope this helps!
answered 2 hours ago
Hamza Ahmed
262
New contributor
Hamza Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 2 hours ago
Hamza Ahmed
262
New contributor
Hamza Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 2 hours ago
Hamza Ahmed
262
answered 2 hours ago
Hamza Ahmed
262
262
New contributor
Hamza Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Hamza Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Hamza Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Thank you for the explanation!
– Ahsan Sohail
47 mins ago
add a comment |
Thank you for the explanation!
– Ahsan Sohail
47 mins ago
Thank you for the explanation!
– Ahsan Sohail
47 mins ago
Thank you for the explanation!
– Ahsan Sohail
47 mins ago
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372627%2fhow-to-use-highchart-getoption-with-react-native-highchart%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you still need to
import Highcharts from 'highcharts'- the other is a wrapper.– Dimitar Christoff
yesterday
after the import i am getting this error
TypeError: undefined is not a function (evaluating '_highcharts.default.getOptions()')– Ahsan Sohail
yesterday
REMEMBER to declare the variable Highcharts='Highcharts'- this has overwritten it. dunno what it's supposed to do when it assigns it to a string...– Dimitar Christoff
yesterday
you mean i need to add the
import Highcharts from 'highcharts'andHighcharts='Highcharts'both ?– Ahsan Sohail
yesterday
no, not tried the react native one but in react web port, you need to only do the import, not the
var Highcharts = 'Highcharts'.– Dimitar Christoff
yesterday