so i am trying to do a pie chart using recharts, but i want to do a custom legend like this:
so what i tried to do is create an ul and setting it next to it but the problem is its not responsive so thats why i'm thinking about custom legend. what i did so far:
i have no idea how to set up a margin that will make them equal or style them like this i really need help.
code:
<Row>
<Col lg="9">
<ResponsiveContainer width="100%" height={220}>
<PieChart data={testMeasurments.data}>
<Tooltip />
<Legend
height={170}
layout="vertical"
iconType="circle" align="right"
// iconType="circle" align="right" wrapperStyle={{
// // marginBottom: "10%",
// // marginRight: "30%",
// // marginLeft:"20%"
// // lineHeight: "-20px"
// }}
payload={
testMeasurments.map(
item => ({
id: item.name,
color:item.fill,
type: "circle",
value: `${item.name}` +" " + `${item.value}measurments` ,
})
)
}
>
</Legend>
{testMeasurments.map((s) =>
<Pie
dataKey="value"
isAnimationActive={false}
data={s.data}
outerRadius={100}
innerRadius={70}
fill="fill"
><Label value={value} position="center" />
</Pie>
)}
</PieChart>
</ResponsiveContainer>
</Col>
</Row>
old question but this might help someone. You can customise the legend using the content prop, you can check the doc
const renderLegend = (props) => {
const { payload } = props;
return (
<div style={{display: 'grid', gridTemplateColumns: 'max-content max-content', gap: '1em'}}>
{
payload.map((entry, index) => (
<div>entry.value</div><div>measurments</div>
))
}
</div>
);
}
<Legend content={renderLegend} />
You could use CSS to target each li item in the legend.
Recharts uses the class ".recharts-legend-item".
.recharts-legend-item {
margin-bottom: 10px;
}
Related
So I created a large list and I can get it to display and all that, but I need it to be editable....
so far I've tried:
putting in an html input tag, which does display but I can't even get the cursor to show in the field when clicking on it.
putting in a TextField element from material-ui... same thing can't edit it, though it does show
I'm not sure if editable fields or even buttons are possible within react-virtualized. Would anybody know? Two images are below of what it looks like now, and what I need it to look and function like
Here is the react-virtualized code
<div style={{ width: "100%", height: "100vh" }}>
<AutoSizer>
{({ width, height }) => (
<List
width={width}
height={height}
rowHeight={cache.current.rowHeight}
deferredMeasurementCache={cache.current}
rowCount={downloadedData.length}
rowRenderer={({ key, index, style, parent }) => {
const translation = downloadedData[index];
return (
<Table
width={width}
height={height}
headerHeight={20}
rowHeight={90}
rowCount={downloadedData.length}
rowGetter={({ index }) => downloadedData[index]}
>
<Column
dataKey="key"
label="Key"
width={.5 * width}
style={{ backgroundColor: 'red', display: 'none ' }}
/>
<Column
dataKey="value"
label="Value"
width={.5 * width}
style={{ backgroundColor: 'blue' }}
/>
</Table>
);
}}
/>
)}
</AutoSizer>
</div>
What it looks like
What I need it to look like
The default is [+] and [-].
and i want to increase this button size.
but i can't find the way in antd v.3.6.x...
Could not find a way to change it for more big size?
Thank you!!!
For antd version 3.6.x (for v3.1.x)
You can customize the css class .ant-table-row-expand-icon
.ant-table-row-expand-icon{
height: 25px;
width: 25px;
font-size: 30px;
}
Screenshot
For antd version 4.x
You can use expandIcon property to resize or change the icon, increase the fontSize to increase size of the icon
<Table
columns={columns}
expandable={{
expandedRowRender: (record) => (
<p style={{ margin: 0 }}>{record.description}</p>
),
rowExpandable: (record) => record.name !== 'Not Expandable',
expandIcon: ({ expanded, onExpand, record }) =>
expanded ? (
<MinusOutlined
style={{ fontSize: '20px' }}
onClick={(e) => onExpand(record, e)}
/>
) : (
<PlusOutlined
style={{ fontSize: '20px' }}
onClick={(e) => onExpand(record, e)}
/>
),
}}
dataSource={data}
/>
Screenshot
Antd Version < V4.x, you have to change the antd css directly.
Antd Version > V4.x. You can refer to the Ant Desing Doc codepen and style the expandIcon you want.
<Table
columns={columns}
dataSource={data}
expandable={{
expandedRowRender: record => (
<p style={{ margin: 0 }}>{record.description}</p>
),
expandIcon: ({ expanded, onExpand, record }) =>
expanded ? (
<MinusCircleTwoTone style={{ fontSize: "150%"}} onClick={e => onExpand(record, e)} />
) : (
<PlusCircleTwoTone style={{ fontSize: "150%"}} onClick={e => onExpand(record, e)} />
)
}}
codepen: https://codesandbox.io/s/fervent-bird-nuzpr?file=/index.js:1270-1684
I am trying to generate a dropdown with React semantic UI - Dropdown using an Array of numbers.
Below is my Code:
render() {
const myrange = [100, 200,300,500,1000,2000,3000,5000,7500,10000,15000, 20000, 25000];
return (
<React.Fragment>
<List horizontal relaxed>
<List.Item>
<Checkbox
style={{ paddingLeft: "1em", paddingBottom: "1em" }}
label={this.props.title}
checked={this.props.checked}
onChange={this.props.handleChange}
/>
<List.Content>
<Dropdown
placeholder="Select"
fluid
search
selection
options={myrange.map(merange => ({ label: { merange },
}))}
// onChange={this.props.handleChange("category")}
/>
The dropdown looks like the screenshot:
This code works and generates a list of blanks, would be nice to get the numbers displayed in the dropdown list ...
Any help will be highly appreciated here.
return (
<React.Fragment>
<List horizontal relaxed>
<List.Item>
<Checkbox
style={{ paddingLeft: "1em", paddingBottom: "1em" }}
label="LABEL"
checked='checked'
// onChange={this.props.handleChange}
></Checkbox>
<List.Content>
<Dropdown
placeholder="Select"
fluid
search
selection
options={myrange.map(merange => ({key: merange, text:merange, value: merange }))}
/>
</List.Content>
</List.Item>
</List>
</React.Fragment>
)
Like that.
I am trying to reduce gap between stars but no luck.
Code below for your ref
<MuiThemeProvider >
<Rating
onChange={() => console.log('onChange')}
value={4}
max={5}
iconFilled={<ToggleStar color={colors.green500} />}
iconHovered={<ToggleStarBorder color={colors.green500} />}
iconNormal ={<ToggleStarBorder color={colors.black300}/>}
className={classes.Rating}
spacing ={0}
onChange={(value) => console.log(`Rated with value ${value}`)}
/>
</MuiThemeProvider >
How can I resolve this?
Use the itemStyle and itemIconStyle props:
const smallDistanceStyle = {
width: 30,
height: 30,
padding: 5
}
const iconStyle = {
width: ...,
height: ...
}
<Rating
itemStyle={smallDistanceStyle}
itemIconStyle={iconStyle}
...
/>
I know this question was asked a while ago, but I found that
<Rating
value={5}
readOnly
sx={{
fontSize: "5rem",
"& .MuiRating-icon": {
width: '4.5rem'
}
}}
icon={<StarRateIcon fontSize="5rem" sx={{ color: "black" }} />}
/>
worked for me. It was able to bring the stars a little closer together.
<Stepper linear={false} activeStep={1}>
<Step key={1}>
<StepButton
icon={<LensIcon color={grey300} children={<p>2</p>}/>}
onClick={() => console.log('Clicked')}
/>
</Step>
<Step key={2}>
<StepButton
onClick={() => console.log('Clicked')}
/>
</Step>
</Stepper>
Hey if i add a custom icon i lose the number of the steps, i want to be able to add colors to indicate the status of the steps. but if i introduced my own icons i lose the numbers.
please adviced how to have both? thanks.
You can put the LensIcon and a step number label inside a div and float the label on top using absolute positioning. Here's a little "StepIcon" component that does the job:
const StepIcon = ({ label, color = colors.grey300, textColor = colors.lightBlack }) => (
<div style={{ position: 'relative' }}>
<LensIcon color={color} />
<div style={{ color: textColor, position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', textAlign: 'center', lineHeight: '24px' }}>{label}</div>
</div>
);
Usage (can use numeric or string labels):
...
<Step key={1}>
<StepButton
icon={<StepIcon label={1} />}
onClick={() => console.log('Clicked') }
/>
</Step>
<Step key={3}>
<StepButton
icon={<StepIcon label={'A'} color={colors.green500} textColor={colors.white} />}
onClick={() => console.log('Clicked') }
/>
</Step>
Here's a jsFiddle of it in action: https://jsfiddle.net/67p1w0mk/2/