TradingPal / React Native Highcharts
📈 Add Highcharts charts to react-native app for IOS and Android
Stars: ✭ 247
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Highcharts
scalajs-highcharts
Scala.js static typed facades for Highcharts library
Stars: ✭ 30 (-87.85%)
Mutual labels: charts, highcharts
Chartkick
Create beautiful JavaScript charts with one line of Ruby
Stars: ✭ 5,903 (+2289.88%)
Mutual labels: charts, highcharts
React Jsx Highcharts
Highcharts built with proper React components
Stars: ✭ 336 (+36.03%)
Mutual labels: charts, highcharts
Chartkick.py
Create beautiful Javascript charts with minimal code
Stars: ✭ 695 (+181.38%)
Mutual labels: charts, highcharts
Aachartcore
📈📊☕️☕️☕️An elegant modern declarative data visualization chart framework for Android. Extremely powerful, supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.极其精美而又强大的 Android 数据可视化图表框架,支持柱状图、条形图、折线图、曲线图、折线填充图、曲线填充图、气泡图、扇形图、环形图、散点图、雷达图、混合图等各种类型的多达几十种的信息图图表,完全满足工作所需.
Stars: ✭ 424 (+71.66%)
Mutual labels: charts, highcharts
Highcharts Ng
AngularJS directive for Highcharts
Stars: ✭ 1,741 (+604.86%)
Mutual labels: charts, highcharts
Helmfiles
Comprehensive Distribution of Helmfiles for Kubernetes
Stars: ✭ 205 (-17%)
Mutual labels: charts
Angular Material Dashboard
Angular Material Dasshboard using Angular Material, highcharts and flexbox
Stars: ✭ 227 (-8.1%)
Mutual labels: highcharts
Covid 19
📈 Coronavirus (COVID-19) dashboard to show the dynamics of Сoronavirus distribution per country
Stars: ✭ 245 (-0.81%)
Mutual labels: charts
Charts.css
Open source CSS framework for data visualization.
Stars: ✭ 4,595 (+1760.32%)
Mutual labels: charts
Bitcoin Chart Cli
Bitcoin chart for the terminal as command line util
Stars: ✭ 221 (-10.53%)
Mutual labels: charts
Kubernetic
Kubernetic - Supercharge your Kubernetes clusters
Stars: ✭ 243 (-1.62%)
Mutual labels: charts
Reaviz
📊 Data visualization library for React based on D3
Stars: ✭ 215 (-12.96%)
Mutual labels: charts
Expenso Ios
A Simple Expense Tracker App built to demonstrate the use of SwiftUI, CoreData, Charts, Biometrics (Face & Touch ID) and MVVM Architecture.
Stars: ✭ 191 (-22.67%)
Mutual labels: charts
React-Native Highcharts
This is a react-native component for IOS and Android that uses Highcharts where you send the configuration as a prop and the chart is rendered within a WebView
Getting Started
npm install react-native-highcharts --save
Demo
Basic example
REMEMBER to declare the variable Highcharts='Highcharts'
import ChartView from 'react-native-highcharts';
...
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;
}())
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
return (
<ChartView style={{height:300}} config={conf} options={options}></ChartView>
);
}
Props
Prop | Required | Description |
---|---|---|
config | true | Highcharts configuration See the docs.>> |
stock | false | Default false; use Highstock |
more | false | Default false; use Highstock-more |
heatMap | false | Default false; use HeatMap |
style | false | Style object to be passed onto the WebView |
options | false | Pass global and lang options from Highcharts |
guage | false | Import gauge library from highcharts |
props added to WebView
NOTE
if not rendering in real device add this two props to the component
javaScriptEnabled={true}
domStorageEnabled={true}
Stuff used to make this:
- Highcharts for making the chart
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].