README
React-native AmCharts : - WIP
AmCharts.
Unofficial React-Native wrapper package for usingFeatures
- Fully customizable wrapper for AmCharts4 using JSON-based Config.
- All scripts loaded in the package no CDN dependency for faster performance.
- Supported on Ios and Android.
Installing
Get package from NPM in your React-native app:
npm i react-native-amcharts
Basic Usage Example
import React from 'react';
import {Stylesheet} from 'react-native';
import {ReactNativeAmChart} from 'react-native-amcharts';
const config = {
// Create pie series
series: [
{
type: 'PieSeries',
dataFields: {
value: 'litres',
category: 'country',
},
},
],
// Add data
data: [
{
country: 'Lithuania',
litres: 501.9,
},
{
country: 'Czech Republic',
litres: 301.9,
},
{
country: 'Ireland',
litres: 201.1,
},
{
country: 'Germany',
litres: 165.8,
},
{
country: 'Australia',
litres: 139.9,
},
{
country: 'Austria',
litres: 128.3,
},
{
country: 'UK',
litres: 99,
},
{
country: 'Belgium',
litres: 60,
},
{
country: 'The Netherlands',
litres: 50,
},
],
// And, for a good measure, let's add a legend
legend: {},
};
const App = () => {
return (
<>
<ReactNativeAmChart
chartConfig={config}
chartType="PieChart"
style={styles.chartContainer}
initialScale={0.9}
maximumScale={0.9}/>
</>
);
};
const styles = Stylesheet.create({
chartContainer: {
height: '50%',
width: '100%',
}
})
export default App;
Props Defitnition
style Styling chart container
chartType Chart type definition from amcharts library
chartConfig JSON config for displaying the charts
initialScale Initial Viewport scale for frame
maximumScale Maximum Viewport scale for frame
Feature in progress
- Dynamic data addition