I am using recharts to create a visual in react, here is how my y-axis looks like:
<YAxis dataKey="XYZ" unit="%" yAxisId="rightY" >
<Label value="XYZ" position="insideRight" />
</YAxis>
<Line yAxisId="rightY" type="linear" dataKey="XYZ">
<LabelList dataKey="XYZ"content={this.customizedLineLabel} />
</Line>
Is it possible to change the font color of a particular value in y-axis?
For example: if this is my visual
I want to change the color of 0 in y-axis (marked in red)
I checked the API documentation, I did not find anything related to it.
Yes it is possible and very easy to implement as well.
You will need to create a customTick function which will be passed to tick property of Yaxis.
And in that function you add following code. <Text> is provided by recharts.
I hope this is what you wanted!
Visit the whole code here
Related
I am seeing an issue in my project in 2 different places.
I am using the chakra ui library but it's okay even if you aren't familiar with chakra ui. A flex is just a div with display:flex property set.
<Flex transform={"rotate(180deg)"}>
<Slider
aria-label='slider-ex-3'
defaultValue={30}
orientation='vertical'
minH='32'
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb />
</Slider>
</Flex>
Note how the slider moves in the opposite direction of the mouse drag?
I am facing this exact issue when I'm using components from react-draggable inside a rotated div
Need some insights into how to resolve it.
I first came across this when implementing my own CustomTooltip, but I think this might actually be a recharts bug, as even the codesandbox example from the documentation site has the same issue. If you remove 'content={< CustomTooltip />}' from line 110 on that codesandbox, you'll turn the tooltip into a basic one, which will look like this:
But when you put that piece back in so that it's what the documentation has as an example for a CustomTooltip, the background (for lack of a better term) of the tooltip disappears.
Does anyone know if this is a recharts bug, or maybe I'm just doing something wrong? I just want to get my Custom Tooltip to have the same visual look as the basic one
I figured it out. As rahuuzz said, providing custom content for the tooltip also overrides the base styling, so that has to be provided. My tooltip in my chart now looks like this:
<Tooltip
content={<CustomTooltip />}
wrapperStyle={{ backgroundColor: "white", borderStyle: "ridge", paddingLeft: "10px", paddingRight: "10px" }}
/>
Basically just had to add the wrappedStyle prop with some basic styling. Hopefully this helps someone else googling in the future
In your codesandbox you are importing styles.css but It doesnt contain any styles for custom-tooltip class.
When you provide custom content for the tooltip you have to define the styles yourself. When content prop is omitted, the package sets the style internally to the tooltip.
I am new to React, I want to create a rating bar like this:
I want to use material UI, but I didn't find a component like this.
I found a rating UI component: https://material-ui.com/components/rating/. but I need the UI to be like a linear gauge and change color with a different number (1/5, 2/5,3/5,4/5,5/5).
Actually, I already used the rating component:
<Grid item xs={6} className={classes.overAllScoreValueContainer}>
<Box component="fieldset" marginLeft={0} marginTop={0.25} padding={0} borderColor="transparent">
<Rating
name="overall-score"
value={this.state.overAllRating}
readOnly
size={"large"}
classes={{
iconFilled: this.props.classes.iconFilled,
iconHover: this.props.classes.iconHover
}}
/>
</Box>
</Grid>
but the UI is not correct.
anyone can help?
Thank you for pointing out using the progress bar in material UI.
I can make the shape like what shown in the picture, but how to change color according to the value??
please check this:
https://codesandbox.io/s/charming-water-cx6dd?file=/demo.js
You can use material ui progress... see the document.
https://material-ui.com/components/progress/#progress
You can also customize it.
Hey thanks for posting your sandbox. I was able to provide the color dynamically with your help. If you're still stuck here then just pass the color as a prop and !important to your style. Thank you soo much.
Here's the updated sandbox link - https://codesandbox.io/s/staging-bird-dh50kl
Here is a basic grid in CodeSandbox. When I define my columns object, for one of the columns I pass in the property headerRenderer as a simple React Component showing some text and a red background. I made the height 100 on this component so it would expand the header cell. That did not work.
I went into Chrome dev tools and tried changing a bunch of css properties on various parent elements, but to no avail: the displayed height of the header is always 35px.
Notice in the link I also defined override.css which is specifically defining the height of the .react-grid-HeaderCell class.
What am I missing that the height of this Header won't budge?
The prop name headerRowHeight can bed used to set height for the header cell.
In your example, it will be as
<ReactDataGrid
columns={columns}
rowGetter={i => this.state.rows[i]}
rowsCount={3}
onGridRowsUpdated={this.onGridRowsUpdated}
enableCellSelect={true}
headerRowHeight={50}
/>
I’m using Material-ui to build a booking system. In my DatePicker my hintText is white and barely visible and I want to change to color to black. I have used examples for my code from
https://github.com/callemall/material-ui/issues/3753 and https://github.com/callemall/material-ui/issues/5737
I have also tried the example from Material-ui website but that didn’t either work. Im not getting any errors, it’s not just working. Anybody have clue what I can do?
<div className="center-container">
<DatePicker inputStyle={{color: 'black'}} hintText="Date..."
mode="landscape" minDate={new Date()}/>
</div>
There is a property hintStyle, we can use that to set the style of hintText.
Like this:
<DatePicker
autoOk={false}
mode="landscape"
hintText='please'
hintStyle={{color:'red'}}
/>
Check the working fiddle.