New StackedBarChart

App.js

@@ -1,14 +1,21 @@
 import 'babel-polyfill'
 import React from 'react'
-import {ScrollView, StatusBar, Dimensions, Text, View} from 'react-native'
+import {ScrollView, StatusBar, Dimensions, Text} from 'react-native'
 import ScrollableTabView from 'react-native-scrollable-tab-view'
 import FlashMessage, {showMessage} from 'react-native-flash-message'
 import LineChart from './src/line-chart'
 import PieChart from './src/pie-chart'
 import ProgressChart from './src/progress-chart'
 import BarChart from './src/bar-chart'
+import StackedBarChart from './src/stackedbar-chart'
 import ContributionGraph from './src/contribution-graph'
-import {data, contributionData, pieChartData, progressChartData} from './data'
+import {
+  data,
+  contributionData,
+  pieChartData,
+  progressChartData,
+  stackedBarGraphData
+} from './data'
 
 // in Expo - swipe left to see the following styling, or create your own
 const chartConfigs = [
@@ -117,7 +124,7 @@ export default class App extends React.Component {
                 data={data}
                 width={width}
                 height={height}
-                yAxisLabel={'$'}
+                yAxisLabel="$"
                 chartConfig={chartConfig}
                 style={graphStyle}
                 onDataPointClick={({value, getColor}) =>
@@ -142,10 +149,18 @@ export default class App extends React.Component {
                 width={width}
                 height={height}
                 data={data}
-                yAxisLabel={'$'}
+                yAxisLabel="$"
                 chartConfig={chartConfig}
                 style={graphStyle}
               />
+              <Text style={labelStyle}>Stacked Bar Graph</Text>
+              <StackedBarChart
+                style={graphStyle}
+                data={stackedBarGraphData}
+                width={width}
+                height={220}
+                chartConfig={chartConfig}
+              />
               <Text style={labelStyle}>Pie Chart</Text>
               <PieChart
                 data={pieChartData}
@@ -162,7 +177,7 @@ export default class App extends React.Component {
                 data={data}
                 width={width}
                 height={height}
-                yAxisLabel={'$'}
+                yAxisLabel="$"
                 chartConfig={chartConfig}
                 style={graphStyle}
               />

README.md

@@ -16,7 +16,8 @@ import {
   BarChart,
   PieChart,
   ProgressChart,
-  ContributionGraph
+  ContributionGraph,
+  StackedBarChart
 } from 'react-native-chart-kit'
 
 ```
@@ -199,6 +200,38 @@ const data = {
 | yAxisLabel | string | Prepend text to horizontal labels -- default: '' |
 | chartConfig | Object | Configuration object for the chart, see example config in the beginning of this file |
 
+## StackedBar chart
+
+![StackedBar_Chart](https://imgur.com/JkBtxt8.jpg)
+
+```js
+const data ={
+  labels: ['Test1', 'Test2'],
+  legend: ['L1', 'L2', 'L3'],
+  data: [
+    [60, 60, 60],
+    [30,30,60], 
+  ],
+  barColors: ['#dfe4ea', '#ced6e0', '#a4b0be'],
+ }
+```
+```html
+<StackedBarChart
+  style={graphStyle}
+  data={data}
+  width={screenWidth}
+  height={220}
+  chartConfig={chartConfig}
+/>
+```
+
+| Property        | Type           | Description  |
+| ------------- |-------------| -----|
+| data | Object | Data for the chart - see example above |
+| width | Number | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive |
+| height | Number | Height of the chart |
+| chartConfig | Object | Configuration object for the chart, see example config in the beginning of this file |
+
 ## Pie chart
 
 ![Pie Chart](https://i.imgur.com/JMz3obk.jpg)

data.js

@@ -2,65 +2,91 @@
 
 const data = {
   labels: ['January', 'February', 'March', 'April', 'May', 'June'],
-  datasets: [{
-    data: [
-      50,
-      20,
-      2,
-      86,
-      71,
-      100
-    ],
-    color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})` // optional
-  }, {
-    data: [
-      20,
-      10,
-      4,
-      56,
-      87,
-      90
-    ]
-  }, {
-    data: [
-      30,
-      90,
-      67,
-      54,
-      10,
-      2
-    ]
-  }]
+  datasets: [
+    {
+      data: [50, 20, 2, 86, 71, 100],
+      color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})` // optional
+    },
+    {
+      data: [20, 10, 4, 56, 87, 90]
+    },
+    {
+      data: [30, 90, 67, 54, 10, 2]
+    }
+  ]
 }
 
 // Mock data object used for Contribution Graph
 
 const contributionData = [
-  { date: '2016-01-02', count: 1 },
-  { date: '2016-01-03', count: 2 },
-  { date: '2016-01-04', count: 3 },
-  { date: '2016-01-05', count: 4 },
-  { date: '2016-01-06', count: 5 },
-  { date: '2016-01-30', count: 2 },
-  { date: '2016-01-31', count: 3 },
-  { date: '2016-03-01', count: 2 },
-  { date: '2016-04-02', count: 4 },
-  { date: '2016-03-05', count: 2 },
-  { date: '2016-02-30', count: 4 }
+  {date: '2016-01-02', count: 1},
+  {date: '2016-01-03', count: 2},
+  {date: '2016-01-04', count: 3},
+  {date: '2016-01-05', count: 4},
+  {date: '2016-01-06', count: 5},
+  {date: '2016-01-30', count: 2},
+  {date: '2016-01-31', count: 3},
+  {date: '2016-03-01', count: 2},
+  {date: '2016-04-02', count: 4},
+  {date: '2016-03-05', count: 2},
+  {date: '2016-02-30', count: 4}
 ]
 
 // Mock data object for Pie Chart
 
 const pieChartData = [
-  { name: 'Seoul', population: 21500000, color: 'rgba(131, 167, 234, 1)', legendFontColor: '#7F7F7F', legendFontSize: 15 },
-  { name: 'Toronto', population: 2800000, color: '#F00', legendFontColor: '#7F7F7F', legendFontSize: 15 },
-  { name: 'Beijing', population: 527612, color: 'red', legendFontColor: '#7F7F7F', legendFontSize: 15 },
-  { name: 'New York', population: 8538000, color: '#ffffff', legendFontColor: '#7F7F7F', legendFontSize: 15 },
-  { name: 'Moscow', population: 11920000, color: 'rgb(0, 0, 255)', legendFontColor: '#7F7F7F', legendFontSize: 15 }
+  {
+    name: 'Seoul',
+    population: 21500000,
+    color: 'rgba(131, 167, 234, 1)',
+    legendFontColor: '#7F7F7F',
+    legendFontSize: 15
+  },
+  {
+    name: 'Toronto',
+    population: 2800000,
+    color: '#F00',
+    legendFontColor: '#7F7F7F',
+    legendFontSize: 15
+  },
+  {
+    name: 'Beijing',
+    population: 527612,
+    color: 'red',
+    legendFontColor: '#7F7F7F',
+    legendFontSize: 15
+  },
+  {
+    name: 'New York',
+    population: 8538000,
+    color: '#ffffff',
+    legendFontColor: '#7F7F7F',
+    legendFontSize: 15
+  },
+  {
+    name: 'Moscow',
+    population: 11920000,
+    color: 'rgb(0, 0, 255)',
+    legendFontColor: '#7F7F7F',
+    legendFontSize: 15
+  }
 ]
 
 // Mock data object for Progress
 
 const progressChartData = [0.4, 0.6, 0.8]
 
-export { data, contributionData, pieChartData, progressChartData }
+const stackedBarGraphData = {
+  labels: ['Test1', 'Test2'],
+  legend: ['L1', 'L2', 'L3'],
+  data: [[60, 60, 60], [30, 30, 60]],
+  barColors: ['#dfe4ea', '#ced6e0', '#a4b0be']
+}
+
+export {
+  data,
+  contributionData,
+  pieChartData,
+  progressChartData,
+  stackedBarGraphData
+}

index.js

@@ -4,12 +4,14 @@ import BarChart from './src/bar-chart'
 import PieChart from './src/pie-chart'
 import ProgressChart from './src/progress-chart'
 import ContributionGraph from './src/contribution-graph'
+import StackedBarChart from './src/stackedbar-chart'
 
 export {
   AbstractChart,
   BarChart,
   LineChart,
   PieChart,
   ProgressChart,
-  ContributionGraph
+  ContributionGraph,
+  StackedBarChart
 }

package.json

@@ -18,8 +18,8 @@
     "react-test-renderer": "16.7.0",
     "xo": "^0.24.0"
   },
-  "_main": "./node_modules/expo/AppEntry.js",
-  "main": "./index.js",
+  "main": "./node_modules/expo/AppEntry.js",
+  "_main": "./index.js",
   "scripts": {
     "start": "expo start",
     "eject": "expo eject",

src/abstract-chart.js

@@ -84,17 +84,24 @@ class AbstractChart extends Component {
       height,
       paddingRight,
       paddingTop,
-      horizontalOffset = 0
+      horizontalOffset = 0,
+      stackedBar = false
     } = config
     const fontSize = 12
+    let fac = 1
+    if (stackedBar) {
+      fac = 0.71
+    }
+
     return labels.map((label, i) => {
       return (
         <Text
           key={Math.random()}
           x={
-            ((width - paddingRight) / labels.length) * i +
-            paddingRight +
-            horizontalOffset
+            (((width - paddingRight) / labels.length) * i +
+              paddingRight +
+              horizontalOffset) *
+            fac
           }
           y={(height * 3) / 4 + paddingTop + fontSize * 2}
           fontSize={fontSize}