Develop Reference

Interval not working in recharts with day time series

I've some measurement values collecting over the day and I want to display them with a recharts bar graph between 00:00 - 23:59 for the whole day. I want to have 5 intervals in my chart: 00:00, 06:00, 12:00, 18:00 and 23:59. The sample data:
const data = {
events: [
{
time: 1674914690,
magnitude: 10
},
{
time: 1674916697,
magnitude: 20
},
{
time: 1674918713,
magnitude: 30
}
],
startTime: 1674860400,
endTime: 1674946799
};
The interval is not working or let's say recharts is doing some strange interval based on the data given and the intervals shown are not equal the number I give.
<BarChart
width={500}
height={500}
data={data.events}
margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
>
<CartesianGrid stroke="#f5f5f5" />
<Bar
type="monotone"
dataKey="magnitude"
stroke="#ff7300"
dot={false}
barSize={2}
/>
<XAxis
type="number"
dataKey="time"
tickCount={5}
interval={"preserveStartEnd"}
tickFormatter={(timeStr) => timeFormatter(timeStr)}
domain={[data.startTime, data.endTime]}
/>
<YAxis />
</BarChart>
CodeBox
Is it possible in rechart to show these intervals?

From what I understand your problem is in the values ​​of StartTime and endTime, both are 4 hours behind what you want.
Substitute the code below in your timeFormatter function and see what happens.
var date = new Date((timestamp * 1000) + 14400000);
NOTE: This is not the solution to your problem.

Error in the values of the Rechart Stacked chart

I'm trying to build a Stacked Bar Chart using the Pchart library. I attach the code below.
function StackedBarChart({...props}){
const {dataChart:{data,keys}} = props;
const renderBars = () =>{
return keys.map((item,index)=>(
<Bar
key={index}
dataKey={item}
stackId='a'
fill={index%2?'blue':'red'}
label
/>
))
}
return(
<ResponsiveContainer width='100%' height={400}>
<BarChart
data={data}
stackOffset='expand'
>
<XAxis dataKey="name" />
<YAxis />
{renderBars()}
</BarChart>
</ResponsiveContainer>
)
}
When I output a value to each Bar I get incorrect signatures. . Why is 2 Bar subscribed with the value 1 and not the remaining percentage. What is my mistake ?
my data
const dataChart = {
data: [{
name: 'Page A',
count: 4000,
price: 2400,
},
{
name: 'Page B',
count: 3000,
price: 1398,
},
{
name: 'Page C',
count: 2000,
price: 9800,
},
],
keys: ['price', 'count']
};

The reason of this behavior, is that upper bar shown his top value, which is 1, so this is the sum of all bars stacked.
To avoid this situation I used valueAccessor and some formatting to get value of bar and count its percentage.
Here is a link to working codesandbox where you can see final result

how to give string value on y axis in rechart

I am working on Recat.js and using rechart library for chart implementation. I want to give string value on the y axis as label and workout on some numbers included in the json data in x axis. here Iam giving my code I don't why its not working properly. the value key pair has to gone through x axis and label values on the y axis. but its not working . please help me to solve this issue. iam giving my code
"timestamp": 1645727400000,
"value": 1,
"label":"connection_recovered"
},
{
"timestamp": 1645790232297,
"value": 2,
"label":"up"
},
{
"timestamp": 1645790232297,
"value": -2,
"label":"down"
},
{
"timestamp": 1645790232297,
"value": 2,
"label":"up"
},
{
"timestamp": 1645790232297,
"value": -2,
"label":"down"
}]
return (
<Container lg={6}>
<ResponsiveContainer aspect="3">
<AreaChart
width={500}
height={400}
data={data}
margin={{
top: 10,
right: 30,
left: 0,
bottom: 0,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis style={{fontSize:"12px"}} dataKey="timestamp" />
<YAxis dataKey="label" type="category" />
<Tooltip />
<defs>
<linearGradient id="splitColor" x1="0" y1="0" x2="0" y2="1">
<stop offset={off} stopColor="green" stopOpacity={1} />
<stop offset={off} stopColor="red" stopOpacity={1} />
</linearGradient>
</defs>
<Area style={{fontSize:"12px"}}
type="monotone"
dataKey="value"
stroke="#000"
fill="url(#splitColor)"
/>
</AreaChart>
</ResponsiveContainer>
</Container>
);
}

In your data array, I assumed that the values with
2 will always have the "up" label,
1 the "connection_recovered" label and
-2 the "down" label.
In order to have the label on a fixed tick in your graph on the YAxis, you can use the tickFormatter prop, where you can pass a function, which could return the label you want according to the value.
It would give the following:
// Depending on the value of the tick, you'll have a different label
function formatYAxis(value: number) {
switch(value) {
case 2:
return "up";
case -2:
return "down";
case 1:
return "connection_recovered";
default:
return ""
}
}
Used in the YAxis just like so:
<YAxis tickFormatter={formatYAxis} />
Which would give out a graph like the following

general questions regarding react native. props and style

I was tasked with making some tweaks on a react native app. while it's not my skill there is no one available to work on this so I am stuck with it. for the most part I was able to make the edits needed, however I have few questions about the code if anyone can help me understand better.
1 - what is the difference between
color={Colors.myColorGold}
color: Colors.myColorGold
2 - if I want to use the predefined style but change one parameter like color, or font size how can I do it while keeping the rest of the parameters
<Text style={{ color: Colors.ochsnerGold, fontWeight: 'bold' }}>
<Text style={styles.emphasized}>{alert.SensorType}</Text>
3 -
what is the differance between the two below
this.props.navigation.navigate('NotificationPreferences');
this.navigate('NotificationPreferences')
4 - and lastly, I wanted to change the color of the placeholder, I have tried everything without success, below is the code and all the things I tried.
const ItemPicker = ({itemOptions, handleChangeitem, selectedItemID}) => {
return Platform.OS === 'ios' ? (
<RNPickerSelect
placeholder={{label: 'Select an item', value: null, placeholderTextColor: Colors.myGold}}
placeholderTextColor={Colors.myGold} //tried this
items={itemOptions}
onValueChange={handleChangeItem}
style={{inputIOS: styles.inputIOS, inputAndroid: styles.inputAndroid, Color: Colors.myGold}} //tried this
value={selectedItemID}
textColor={Colors.myGold} //tried this
/>
) : (
<Picker
selectedValue={selectedItemID}
style={styles.inputAndroid}
onValueChange={handleChangeItem}
textColor={Colors.myGold} //tried this
Color={Colors.myGold} //tried this
>
<Picker.Item label="Select a Item" value="null" textColor={Colors.myGold} Color={Colors.myGold}/> //tried this
{
itemOptions.map((item) => (
<Picker.Item key={item.value} label={item.label} value={item.value} textColor={Colors.myGold} Color={Colors.myGold} /> //tried this
))
}
</Picker>
)
}

For
1. If you are using a component which has style as its props so you can use as color={Colors.myColorGold} . like suppose in
<MaterialIcon color={Colors.myColorGold} />
and if you want to add a color property in the styles object you do :
const proAppHeaderStyles=StyleSheet.create({
hederStyle:{
color:"#4f58ff",
}
})
suppose you want to change in
<Text style={styles.emphasized}> {alert.SensorType}</Text> just go to styles.emphasized object where its defined and add color or fontsize whatever you want to change. e.g
emphasized:{
color:'red'
}
3.this.props.navigation.navigate('NotificationPreferences') is same as the below one. Only that the above one states in explicitly and below syntax will only work if you first destructure navigate. i.e
const {navigate} = this.props.navigation; and after that use navigate as below
this.navigate('NotificationPreferences')
SO you have to apply styles as below
<RNPickerSelect
placeholder={{
label: 'Select a number or add another...',
value: null,
color: 'red',
}}
items={this.state.numbers}
onValueChange={value => {
this.setState({
favNumber: value,
});
}}
style={{
...pickerSelectStyles,
iconContainer: {
top: 20,
right: 10,
},
placeholder: {
color: 'purple',
fontSize: 12,
fontWeight: 'bold',
},
}}
value={this.state.favNumber}
Icon={() => {
return (
<View
style={{
backgroundColor: 'transparent',
borderTopWidth: 10,
borderTopColor: 'gray',
borderRightWidth: 10,
borderRightColor: 'transparent',
borderLeftWidth: 10,
borderLeftColor: 'transparent',
width: 0,
height: 0,
}}
/>
);
}}
/>
so basically inside the style object you need to pass placeholder object and then the style :
style={{
...pickerSelectStyles,
iconContainer: {
top: 20,
right: 10,
},
placeholder: { // this is the part
color: 'purple',
fontSize: 12,
fontWeight: 'bold',
},
}}
Do check out this link : example
ask me for doubts.

React Native / Victory Charts : Need to style coords

I am building a small mobile app in React Native that displays a line graph.
I have built the line graph via Victory Charts component.
This is my App.js
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { VictoryBar, VictoryChart, VictoryAxis, VictoryLine } from 'victory-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<VictoryChart
domainPadding={{x: 40}}
style={{marginLeft: 120}}
>
<VictoryLine
data={[
{logdate: "11-01", temp: 110 },
{logdate: "12-01", temp: 98 },
]}
x="logdate"
y="temp"
style={{
data: {opacity: 0.7},
labels: {fontSize: 12},
parent: {border: "1px dotted #001"}
}}
/>
<VictoryAxis
label="logdate"
style={{
axisLabel: { padding: 30 }
}}
/>
<VictoryAxis dependentAxis
label="temp"
style={{
axisLabel: { padding: 40 }
}}
/>
</VictoryChart>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
The line graph is displayed as shown below
The graph is working fine.
I need help in styling of the x-axis co-ord's label as highlighted in the pic.
Instead of showing "11-01" horizontally I want it to be shown vertically as shown in the pic.
Anyone has any ideas ?

Add tickLabels: { angle: -90, }
in style of VictoryAxis :
<VictoryAxis
label="logdate"
style={{
axisLabel: { padding: 30 },
tickLabels: { angle: -90, }
}}
/>

You should just add two victory Axis before the victory line
add dependentAxis for the first
<VictoryAxis dependentAxis />
for the second add the axeY list to the ticketFormat item and define the -60 angle style.
<VictoryAxis
style={{ tickLabels: { angle: -60 } }}
tickFormat={AxeY}
/>
Hopefully I help you