HomeOur TeamContact

Stacked Bar Chart

By Utkarsh Lubal
Published in Charts
June 13, 2022
1 min read
Stacked Bar Chart

Table Of Contents

01
Chart-Kit
02
Installation
03
Example
04
Tutorial

Chart-Kit

React-native-chart is a simple module for adding line charts, area charts, or bar charts to your React Native app.

Installation

npm i react-native-chart-kit --save

Example

import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  StyleSheet,
  Dimensions,
  ScrollView,
} from 'react-native';
import { StackedBarChart } from 'react-native-chart-kit';

const App = () => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <ScrollView>
        <View style={styles.container}>
          <View>
                  <MyStackedBarChart />
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
    padding: 10,
  },
  header: {
    textAlign: 'center',
    fontSize: 18,
    padding: 16,
    marginTop: 16,
  },
});

Tutorial


Tags

tutorialarticle
Previous Article
Bar Chart
Utkarsh Lubal

Utkarsh Lubal

Full Stack Developer

Related Posts

Animated Credit Card Input With Data Access
Animated Credit Card Input With Data Access
June 13, 2022
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media