I am new to React and would like to change the position of the labels for the Doughnut chart from PrimeReact(https://www.primefaces.org/primereact/#/doughnutchart).
I checked the link(https://www.chartjs.org/docs/latest/charts/doughnut.html) which primereact internally used for chart and find no option to change position etc. Is there a way to achieve?
I also would like to have some text at the center of the doughnut.
TIA
Here is the Chart jsx:
const option = {
maintainAspectRatio: false,
responsive: false,
legend: {
position: 'left',
labels: {
boxWidth: 10
}
}
}
Apply above option to Chart
<Chart
style={{ width: "90%", height: "90%" }}
type="doughnut"
data={data}
options={option}
/>
The answer from user578219 was perfect for my problem as well. I am also looking for the option to include a label in the center of the doughnut - is there anywhere that I can find a list of the options that can be used?
Related
The MUI examples only teach how to choose between a defined number of colors.
I would like to be able to choose among all the possible colors.
Example:
We have a cell value between 0 and 100. Each value could be converted to a color thanks to a given function. Then, the color is applied to the color.
How would you proceed please?
Solution from #jacob smith is working:
Use the renderCell to wrap your value with a div or similar and style that as you need, you should be able to use this in combination with cellClassName to get the div to fill the whole cell.
You would need something similar to the following in the column definition:
cellClassName: (params: GridCellParams<number>) => {
return "super-app";
},
renderCell: (params: GridRenderCellParams) => {
const color = getColor(params.value);
return (
<Box
sx={{
backgroundColor: color,
width: "100%",
height: "100%"
}}
>
{params.value}
</Box>
);
}
Here is a codesandbox example
I see that there are filterIcon, menuIcon and menuIconButton properties, but I do not have any idea how to apply them.
<DataGrid
rows={rows}
columns={columns}
rowsPerPageOptions={rowsPerPage}
disableSelectionOnClick
// should be some stuff here
/>
I have tried this approach. First define the styles
const styles = theme => ({
activeSortIcon: {
opacity: 1,
color : 'blue',
},
inactiveSortIcon: {
opacity: 0.4,
color : 'green',
},
});
Then use these styles in DataGrid component according to your logic how to use it
<DataGrid
rows={rows}
columns={columns}
rowsPerPageOptions={rowsPerPage}
disableSelectionOnClick
classes={{
icon: ((orderBy === column.id) ? classes.activeSortIcon :
classes.inactiveSortIcon )
}}
// should be some stuff here
/>
You can add different icons in styles instead of colors using this approach. Hope this approach might be helpful. Please let me know if this worked.
Reference : How to change the style of sorting icon in Material UI table?
For those still interested in styling the MUI-data grid icons, you can also utilize a styled component vs. using classes.
const StyledDataGrid = styled(DataGrid)((theme) => ({
"& .MuiDataGrid-sortIcon": {
opacity: 1,
color: "white",
},
"& .MuiDataGrid-menuIconButton": {
opacity: 1,
color: "white"
},
}));
Now you return your styled component since we've declared the styles accordingly:
<StyledDataGrid
rows={x}
columns={columnDef}
autoHeight
...more stuff if you want...
/>
There you go! You don't need to declare classes or anything.
Also, the styled component allows you to style everything in the data grid with the proper referencing (MuiDataGrid-columnHeaders, MuiDataGrid-columnHeaderTitle, Mui-selected, etc.)
Feel free to take a look at this explanation on MUI styled components:
https://mui.com/system/styled/
Is it possible to display a grid like this using Victory charts?
So far I can only get a grid with both vertical and horizontal lines on top of my bars likes this:
The horizontal bars can be removed by removing stroke style.
The vertical bars which I wanted to keep can be 'moved' behind by changing the order of the elements as noted here: https://formidable.com/open-source/victory/guides/layout/#svg-render-order
By providing
style={{
grid: { stroke: '#ddd444', strokeWidth: 1.5 },
}}
to your dependant axis like
<VictoryAxis
dependentAxis
tickFormat={(tick) => `${tick}`}
style={{
grid: { stroke: '#F4F5F7', strokeWidth: 0.5 },
}}
/>
you will achieve desired result.
I am using the Autocomplete component from the Material UI (v0.20.0) component library in ReactJS project. I have tried finding an implementation for this functionality but haven't come across a good example. I want to be able to highlight/format the text that the user enters in the search results similar to the attached image.
If you are using Material-ui v0.xx then please take a look at below example.
To apply styles to user entered text you have to use inputStyle prop as like below.
Also I have mentioned the other styles for floating label, underline, hint text etc which may help community.
const styles = {
floatingSearchLabelStyle: {
color: '#fff',
fontFamily: 'Open Sans","Helvetica Neue",Helvetica,Arial,"Lucida Grande'
},
inputSearchStyleText: {
color: '#fff'
},
underlineSearchStyle : {
borderColor: '#fff'
},
hintSearchStyle: {
color: '#fff'
}
}
<AutoComplete
floatingLabelText="Search people"
hintText="Search with name"
dataSource = {dataSource}
style={{marginTop: '-20px'}}
maxSearchResults={10}
anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}
animated={true}
onNewRequest= {this.handleNewRequest}
onUpdateInput={this.handleUpdateInput}
filter={AutoComplete.fuzzyFilter}
inputStyle={styles.inputSearchStyleText}
underlineStyle={styles.underlineSearchStyle}
underlineFocusStyle={styles.underlineSearchStyle}
hintStyle={styles.hintSearchStyle}
floatingLabelStyle={styles.floatingSearchLabelStyle}
/>
Hope this answer helps you if you are using material-ui v0.xx.
I am trying to render the background color on certain columns a certain color, in my react-data-grid (adazzle).
The problem is that I am getting this white padding around my cells :
How do I get rid of this white padding?
I simply followed the way the formatter was used in this example :
http://adazzle.github.io/react-data-grid/examples.html#/custom-formatters
My ColumnFormatter looks like this :
const ColumnFormatter = React.createClass({
propTypes: {
value: React.PropTypes.number.isRequired
},
render() {
return (
<div style={{background: '#f2f9de'}}>
{this.props.value}
</div>);
}
});
And I set up my columns like this :
this._columns.push({
key: i,
name: "blah " + i,
sortable: true,
resizable: true,
formatter: ColumnFormatter
})
this is a simple way but may not work exactly how you want...
somefile.js
<div id="someTableId">
<ReactDataGrid
...
/>
</div>
somefile.css...
#someTableId div.react-grid-Row div.react-grid-Cell:nth-of-type(1),
#someTableId div.react-grid-Row div.react-grid-Cell:nth-of-type(2){
background-color: #f2f9de;
}
also, i like to make things simple when i do a react-data-grid cell formatter (note: with the css way above you don't need the formatter but just to show how i simplify formatters or if you do it another way with a formatter)...
this._columns.push({
key: i,
name: "blah " + i,
sortable: true,
resizable: true,
formatter: (props)=>(<div style={{background: '#f2f9de'}}>{props.value}</div>;
})
and actually i would have done a className instead of style and used a css file but that just what i prefer.
In the formatter you can give the background as you are giving right now but you can add a css like this in your custom css file:
#parentDivOfGrid div.react-grid-Row div.react-grid-Cell {
padding-left: 0px ;
padding-right: 0px;
line-height: 2.1;
text-align: center;
}
But your React data grid should be inside a div like this:
<div id="parentDivOfGrid">
<ReactDataGrid
...
/>
</div>
You might want to play around with the line height value in css according to your grid.
both of the answers here seem to apply highlighting to all of the cells. How would I go about selectively highlighting cells perhaps by specifying class names
Set the root div style to -8 margin left and right, and 8 padding left and right
return (
<div style={{
background: '#f2f9de',
marginLeft: -8,
marginRight: -8,
paddingLeft: 8,
paddingRight: 8}}>
{this.props.value}
</div>
);
Try loosing the formatter altogether, in this simple example. Create a class in the css file. Set the cellClass equal to the class you just created. The background of the column should be fully colored. Both the value and the padding.
My environment:
"react": "^17.0.2",
"react-data-grid": "^7.0.0-beta.7",
app.css
.green {
background-color: green;
}
app.js
this._columns.push({
key: i,
name: "blah " + i,
sortable: true,
resizable: true,
cellClass: 'green`
})