tradingpal / react-native-highcharts Goto Github PK
View Code? Open in Web Editor NEW๐ Add Highcharts charts to react-native app for IOS and Android
Home Page: https://github.com/TradingPal/react-native-highcharts
๐ Add Highcharts charts to react-native app for IOS and Android
Home Page: https://github.com/TradingPal/react-native-highcharts
Hi, I was using react-native-chart-view for some time on an app I've been developing for a few months now. A problem came up when I tried to do a release build, the charts would not show up and I saw in your closed issues list, that was a previous problem. So I updated to react-native-highcharts, latest version. I am also on React-Native build 0.42, but my app fails immediately with this error:
This happens immediately when the App runs. I do not believe it to be my config, although my config does contain a function (but it comes from an outside source, the function must remain in).
Any help?
I have a background with linear gradient on which I render a chart with white color. I was looking to make the background of chart transparent so that it syncs with the background.
I tried giving following:-
backgroundColor: "transparent"
backgroundColor: null"
backgroundColor: "rgba(255,255,255,0)"
But none of the above works and just gives me a white background.
Attaching image for reference.
Is the a bug or am I doing something wrong? On web similar configuration of high charts works as can be seen here
Update:
I was just trying to go through the code and I see following as the the style config
var styles = StyleSheet.create({
full: {
flex: 1,
// background color is missing
}
});
I tried installing using npm again but got the same old style config. Is the new version with these changes not updated on npm . Can someone please it check it once?
on the debug version,when i touch the point of line,it show tooltip, but on the release version,it can't show the tooltip when i touch the point of line, did i forgot something to add ?or what i should watch out,Do I need purchase any license for using it ?
Hi
I used following code to view the 3d chart in mobile but it's not working. Can anyone help me..
options3d: {
enabled: true,
alpha: 15,
beta: 10,
depth: 50,
viewDistance: 15
}
Thanks in advance,
I am trying to set global Option to Highcharts
Highcharts.setOptions({ global: { useUTC: false } });
I get the following error: Highcharts.setOptions is not a function
What am I doing wrong
Hi dude!,
Thanks for your last commit adding the viewport meta but there is a problem. The problem is that you only added this meta on App/index.js but your package.json define your react-native-highcharts.js as the main file and this file hasn't the meta tag.
Could you add the meta tag in the react-native-highcharts.js, please?
and can we disable the resize of the webview with user-scalable=0?
the meta would be:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
Thanks a lot!
Using the basic example provided in your README docs, I can't quite figure out how to add real life chart data; all I seem to get back is a blank screen. I've console logged the async request from axios and it's returning an object from highcharts, so I know that works. The only change in the render method is data: this.state.data
and stock={true}
Here's what I have so far:
import React, {Component} from 'react';
import {View, Text, Platform} from 'react-native';
import ChartView from 'react-native-highcharts';
import axios from 'axios';
export default class StockCharts extends Component {
constructor(props) {
super(props);
this.state = {data: null};
}
async componentDidMount() {
let data = await axios.get('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?')
this.setState({data: data})
}
render() {
var Highcharts='Highcharts';
var conf={
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live Random Data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: this.state.data
// (function () {
// // generate an array of random data
// var data = [],
// time = (new Date()).getTime(),
// i;
//
// for (i = -19; i <= 0; i += 1) {
// data.push({
// x: time + i * 1000,
// y: Math.random()
// });
// }
// return data;
// }())
}]
};
return (
<ChartView style={{height:300}} config={conf} stock={true} ></ChartView>
);
}
}
Does setting zoomtype for zooming in chart work for anybody or is it not supported in this library yet?
Hello.
Please check this: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/synchronized-charts/
I wanna make chart works like this.
The only problem is I cannot use jquery in React Native.
Is there anyway to use the synchronized chart?
When i see on simulator, i am able to see tooltip as expected on cursor click. But when with same build on device i touch , pint gets highlighted but does not show any tooltip.
render(){
let conf={
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load:function(){
var series = this.series[0];
setInterval(() =>{
var x = new Date().getTime() // current time
y = this.props.y
series.addPoint([x,y], true, true);
}, 900);
}
}
},
title: {
text: 'Live random data'
}
}
}
Cant access this.props.y in load function and I cant even access constructor variable.
Thanks for the help in advance.
I have my charted configured so I have crosshair
enabled on xAxis
and plotSeries
like they wrote in the docs - jsfiddle below:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-point-events-mouseover/
My problem is that if I try to point my finger over the chart it scrolls and highlights xAxis
labels instead of displaying the label properly. What might be causing the scroll and how to fix it? I have been trying for a few hours with no results
Getting undefined for the Highcharts.Color
colors:
{
radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
stops: [
[0, globals.legendColor],
[1, Highcharts.Color(globals.legendColor).brighten(-0.3).get('rgb')]
]
}
On any iOS device simulator, the chart text and axis are all very very tiny (no real device to test on). The chart with the exact same code and data looks fine on any Android I try. The first picture is on an iPhone 7 (simulator) and second screenshot is on a Galaxy S6.
Has anybody else run into this issue? Any ideas how to fix it? I could not find a scaling option.
const items = [
{id: 1,chartData:[
{x: new Date().getTime() + 0*86400000, y: 1},
{x: new Date().getTime() + 1*86400000, y: 1},
{x: new Date().getTime() + 2*86400000, y: 1},
{x: new Date().getTime() + 4*86400000, y: 2},
{x: new Date().getTime() + 5*86400000, y: 2},
{x: new Date().getTime() + 6*86400000, y: 2},
{x: new Date().getTime() + 7*86400000, y: 3},
{x: new Date().getTime() + 8*86400000, y: 1},
{x: new Date().getTime() + 9*86400000, y: 3}
]},
{id: 2,chartData:[
{x: new Date().getTime() + 0*86400000, y: 1},
{x: new Date().getTime() + 1*86400000, y: 1},
{x: new Date().getTime() + 2*86400000, y: 1},
{x: new Date().getTime() + 4*86400000, y: 2},
{x: new Date().getTime() + 5*86400000, y: 2},
{x: new Date().getTime() + 6*86400000, y: 2},
{x: new Date().getTime() + 7*86400000, y: 3},
{x: new Date().getTime() + 8*86400000, y: 1},
{x: new Date().getTime() + 9*86400000, y: 3}
]},
{id: 3,chartData:[
{x: new Date().getTime() + 0*86400000, y: 1},
{x: new Date().getTime() + 1*86400000, y: 1},
{x: new Date().getTime() + 2*86400000, y: 1},
{x: new Date().getTime() + 4*86400000, y: 2},
{x: new Date().getTime() + 5*86400000, y: 2},
{x: new Date().getTime() + 6*86400000, y: 2},
{x: new Date().getTime() + 7*86400000, y: 3},
{x: new Date().getTime() + 8*86400000, y: 1},
{x: new Date().getTime() + 9*86400000, y: 3}
]},
]
const ChartCard = ( {data} ) => {
var Highcharts = 'Highcharts'
const conf = {...} //Quoted from readme sample. but changed line color and point color
return <ChartView style={{height:80}} config={conf}></ChartView>
}
<View>
{
items.map(item => <ChartCard key={item.id} data={item.chartData} />)
}
</View>
Line chart is not correct size when using the chart component in a loop.
First chart size is too big. (or Is it only the first graph correct?)
Can I use this chart component correctly in a loop?
Please give me addvice.
I needed to access the index of the selected point. Can someone please help?
Hello All,
First of all, kudos to you all, great job on this module, it really makes life easy for the react-native community. Thanks a lot.
I was using the very old version of your code (0.1.1) but then I learned that a newer version supports the highchart-more and I switched to version 1.0.1. The issue I am facing is that when I have more than one series the charts and labels become so thin that they are not intelligible. I have attached two pictures one shows the charts with older version and one with the newer version. Is there a setting that I need to use ? Please see the pictures. Thanks. Farshid
I used โnpm install react-native-highcharts --saveโ and Getting Start;
But there is no chart show on my app,it just return blank,
No ERR report;๏ผI use WebStorm to compile the react-native project for android๏ผ
And when i move the mouse on the word "ChartView",the WebStorm tell me like this:
Default export is not declared in imported module
AND THERE IS MY CODE BELOW๏ผ
'use strict';
import React, {Component} from 'react'
import ChartView from 'react-native-highcharts';
export default class Hcharts extends Component {
render() {
var Highcharts = 'Highcharts';
var conf = {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
};
return (
<ChartView style={{height: 300}} config={conf} />
);
}
}
/**
export default class Dash extends Component {
constructor() {
super();
}
render() {
var Highcharts = 'Highcharts';
var conf = {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
};
return (
<ChartView style={{ height: 300 }} config={conf}></ChartView>
);
}
}
Hello All,
Based on a passed parameter I need to take different action in the load function in events. How do I do that? It seems I cannot access any passed parameter in the load function. Has anyone done this before?
Thanks,
Farshid
Here is my code , events is part of the config.chart that is being passed to ChartView.
I would greatly appreciate your help.
type:this.props.chartType,
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
shadow:true,
zoomType:"xy",
pinchType:"xy",
spacingTop: 10,
panning:true,
events: {
load: function() {
if(passParamterHereToChartView == false) {
for (var i = 0; i < this.series.length; i++) {
if (i == 0) {
var series = this.series[i];
if (series != null) {
series.show();
}
} else {
var series = this.series[i];
if (series != null) {
series.hide();
}
}
}
}
}
}
In the Android emulator 4.1, html can not be resolved only show html characters
Hi there, thanks for the library.
I noticed that the code of the lib can be simplified/cleaned up a lot, if you're interested here is a solution similar to the one I adopted in my current project (I used Flowtype in my project, so I stripped it from this example).
Let me know if you're interested in a PR.
// ./index.js
import React, { Component, PropTypes } from 'react';
import { StyleSheet, WebView, Dimensions } from 'react-native';
import { flattenObject } from './utils';
import html from './page.html';
const DEVICE_HEIGHT = Dimensions.get('window').height;
const DEVICE_WIDTH = Dimensions.get('window').width;
export default class ReactNativeHighcharts extends Component {
static propTypes = {
configuration: PropTypes.object.isRequired,
style: PropTypes.any,
};
state = {
visible: true,
height: DEVICE_HEIGHT,
width: DEVICE_WIDTH,
};
// Used to resize on orientation of display
_reRenderWebView = e => {
this.setState({
height: e.nativeEvent.layout.height,
width: e.nativeEvent.layout.width,
});
};
// Created the javascript that will be injected in the webview
_createInjectedJavascript = configuration => {
const stringConfiguration = JSON.stringify(configuration, (key, value) => {
return typeof value === 'function' ? value.toString() : value;
});
const parsedConfiguration = JSON.parse(stringConfiguration);
const injectedJavascript = `
var chart = Highcharts.chart('container', ${flattenObject(parsedConfiguration)});
chart.reflow();
setTimeout(function() {chart.reflow()}, 0);
setTimeout(function() {chart.reflow()}, 100);
`;
return injectedJavascript;
};
render() {
const { configuration, style, ...otherProps } = this.props;
return (
<WebView
onLayout={this._reRenderWebView}
style={[styles.webView, style]}
source={html}
javaScriptEnabled={true}
domStorageEnabled={true}
scalesPageToFit={false}
scrollEnabled={false}
automaticallyAdjustContentInsets={false}
injectedJavaScript={this._createInjectedJavascript(configuration)}
{...otherProps}
/>
);
}
}
const styles = StyleSheet.create({
webView: {
flex: 1,
backgroundColor: 'transparent',
},
});
// ./utils.js
export const flattenObject = (obj: Object, str: string = '{') => {
Object.keys(obj).forEach(function(key) {
str += `${key}: ${flattenText(obj[key])}, `;
});
return `${str.slice(0, str.length - 2)}}`;
};
const flattenText = (item: any) => {
var str = '';
if (typeof item === 'object' && item.length == undefined) {
str += flattenObject(item);
} else if (typeof item === 'object' && item.length !== undefined) {
str += '[';
item.forEach(function(k2) {
str += `${flattenText(k2)}, `;
});
str = str.slice(0, str.length - 2);
str += ']';
} else if (typeof item === 'string' && item.slice(0, 8) === 'function') {
str += `${item}`;
} else if (typeof item === 'string') {
str += `\"${item.replace(/"/g, '\\"')}\"`;
} else {
str += `${item}`;
}
return str;
};
export default {
flattenObject,
};
<!-- ./html -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style media="screen" type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#container {
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</body>
</html>
It would be great to be able to receive events in React-Native via a bridge such as is found with react-native-webview-bridge. For example if I have a column chart, I'd like to be able to define an event for onPress for the data series and have the event be detectable at the app level.
Is it possible to export the master version to npm registry?
I noticed that npm version is a way outdated.
Let me know if you need some help.
Feature: I'm not positive but I think the initial use of a chart requires a time-consuming http request for highcharts.js and jquery.js. I'm guessing load time would be reduced if the scripts can be loaded locally. Perhaps props could be used to pass in the local urls for Android and IOS
it is my first time to write the issues in github and also first time writing in english,,,
.then((responseData) => {
let data = JSON.parse(responseData.data).data,arrX = [],arrY = [], dataXY = [];
data.forEach(function(v, i) {
if (i > 0) {
arrX.push(v[3]);
arrY.push(v[5]);
dataXY.push([v[3],v[5]])
}
})
that.setState({
dataX: arrX,
dataY: arrY,
dataXY: dataXY,
})
})
'this.state.dataX' and 'this.state.dataY' the the right data,
chart: {
type: 'bar',
height: 3000,
},
xAxis: {
categories: this.state.dataX,
},
yAxis: {
title: {
text: 'ๆฐ้'
}
},
series: [
{
name: 'ๆ่ฝฆๆฐ้',
data: this.state.dataY, //[1,2,34,]
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
],
but when i use the chartView con , I like that, i try to use 'this.state.dataY' to show the series[0].data, it not work, but data like this '[1,2,3,4]' , it work well, 'this.state.dataX' in xAxis.categories works well too,
so, I donot know how to update the datas when i get the responseDate from fetch,
Hi,
I am evaluating react-native-highcharts. It works fine in emulator however its not working on real device. I tried with Samsung-Android.
Could you please suggest how to make it work on real device..
Best regards,
Puru
When I inspect code of react-native-chartView.js, I saw that we use online libraries
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
that make the rendering slower. I'm not sure that are they cache or not, but the render delay 1s.
Can we use local libraries instead of online?
Range series needs to load additional highcharts-more.js per: https://www.highcharts.com/docs/chart-and-series-types/range-series
i use it on android,but i cant find chart on my app,it just blank,
Error can be seen running the following javascript
var flattenObject = function (obj, str='{') {
Object.keys(obj).forEach(function(key) {
str += `${key}: ${flattenText(obj[key])}, `
})
return `${str.slice(0, str.length - 2)}}`
};
var flattenText = function(item) {
var str = ''
if (item && typeof item === 'object' && item.length == undefined) {
str += flattenObject(item)
} else if (item && typeof item === 'object' && item.length !== undefined) {
str += '['
item.forEach(function(k2) {
str += `${flattenText(k2)}, `
})
str = str.slice(0, str.length - 2)
str += ']'
} else if(typeof item === 'string' && item.slice(0, 8) === 'function') {
str += `${item}`
} else if(typeof item === 'string') {
str += `\"${item.replace(/"/g, '\\"')}\"`
} else {
str += `${item}`
}
return str
};
var testJson = {
happyJsonArray: ['one', 'deux', 'tres'],
incorrectlyHandledJsonArray: []
};
console.log(flattenText(testJson));
// VM207:34 {happyJsonArray: ["one", "deux", "tres"], incorrectlyHandledJsonArray: ]}
Is there a reason y'all use flattenText() & flattenObject() instead of just keeping config from JSON.stringify?
I'm trying to implement the HighCharts demo at:
https://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
In this example there are 2 series of data, styling is a bit different
I'm getting a blank screen
Hi - I really struggled to get this to install and work with Expo - so I created a very simple Webview oriented app that seems to work well.
https://github.com/BenjaminWatts/react-native-highchart-webview
Comments much appreciated!
Do I need purchase any license for using react-native-highcharts in my application which I develop for both iOS and Android devices?
I am finding a weird issue where the first time I install my app on the device and view a chart, the chart shows no datapoints. The legend, title, and axis are all visible but no datapoints are visible. If I close and restart my app, then it works fine. Uninstalling and reinstalling my app will cause the issue to return on the first run until I close and restart the app.
Any ideas what could be the issue?
Has anyone been able to get the webview to render on an android release apk? It only works in debug mode for me :(
Have you considered trying this in https://github.com/CRAlpha/react-native-wkwebview
It should provide a lot better performance
Hello all,
I wanted to know if I can control specific functions within the Highcharts object, such as series visibility and adding a series from buttons/components outside the Highcharts component.
An example of what I am trying would be an external legend with toggle functionality to hide and show certain series.
Thanks!
Thanks for your work on this. Very helpful!
In the code below I can't get the console.log events to fire.
` // Configure the HighCharts chart
barChart (title) {
// Populate data for bars, color as indicated
let data = new Array()
var i, c
for (i=0; i<24; i++) {
var r = Math.random()
var val = 8 + (r * 2)
if (val > 9.4) {
c = '#4283BE' // Good
} else if (val > 9.0) {
c = '#FDA555' // Ok
} else {
c = '#F80207' // Bad
}
data.push({y: val, color: c})
}
var categories = [
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12',
'13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '23'
]
// Required line if using Highcharts methods below
//let Highcharts='Highcharts';
let conf={
chart: {
type: 'column',
backgroundColor: '#000000'
},
title: {
text: title,
style: {
color: Colors.snow
}
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
credits: false,
xAxis: {
categories: categories,
labels: {
style: {
color: '#FFFFFF'
}
}
},
yAxis: {
min: 0,
max: 10,
visible: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
},
series: {
cursor: 'pointer',
point: {
events: {
click: (o) => {
console.log(o)
console.log("It's alive!")
}
}
}
}
},
series: [
{
name: title,
data: data,
showInLegend: false,
style: {
color: '#ffffff'
},
pointWidth: 12,
}
]
};
return (
<ChartView style={{flex:1}} config={conf}></ChartView>
);
}
`
Post version 0.1.1 I am seeing a strange issue with line width.
I have following configuration for my chart
const DEFAULT_CHARTS_CONFIG = {
"legend": {
"enabled": false
},
"series": [
{
"data": slicedData,
"enableMouseTracking": false,
"lineWidth": 4
}
"plotOptions": {
"series": {
"marker": {
"enabled": false
}
}
},
"xAxis": {
"visible": false
},
"yAxis": {
"visible": false
},
"title": {
"text": null
},
"credits": {
"enabled": false
},
"navigation": {
"buttonOptions": {
"enabled": false
}
}
};
In my application I have 4 tabs and I show graphs on my first tab which is my dashboard.
After signing in I land on dashboard. Here is a view of chart from dashboard:-
As you can see the lineWidth parameter is not getting applied as the chart looks really thin. Now, after sign in it takes few seconds to load dashboard, in between that time if i press another tab from tabview and then come back to dashboard, I see that line width is applied(surprising) and my graph looks something like this:-
This works fine in 0.1.1. in 0.1.1 the only issue I was facing was with backgroundColor: transparent
. So for now I just added that to css and create my own common module to make it work.
I will try looking into this issue and if i find something I would create a PR but in the meantime if someone else has any insights on this, it would really help :)
It's not obvious how to include and require the highcharts-more
package to be used with react-native-highcharts
. Is it possible to add some instructions on how to do so?
Previous version was 1.0.1 but new version this morning is 0.2.1. Mistake?
Hi,
I am new to programming world. So had a question. Is index.js created when we do npm install or is it required for us to write the entire code the way you have written it.
-- Thanks
I use Expo to deploy my app using this highchart. I can run it without any error when deployment, but after I build to apk file using Expo, the chart component is blank. I wonder if any <script> tag using url from https may be blocked when we run apk file
i cannot catch event. someone any suggest?
Does this package support the Heat Map type from HighCharts?
I've set up various other chart types throughout my app, but the Heat Map will always render nothing.
HI,
Much appreciation for what you've created since it will make my life easy on my project!
I'm probably missing something obvious in trying run a simple example but...
At display of my chart per your readme.md example I get this warning:
ExceptionsManager.js:73 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
Check your code at AVDaypart.js:115
My code to make the chart is below:
myChart () {
var Highcharts='Highcharts';
var conf={
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
};
return (
<ChartView style={{height:300}} conf={conf}></ChartView> <--- line 115
);
//return (<Text style={styles.whiteText}>junk</Text>);
}
render () {
return (
<View style={{flex: 1}}>
{this.myChart()}
</View>
)
}
}
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.