I am trying to use this library for charts in React:
https://nivo.rocks/
I have copied the exact same example in the docs for the horizontal column chart (bar chart) but on my env, the legends are simply not shown.
I have looked for all other issues previously posted concerning labels not showing up and legend's problems troubleshoot. But this is a different issue. it just doesn't work as expected / as shown in the documentation live preview
CodeSandbox showing the problem:
https://codesandbox.io/s/missing-legends-text-pns6v
There is a div tag that looks like this:
<div style={{ width: "80%", height: "400px", color: "white" }}>
The colour is set to white. Remove that, and the text will display.
Related
I am using material ui ,I want to fix the left side fix and right side scrollable but its not working.I am trying in this way....
<Stack direction="row">
<Box sx={{ position: "fixed", width: "25%" }}>Left-side box content</Box>
<Box sx={{ overflow: "scroll", width: "75%" }}>Right-side box content</Box>
</Stack>
Thanks in advance...
It sounds like you are trying to create a layout where the left side of the page is fixed and the right side is scrollable. To do this with Material-UI, you can use the Grid component to create a two-column layout, and set the style property of the left column to { position: 'fixed' } and the right column to { overflow: 'auto' }.
You can also use grid-template-columns: fixed-value auto in CSS to achieve this.
It is important to note that you will likely need to adjust the widths of the columns and the container to make sure everything fits correctly on the screen.
It is also possible that you are facing some other issue, please provide more details about your code and the exact problem you are facing, so i can help you in a better way.
I'm new to React and wanted to ask what's the cleanest way to implement a background design like this. I want to know how you could change the background to blue and have the images overlap into the white area or the rings in the corners. So what is the best approach? And I don't want to use a background image
Background I want to implement
position: fixed;
background: "your image or some colors";
width: 100%;
height: 100vh;
Other contents should appear accordingly if you apply proper z-index
There are several options.
You can add !important behind the code that wnna be overwrite.
add z-index for the each element. note : the higher z-index number of the element, it will be place at the top.
in-line style. where you can add tag style={{ your style here}} within your element. example
<div style={{z-index : 10, backgroundImage : black}} > Text here </div>
manual CSS with tag backgroud-image.
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 have a problem with scaling leaflet map to fit mobile devices. I'm building an application using React, Leaflet(+React-Leaflet) & OpenStreetMaps.
If I'm placing component like footer or zoom control on the bottom of the screen, they appear either half or not at all, as they are hidden behind mobile devices menu.
Here's an example.
Web version
Mobile version
In this case, the zoom control component does not appear at all in the mobile version. If I change maps height property to 90vh for example, it appears again.
Mobile version with 90vh
Of course now it works, but looks ugly and isn't responsive. How can I fix this?
I have followed this example, but it doesn't seem to help.
I fixed this. In case this same problem occurs to someone else in the future, here is my solution.
When you are adding css properties to your Map component, rather than using "height: 100vh;", use "height: 100%;" like shown in this example. You should use a wrapper container set to position fixed, or absolute to get height 100% working correctly. Here is and example:
Rendering Map component
<div className="map-wrapper">
<Map/>
</div>
CSS
.map-wrapper {
width: 100%;
height: 100%;
position: fixed;
}
.map {
width: 100%;
height: 100%;
position: relative;
}
On Android (and possibly iOS, I haven't tested), there is a problem with scrolling text with a React Native Scrollview. I am attempting to create a text block component that flexes to fill the remaining space of the page with text rendered inside of it. That works.
My problem is that this text needs to be easily scrollable. In my application, I can not make minor scrolling adjustments to the text in this field. (Think about scrolling on Instagram, you can scroll up or down in very small gestures).
This text in the scrollview does not scroll unless you give it a very long and quick flick of the finger. It does scroll and it scrolls correctly functionality-wise, the user experience is just awful.
It's as if it doesn't get recognized as a scroll view unless you scroll it a massive amount.
This happens with normal text elements getting passed into props.children. I am just setting fontSize on the text elements so that the text is bigger. Right now the text font size is set to 60 so that I can test the scrolling functionality.
Here is my text block code:
const TextBlock = (props) => {
return (
<View style={{...props.style, ...styles.container}}>
<ScrollView style={styles.scrollView} contentContainerStyle={{flexGrow: 1}}>
{props.children}
</ScrollView>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: Colors.whiteBackgroundColor,
paddingHorizontal: 18,
paddingVertical: 10,
borderRadius: 20,
width: '90%',
flex: 1
}
});
Any help on this would be greatly appreciated. I've tried putting a flex grow on the inner elements. I have tried wrapping the inside text in another view (both with and without flex attributes). I have tried removing the flex altogether.
Please let me know if there's some way to fix this.