How to add faded background to stack chart in react native

Question

I'm trying to create stack chart

but right now I have only the line without the faded background that complete to 100% (I mean that I have only the emphasize line).

for example from the picture in bed 8107 I have right not only the 81% line but I don't have the 19% faded...

How can I added the faded background?

this is my code for the stack chart:

   'use strict'
import React, { Component } from 'react'

import {
 PropTypes,
 View,
 Text,
 Animated,
 StyleSheet,
 TouchableHighlight,
 Dimensions
   } from 'react-native'


export class ComplianceRank extends Component {

 constructor (props) {
super(props)
const data = this.props.data

 }


render () {
return (
  <View style={styles.container}>
    <View style={styles.item}>
      <Text style={styles.label}>Bed 1</Text>
      <View style={styles.data}>
        {
          <Animated.View style={[styles.bar, styles.charColor, {width: 80}]} />
        }
      <Text style={styles.dataNumber}>{80}%</Text>
    </View>
    </View>
    <View style={styles.item}>
      <Text style={styles.label}>Bed 2</Text>
      <View style={styles.data}>
        {
          <Animated.View style={[styles.bar, styles.charColor, {width: 65}]} />
        }
        <Text style={styles.dataNumber}>{65}%</Text>
      </View>
    </View>
    <View style={styles.item}>
      <Text style={styles.label}>Bed 3</Text>
      <View style={styles.data}>
        {
          <Animated.View style={[styles.bar, styles.charColor, {width: 60}]} />
        }
        <Text style={styles.dataNumber}>{60}%</Text>
      </View>
    </View>
    <View style={styles.item}>
      <Text style={styles.label}>Bed 4</Text>
      <View style={styles.data}>
        {
          <Animated.View style={[styles.bar, styles.charColor, {width: 56}]} />
        }
        <Text style={styles.dataNumber}>{56}%</Text>
      </View>
    </View>
    <View style={styles.item}>
      <Text style={styles.label}>Bed 5</Text>
      <View style={styles.data}>
        {
          <Animated.View style={[styles.bar, styles.charColor, {width: 40}]} />
        }
        <Text style={styles.dataNumber}>{40}%</Text>
      </View>
    </View>
    <View style={styles.item}>
      <Text style={styles.label}>Bed 6</Text>
      <View style={styles.data}>
        {
          <Animated.View style={[styles.bar, styles.charColor, {width: 20}]} />
        }
        <Text style={styles.dataNumber}>{20}%</Text>
      </View>
    </View>

  </View>
)
 }
}

 const styles = StyleSheet.create({
    container: {
backgroundColor: '#FFF',
flexDirection: 'column',
display:'flex',
marginTop: 6
  },
 // Item
  item: {
flexDirection: 'row',
marginBottom: 5,
paddingHorizontal: 10
  },
label: {
color: '#CBCBCB',
flex: 1,
fontSize: 12,
position: 'relative',
top: 2
 },
 data: {
flex: 2,
flexDirection: 'row'

 },
dataNumber: {
color: '#CBCBCB',
fontSize: 11
 },
// Bar
 bar: {
alignSelf: 'center',
borderRadius: 5,
height: 20,
marginRight: 5
  },
 charColor: {
backgroundColor: '#6FDEDE'
  },
 charColorFaded: {
backgroundColor: '#d5f6f6'
 }
})

I'm new with react native so I'm sorry if its beginner question.

all is hard coded, what does this has to do with d3?

rioV8
– rioV8

2018-10-18 13:45:22 +00:00
Commented Oct 18, 2018 at 13:45 — rioV8
– rioV8, Commented Oct 18, 2018 at 13:45
@rioV8 you right I took it off

Tal Shani
– Tal Shani

2018-10-18 14:04:37 +00:00
Commented Oct 18, 2018 at 14:04 — Tal Shani
– Tal Shani, Commented Oct 18, 2018 at 14:04
any suggestion?

Tal Shani
– Tal Shani

2018-10-18 14:44:28 +00:00
Commented Oct 18, 2018 at 14:44 — Tal Shani
– Tal Shani, Commented Oct 18, 2018 at 14:44

Rudy · Accepted Answer · 2018-10-18 14:50:32Z

1

Try to wrap the Animated View and change the styles in this way:

  <View style={styles.data}>
    <View style={[styles.bar, styles.charColorFaded]}>
      <Animated.View style={[styles.charColor, {width: 20}]} />
    </View>
    <Text style={styles.dataNumber}>{20}%</Text>
  </View>

edited Oct 18, 2018 at 14:50

answered Oct 18, 2018 at 14:45

Rudy

1589 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add faded background to stack chart in react native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related