React-native-svg-charts: How can make stackbar chart ends curved and how can i add labels on stackbarchart

[sagarc91]

What is the problem?

I wants to create a stackbarchart. I am new to react-native. I am using react-native svg charts for creating stackbarchart. I am not able to make curve at the end of stackbar also not able to make labels on stackbar.

What platform?
iOS 11.4

React Native version: 0.56

Code to reproduce

import React, {Component} from 'react';
import {Platform, StyleSheet, View, Text} from 'react-native';
import { VictoryBar, VictoryStack } from "victory-native";
import { BarChart, Grid, YAxis, StackedBarChart } from 'react-native-svg-charts'
import * as scale from 'd3-scale'

export default class App extends React.PureComponent {

render() {

    let selectedButton = this.state.data1.find(e => e.selected == true);
    selectedButton = selectedButton ? selectedButton.value : this.state.data1[0].label;

    const data = [
        {
            covered: 60,
            required: 80,
            label: 'Large Cap',
        },
        {               
            covered: 60,
            required: 40,
            label: 'Mid Cap',
        },
        {              
            covered: 30,
            required: 23,
            label: 'Small Cap',
        },
        {                
            covered: 70,
            required: 30,
            label: 'Debt',
        },
        {              
            covered: 30,
            required: 60,
            label: 'Liquid',
        },

        {              
            covered: 40,
            required: 70,
            label: 'Balanced',
        },
    ]
    console.log("Data is : " +data[0]['covered'])

    const colors = [ '#F7EC90', '#A6CF4F' ]
    const keys   = [ 'covered', 'required' ]

    const CUT_OFF = 50
    const Label = ({ item: covered, x, y, index, bandwidth }) => (
        <Text
            key={index}
            y={covered < CUT_OFF ? y(covered) - 10 : y(covered) + 15}
            x={x(index) + (bandwidth / 2)}
            fontSize={14}
            fill={covered > CUT_OFF ? 'red' : 'yellow'}
            alignmentBaseline={'middle'}
            textAnchor={'middle'}
        >
            {covered}
        </Text>
    )


    return (



         <View style={{ flexDirection: 'row', height: 300, backgroundColor : "#f2f2f2" }}> 
            <YAxis tyle={{ flex : 0.1}}
                data={data}
                yAccessor={({ index }) => index}
                scale={scale.scaleBand}
                contentInset={{ top: 10, bottom : 10 }}
                formatLabel={(_, index) => data[ index ].label}
            />
            <StackedBarChart
                style={ { flex: 0.9, marginLeft: 15, marginTop : 15, marginBottom : 15, borderRadius : 100} }
                spacingInner = { 0.3 }
                keys={ keys }
                colors={ colors }
                horizontal = {true}
                data={ data }
                borderRadius = { 100 }
                showGrid={ false }
                yAccessor={({ item }) => item.value}
                renderGrid={Grid.Horizontal}
                renderDecorator={Label}
                >
                <Label/>
           </StackedBarChart>
         </View>
    )
}

}

[sagarc91]

[sagarc91]

I wants to render graph like above.

[alburdette619]

I actually need this too and had planned to do it if time allows on my project. I think you'd have to try to use the d3-shape area curve function. Not sure about this but that'd be how I'd first go at it. You'd need to apply it here and in the standard bars: https://github.com/JesperLekland/react-native-svg-charts/blob/dev/src/stacked-bar-chart.js#L86

[idanlo]

is this possible now?