I want to add shadow on piechart. I am using recharts library.
Please let me know if you have any solutions.
Thanks.
You can add a drop shadow filter on the Cell component(s) to add this effect. I just passed the values in via the style prop, but you can do whatever works best for you.
<PieChart width={800} height={400}>
<Pie
data={data}
cx={120}
cy={200}
innerRadius={70}
outerRadius={80}
fill="#8884d8"
dataKey="value"
>
{data.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={COLORS[index % COLORS.length]}
style={{
filter: `drop-shadow(0px 0px 5px ${COLORS[index % COLORS.length]}`
}}
stroke="0"
/>
))}
</Pie>
</PieChart>
Working Example CodeSandbox: https://codesandbox.io/s/pie-chart-with-drop-shadow-fxe8x?file=/src/App.tsx
Related
I'm using #react-navigation/drawer.
And it is very annoying with the style inside <DrawerContentScrollView>
I have demo here ( please run on andorid, on web do not have the paddingTop )
The problem:
Inside the view in DrawerContentScrollView has a style:
{
"paddingTop": 34.18181800842285,
"paddingStart": 0,
"paddingEnd": 0
}
It's good if I don't customize a header at the top. It seems StatusBar's padding. I don't know where to fix it. I want to turn it off or change the paddingTop: 0.
Does anyone have a solution to this problem?
add contentContainerStyle={{paddingTop: 0}} into <DrawerContentScrollView>
<DrawerContentScrollView
{...props}
contentContainerStyle={{paddingTop: 0}}>
<DrawerItemList {...props} />
</DrawerContentScrollView>
In storybook, all stories are sitting tight agains the top left corner of the container.
This is causing problems when displaying items that have visual appearance outside the relative container e.g. a box-shadow.
So I am wondering what is the best way to add margin to the surrounding container. I had a look in the theming docs of storybook, but could not find anything related?
In .storybook/preview.js, you can just add the following:
addDecorator(storyFn => (
<>
<div style={{ margin: '1rem' }}>{storyFn()}</div>
</>
))
This way all the stories will appear with a margin of 1rem.
Adding to my preview.js:
export const decorators = [
(Story) => (
<div style={{ margin: '3em'}}>
<Story />
</div>
)
]
solved the problem for me
It's better to add padding on each component because not all components needs margins.
For example, in your .stories.tsx file
const Template: ComponentStory<typeof IconButton> = (args) => (
<div style="padding: 20px"><YourComponent {...args} /></div>
)
You can even use layout parameter to center all stories in the UI globally.
See Story layout for more details.
<!-- Checkbox.stories.mdx -->
import { Meta } from '#storybook/addon-docs';
import { Checkbox } from './Checkbox';
<Meta
title="Checkbox"
parameters={{
layout: 'centered',
}}
component={Checkbox}
/>
Is there any way to override a Material UI components styling without having to create a whole new component using withStyles()?
For instance, say I am rendering the following and I just want to change the color of the "Delete" label:
<div style={styles.rowFooter}>
<FormControlLabel
control={<ClearIcon />}
label="Clear"
title="Clear all fields."
onClick={clearFields}
/>
<FormControlLabel
control={<DeleteIcon />}
label="Delete"
title="Delete this row."
onClick={deleteRow}
/>
</div>
To do this, I'd usually have to:
Create a new styles function that returns { color: "maroon" }.
Create a new component to render the "Delete" button.
Wrap my new component withStyles(newStylesFn)(MyComponent).
But I don't want to do all of that. Is there any way to avoid it?
Update:
One way that I know of is to just pass a CSS className. I was looking for something besides that because it doesn't even work in this situation to override the nested element.
What I'd really like to be able to do is just pass style={{ color: "maroon" }}, but that only changes the color of the icon, not the actual label text...
You could use the classes prop to override styles provided by Material UI instead of className.
<FormControlLabel
control={<DeleteIcon />}
label="Delete"
title="Delete this row."
classes={{
label: 'labelStyle'
}}
/>
styles.css
.labelStyle {
color: maroon !important;
}
Although it's Not the perfect solution, it still does the job without using withStyles().
I have a TableHead Component with multiple columns. One of them is a <Select> so that you can filter the content of the table (the value is one of 4 statuses in my case). I want to add an ellipsis at the end of the options' string if it's longer than it's container.
My problem is that material-ui's styles are wrapped around the Select component so whether I do it withStyles or by inserting styles inside the tag, it doesn't work.
I checked and with material-UI you can have noWrap and textOverflow: "ellipsis" should work but I can't quite figure out the right combination.
My expected result is that if the string is larger than it's parent, it displays the Ellipsis. So instead of this:
I'd like a simple "Contrib..." (The svg from Material-UI Select component overlays the text...)
I tried many different options but none of them do anything so clearly I must be doing something wrong. I tried changing colors to see if my styles were being affected which they are.
<Grid item sm={2} lg={2} style={{display: 'flex', alignItems:'center'}}>
<Select native style={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "pre" }}
value={this.state.status}
onChange={this.handleChange.bind(this, Filter.Status)}>
{Object.keys(StatusFilter).filter(key => !isNaN(Number(StatusFilter[key]))).map(item => {
return (<option key={item} value={StatusFilter[item]}>{this.getStatus(StatusFilter[item])}</option>);
})}
</Select>
</Grid>
Two things here, first a native select has no way to add ellipsis since text-overflow is only for block elements. See Is it possible to make text-overflow:ellipsis for select with css only?
In case you want to explore that way, there is also inputProps that is an object you can use to pass properties to the underlying input. So if you want to add a style to the native input you can:
<Select native inputProps={{ style: { width: 100 } }}>{...}</Select>
On the other hand, if you remove the native property the ellipsis should be applied by default if the select box is smaller than the text.
In my case ellipses were missing even on non native Select component, and that was because display: flex style was applied over 'MuiSelect-root' component.
Replace that - i.e. with display:block - and ellipsis will be there for you.
<FormControl
variant="outlined"
margin="dense"
className={classes.formControl}
error={touched.test && Boolean(errors.test)}
>
<InputLabel id="demo-simple-select-outlined-label">Test</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={course}
name="test"
onChange={handleChange}
label="Test"
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={1}>1</MenuItem>
<MenuItem value={2}>2</MenuItem>
<MenuItem value={3}>3</MenuItem>
<MenuItem value={4}>4</MenuItem>
</Select>
<FormHelperText error={touched.test && Boolean(errors.test)}>{errors.test}</FormHelperText>
</FormControl>
And add class:
formControl: {
width: "100%",
},
I have a problem trying to remove the bottom border from the default Picker in react-native.
My code:
<Picker
style={styles.pickerStyle}
selectedValue={this.state.registerType}
onValueChange={(item) => this.setState({registerType:item})}>
<Picker.Item label="Vælg emne" value="choose" />
{registerTypes}
</Picker>
On the image below you can see what I want to remove:
I have tried to use the underlineColorAndroid='transparent' properties as you will do in the TextInput tag, but it diden't work. Any suggestions?
Maybe it's not the best way ever, but I found a fast solution that worked fine in my project.
Define a height for <View> and <Picker>, and the container element must be 1px bigger.
Set overflow: "hidden" para o container.
<View style={styles.container}>
<Picker style={styles.picker}>
<Picker.Item value="1" label="Yes" />
<Picker.Item value="2" label="No" />
</Picker>
<View>
container: {
overflow: "hidden",
height: 51
},
picker: {
height: 50
}
I know it was an easy fix, but a part of my design was to change the background color in the Picker and then the border is hidden behind I guess.