Develop Reference

I want to change the data in my radial chart of react. I use ApexCharts. how soluld I pass different number whenever I call my chart compoonent

I am new to React.js and I want to change my chart component's value when I call that component in another file. Can anyone help me to do solve this problem ?
This is my Radial apex chart code.
I want to change my the value of "leave taken" so that it show different colored area.
Here, "sreries" named object contains the value.
import { render } from "node-sass";
import React, { Component } from "react";
import ReactApexChart from "react-apexcharts";
class ApexChart extends React.Component {
state: any;
constructor(props: any) {
super(props);
let max = 8;
let leaveTaken = 4;
let val = ((max - leaveTaken) / max) * 100;
this.state = {
series: [val],
options: {
chart: {
height: 350,
max: 10,
type: "radialBar",
toolbar: {
show: false,
},
},
plotOptions: {
yaxis: {
max: 9,
},
radialBar: {
startAngle: -135,
endAngle: 215,
range: [0, 8],
max: 8,
hollow: {
margin: 10,
size: "80%",
background: "#fff",
image: undefined,
imageOffsetX: 0,
imageOffsetY: 0,
position: "front",
},
track: {
background: "#fff",
strokeWidth: "14%",
margin: 0, // margin is in pixels
dropShadow: {
enabled: true,
top: -3,
left: 0,
blur: 4,
opacity: 0.35,
},
},
dataLabels: {
show: true,
strokeWidth: "5%",
name: {
offsetY: -10,
show: true,
color: "#888",
fontSize: "17px",
},
value: {
formatter: function (val: any) {
return leaveTaken;
},
color: "#111",
fontSize: "36px",
show: true,
},
},
},
},
fill: {
type: "solid",
solid: {
color: "#CF2C09",
},
},
stroke: {
lineCap: "round",
},
labels: ["Leave"],
},
};
}
render() {
return (
<div id="card">
<div id="chart">
<ReactApexChart
options={this.state.options}
series={this.state.series}
type="radialBar"
height={250}
/>
</div>
</div>
);
}
}
const domContainer = document.querySelector("#app");
// render(React.createElement(ApexChart));
export default ApexChart;
<div className="types">
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div
className=" bg-white mb-3"
style={{
width: "17%",
borderRadius: "5px",
marginRight: "15px",
marginLeft: "15px",
display: "block",
justifyContent: "center",
alignItems: "center",
paddingBottom: "5px",
}}
>
<p style={{ textAlign: "center", marginBottom: "0" }}>
Casual Leave
</p>
<ApexChart />
</div>
and this where I called them name as (<ApexChart />)

How to make gauge charts edges rounded plotly js?

I want to make this charts edges rounded, how can I do that? I've tried:
border-radius: 100%;
stroke-linejoin: round;
stroke-linecap:round;
none of them worked.
If I give stroke-width: 1, it become slightly rounded but I want it to be completely rounded.
My code:
import Plot from 'react-plotly.js';
const AngularGaugeChart = () => {
const data: any = [
{
domain: {
x: [0, 1],
y: [0, 1],
},
value: 96,
title: {
text: 'Tempture',
font: { size: 24 },
},
type: 'indicator',
mode: 'gauge+number',
gauge: {
axis: {
range: [0, 100],
tickwidth: 0,
tickformat: '',
tickcolor: 'transparent',
},
bar: {
color: 'gray',
thickness: 0.9,
},
bgcolor: 'white',
},
},
];
const layout = {
autosize: true,
margin: {
t: 0,
b: 0,
l: 50,
r: 50,
},
paper_bgcolor: '#262626',
font: {
color: '#fff',
family: 'Roboto',
},
};
return (
<>
<Plot
style={{ width: '50%', height: '50%', margin: 'auto' }}
useResizeHandler={true}
data={data}
layout={layout}
/>
</>
);
};
export default AngularGaugeChart;
Here is the picture of current status. I'm trying to make these edges rounded.

Tooltip shows only the first bar in recharts react?

I am new to react and recharts and wanted to show tooltip for individual bars but Unfortunately It shows tooltip for the first bar not for the others.
Here is my code
import React, { memo } from "react";
import {
Bar,
BarChart,
CartesianGrid,
LabelList,
Rectangle,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
} from "recharts";
import { makeStyles } from "#material-ui/core/styles";
import ChartWrapper from "../chartParent/chartWrapper/ChartWrapper";
import CustomTooltip from "../timeSeriesChart/CustomTooltip";
const Categories = [
{ category: "great", fill: "#00D063" },
{ category: "fair", fill: "#FFC135" },
{ category: "risky", fill: "#F44138" },
];
const useStyles = makeStyles((theme) => ({
root: {
margin: -30,
width: 160,
backgroundColor: "#fff",
borderRadius: 5.5,
},
title: {
fontFamily: "Open Sans Condensed",
fontWeight: 600,
fontSize: 18,
},
tooltipData: {
width: "100%",
height: 31,
borderRadius: "5.5px 5.5px 0px 0px",
},
label: {
color: "#fff",
fontFamily: "Lato",
fontWeight: 400,
fontSize: 14,
marginLeft: 18,
paddingTop: "7px",
},
toolValue: {
marginTop: 11,
marginLeft: 18,
fontFamily: "Roboto",
fontWeight: 600,
fontSize: 19,
},
signature: {
fontWeight: 500,
fontSize: 14,
marginTop: -10,
marginLeft: 18,
paddingBottom: 11,
paddingRight: 18,
color: "#8D8D8D",
fontFamily: "Lato",
},
}));
const PerformanceBreakdownChart = ({ data, ...props }) => {
const classes = useStyles();
console.log("categories", data);
return (
<ChartWrapper {...props}>
<ResponsiveContainer minHeight={150} width={"100%"} height="100%">
<BarChart
data={data}
margin={{
top: 30,
right: 20,
left: 20,
bottom: 0,
}}
barSize={20}
>
<CartesianGrid horizontal={false} vertical={false} />
<XAxis dataKey="week" axisLine={false} tickLine={false} />
<YAxis hide={true} dy={4} />
<Tooltip
cursor={{ fill: "transparent" }}
content={<CustomTooltip />}
/>
{Categories.map(({ category, fill }) => (
<Bar
key={category}
dataKey={category}
fill={fill}
isAnimationActive={false}
shape={<Rectangle radius={[10, 10, 10, 10]} />}
minPointSize={16}
>
<LabelList
dataKey={category}
position="insideBottomLeft"
dy={11}
offset="15"
angle="-90"
fill="#FFF"
/>
</Bar>
))}
</BarChart>
</ResponsiveContainer>
</ChartWrapper>
);
};
export default memo(PerformanceBreakdownChart);
CustomTooltip.js
import React, { memo } from "react";
import { makeStyles } from "#material-ui/core/styles";
import { getCategory, getCategoryColor } from "../../../data/helpers/helpers";
import { useTranslation } from "react-i18next";
import { GREY } from "../../../pages/overviewPage/containers/DistanceTraveledParentContainer";
const useStyles = makeStyles((theme) => ({
root: {
margin: -30,
width: 160,
backgroundColor: "#fff",
borderRadius: 5.5,
},
title: {
fontFamily: "Open Sans Condensed",
fontWeight: 600,
fontSize: 18,
},
tooltipData: {
width: "100%",
height: 31,
borderRadius: "5.5px 5.5px 0px 0px",
},
label: {
color: "#fff",
fontFamily: "Lato",
fontWeight: 400,
fontSize: 14,
marginLeft: 18,
paddingTop: "7px",
},
toolValue: {
marginTop: 11,
marginLeft: 18,
fontFamily: "Roboto",
fontWeight: 600,
fontSize: 19,
},
signature: {
fontWeight: 500,
fontSize: 14,
marginTop: -10,
marginLeft: 18,
paddingBottom: 11,
paddingRight: 18,
color: "#8D8D8D",
fontFamily: "Lato",
},
}));
const CustomTooltip = ({ active, payload, label, signature }) => {
const { t } = useTranslation();
const classes = useStyles();
if (active && payload) {
const color = signature ? GREY : getCategoryColor(payload[0].value);
const customLabel = t(
signature ? signature : getCategory(payload[0].value)
);
return (
<div className={classes.root}>
<div
className={classes.tooltipData}
style={{ backgroundColor: `${color}` }}
>
<p className={classes.label}>{`${label}`}</p>
</div>
<p className={classes.toolValue}>{payload[0].value}</p>
<p className={classes.signature}>{customLabel}</p>
</div>
);
}
return null;
};
export default memo(CustomTooltip);
The above code output looks like this.
output
How can I show tooltip for individual bars as the following snippet?
actual needed tooltip

State not showing in my text component React Native

I'm trying to initialize a Text component in a parent component with a certain state, but it's not showing up at all. This should be something really simple and something I've done multiple times before, what am I doing wrong here? Nothing is showing up in the text component. Here is the component code:
import React from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
export class GeneralInput extends React.Component {
constructor(props) {
super(props);
this.state = {
placeholder: this.props.placeholder,
inputValue: "",
inputting: false,
validationMessage: "This is a required field",
validationStyles: styles.noValidation,
};
}
whenInputIsFocused() {
this.setState({placeholder: ""});
}
whenInputIsBlurred() {
this.setState({validationMessage: "This field is required"});
/* if (this.state.inputValue === "") {
this.setState({placeholder: this.props.placeholder});
}*/
}
storeValue = (inputValue) => {
this.setState({inputValue});
this.props.onChange({key: this.props.fieldId, value: inputValue});
}
focusNextField(nextField) { this.refs[nextField].focus(); }
render() {
const autoFocus = this.props.autoFocus == 'true';
const multiline = this.props.multiline == 'true';
return(
<View style={styles.outerContainer}>
<Text style={styles.labelText}>{this.props.labelText}</Text>
<View style={styles.inputContainer}>
<TextInput
autoCapitalize='none'
autoFocus={this.props.autoFocus}
onChangeText={this.storeValue}
value={this.state.inputValue}
secureTextEntry={this.props.secureTextEntry}
onBlur={this.whenInputIsBlurred.bind(this)}
onFocus={this.whenInputIsFocused.bind(this)}
underlineColorAndroid="transparent"
keyboardType={this.props.type}
returnKeyType={this.props.returnKeyType}
placeholder={this.state.placeholder}
placeholderTextColor='rgba(255, 255, 255, 0.3)'
multiline={multiline}
selectTextOnFocus={false}
onSubmitEditing={() => {this.focusNextField(this.props.ref)}}
blurOnSubmit={(this.props.moveAlongType === 'next') ? false : true}
style={styles.inputStyles} />
<Text style={styles.validationText}>{this.state.validationMessage}</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
outerContainer: {
justifyContent: 'center',
alignItems: 'flex-start',
width: '90%',
marginBottom: 20,
},
labelText: {
fontFamily: 'rubik-bold',
fontSize: 14,
fontWeight: 'bold',
color: '#fff',
marginBottom: 5,
},
inputContainer: {
height: 40,
width: '100%',
backgroundColor: 'rgba(255, 255, 255, 0.3);',
shadowColor: 'rgba(0, 0, 0, 0.15)',
shadowOffset: {width: 0,height: 2},
shadowOpacity: 0,
shadowRadius: 0,
borderRadius: 2,
},
inputStyles: {
height: '100%',
width: '100%',
fontSize: 14,
color: '#fff',
paddingLeft: 15,
fontFamily: 'rubik-bold',
},
validationText: {
color: '#e16e17',
fontSize: 12,
fontFamily: 'rubik-bold',
marginTop: 3,
display: 'none',
},
});

Assuming you mean this
<Text style={styles.validationText}>{this.state.validationMessage}</Text>
Your styles have
validationText: {
color: '#e16e17',
fontSize: 12,
fontFamily: 'rubik-bold',
marginTop: 3,
display: 'none',
},
The display:'none' is going to make it not show up

I tried your code and modified the backgroundColor for the text area.
labelText: {
backgroundColor: "red",
...
I get this, which I believe is what you are looking for:
Are you showing the text on a white background?

react-native-modalbox stuck in child component context

I'm using react-native-modalbox. Judging by the dark shaded area in the image below, my model is stuck in the context of the component that it is inside. Not the whole app. Is there a way to make the modal think it is at the root component level? I have tried zIndex:500 which doesn't work.
modal:
code:
let Categories = (props) => (
<View style={styles.formItem}>
<List style={styles.list} dataArray={props.categories}
renderRow={(item) =>
<ListItem icon onPress={() => props.toggleShowSubcategories(item)}>
<Left>
<Icon
style={styles.icon}
name={item.icon}
size={20}
color={item.iconColor} />
</Left>
<Body>
<Text style={styles.label}>{item.label}</Text>
</Body>
<Right>
<Icon style={styles.arrow} name="angle-right" size={20} />
</Right>
</ListItem>
}>
</List>
<Modal
style={[styles.modal, styles.modal3]}
position={'center'}
isOpen={props.categories.some(x => showModal(x))}>
<Text style={styles.text}>Modal centered</Text>
<Button
onPress={() => props.setAllShowSubcategoriesToFalse()}
style={styles.btn}><Text>Close</Text></Button>
</Modal>
</View>
)
Categories.propTypes = {
categories: React.PropTypes.array.isRequired,
toggleSubcategory: React.PropTypes.func.isRequired,
toggleShowSubcategories: React.PropTypes.func.isRequired,
setAllShowSubcategoriesToFalse: React.PropTypes.func.isRequired
}
Categories = connect(
mapStateToProps,
mapDispatchToProps
)(Categories)
export default Categories
const styles = {
list: {
flex: 1,
backgroundColor: '#FFFFFF',
borderRadius: 8
},
label: {
color: '#9E9E9E',
fontWeight: '200'
},
formItem: {
marginBottom: 10
},
icon: {
width: 30
},
header: {
backgroundColor: '#F7F7F7',
},
arrow: {
color: '#9E9E9E'
},
modalView: {
flex: 1,
backgroundColor: '#FFFFFF',
borderRadius: 8,
},
title: {
color: '#9E9E9E',
fontWeight: '200'
},
wrapper: {
paddingTop: 50,
flex: 1
},
modal: {
justifyContent: 'center',
alignItems: 'center',
zIndex: 500
},
modal3: {
height: 500,
width: 300,
backgroundColor: 'red',
zIndex: 500
},
btn: {
margin: 10,
backgroundColor: '#3B5998',
color: 'white',
padding: 10
},
btnModal: {
position: 'absolute',
top: 0,
right: 0,
width: 50,
height: 50,
backgroundColor: 'transparent'
},
text: {
color: 'black',
fontSize: 22
}
}

The parent view has the style 'formItem' who's only styling is 'marginBottom:10'. There's nothing telling that view to fill the entire screen so it is sized to fit its children. Give the view the 'absoluteFill' style so that if fills the screen https://til.hashrocket.com/posts/202dfcb6c4-absolute-fill-component-in-react-native