I have a React component Webstats which returns a Doughnut chart from react-chartjs-2 library. Here is how the code looks like:
const Webstats = () => {
//code to create chart.
return <Doughnut data={pd} />;
}
I use this component inside another component called Dashboard. I want to display the chart alongside a Logout button. Both should be in the same row. I use flex property of css for this purpose.
const rowC = {
display: "flex",
flexDirection: "row"
};
const Dashboard = () => {
return (
<div style={rowC}>
<Webstats />
<Link to="/">
<div>
<button onClick={auth.logout}>Logout</button>
</div>
</Link>
</div>
);
};
export default Dashboard;
But the problem is that, chart size is too big as compared to logout button.
I want to make chart size small, around 30% of the width of <div style={rowC}>. I tried these things:
return <Doughnut data={pd} width="30%"/>;
and
return (
<div style={rowC}>
<Webstats width="30%" />
// rest of html
)
and also
return (
<div width="30%">
<Doughnut data={pd} />
</div>
);
But none of this gives me the desired result. How to I resize the chart to 30% of the width (and height auto adjusted) of the <div style={rowC}>?
The documentation for ChartJS states that you need to set maintainAspectRatio to false for it to use the width and height props that you pass into your chart.
In order for Chart.js to obey the custom size you need to set maintainAspectRatio to false.
<Doughnut
data={data}
width={"30%"}
options={{ maintainAspectRatio: false }}
/>
Wrap it in div Container and set width and height.
Ex:
<div style={{height:"60vh",position:"relative", marginBottom:"1%", padding:"1%"}}>
<Doughnut options={options} data={chartData} />
</div>
Doing the following works for me:
set height and width on the <Doughnut /> component.
Set the maintainAspectRation to false.
Here is what the outcome looks like:
<Doughnut
data={data}
height="200px"
width="200px"
options={{ maintainAspectRatio: false }}
/>
Related
Forgetting that this defeats the purpose of bootstrap, is it possible to fix rows so that components are not moved to the next row when windows are resized smaller? This will make sure that components all stay on the same row, and if the contents of the row exceed the width of the screen then a scroll bar on the browser will appear. I'd like to achieve this behavior without having to use a fixed px width.
Some test code:
App.js
import './App.css';
import { Image } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="App">
<div className="Test1">
<Image src='test1.jfif' />
<Image src='test1.jfif' />
<Image src='test1.jfif' />
<Image src='test1.jfif' />
</div>
<div className="Test2">
<Image src='test2.jfif' />
<Image src='test2.jfif' />
<Image src='test2.jfif' />
<Image src='test2.jfif' />
</div>
</div>
);
}
export default App;
App.css
.Test1 {
background-color: blue;
width: 1500px;
}
.Test2 {
background-color: red;
width: "100%";
}
The goal is to get the behavior of <div className="Test2"> to match the layout and behavior of <div className="Test1"> without using a fixed px width.
I have not provided all the runnable code, just the important code. Result:
This image shows the result of the code above. Note that the first row is fixed. To see the entire row, you'll have to scroll in the browser horizontally. The second row adapts to the size of the window.
There is, frankly, no need for ANY custom CSS. Bootstrap can handle it all for you. Just use its d-flex class:
function App() {
return (
<div className="App">
<div className="d-flex">
<Image src='test1.jfif' />
<Image src='test1.jfif' />
<Image src='test1.jfif' />
<Image src='test1.jfif' />
</div>
<div className="d-flex">
<Image src='test2.jfif' />
<Image src='test2.jfif' />
<Image src='test2.jfif' />
<Image src='test2.jfif' />
</div>
</div>
);
}
Sandbox: https://codesandbox.io/s/crazy-snyder-lp0lc?file=/src/App.js:180-186
You can set min-width on the particular container that you do not want to rearrange. You can also use flex or grid to achieve the same effect.
I admit I am very new to React and still getting my head around things, but I am using the react-lightbox-component to display images in a grid and that works just fine but the onClick event doesn't do anything then it calls the toggleLightBox function.
I know the onClick is working as I tested it against a simple console.log, what am I missing to be able to display the image in a lightbox when clicked?
const App = ({ compile }) => (
<div style={{margin: 20}}>
<header style={{textAlign: "center"}}>
<h1><Words animate>Art</Words></h1>
</header>
<body>
<h3>Android</h3>
</body>
<Lightbox
images={androidimages}
renderImageFunc={(idx, image, toggleLightbox, width, height) => {
return (
<img
key={idx}
src={image.src}
style={{width: '150px', height: '200px', margin: '20px'}}
onClick={
toggleLightbox.bind(null, idx)
}
/>
)
}
}
/>
</div>
);
I stuck on one problem in my project I use 2 different components one is a card and second is a chart and i show the API data on that component but when I rendering both components it will be override to each other how I can solve this problem
render() {
return (
<div style={{ display: "flex" }}>
{
this.state.data.map((item, index) => {
return <div key={index} style={{ width: "300px" }}>
<Cards value={item} title={item.bikeId} time={item.timeStamp} />
<Speedometer speed={item.speed} />
</div>
})
}
</div>
)
}
card and speedometer are two different components it will be created based on API response
By Overriding, if you mean the components are overlapping on one another, that might probably a CSS issue, try putting a <br> between both the components.
or
try increasing the width to 100% and remove that 300px
I'm recently using react-spring and it works really well but I'm having some issues when I have to apply an onClick on childs.
Here is my main structure:
<anim.button className="c"
style={{ opacity: opacity.interpolate(o => 1 - o), transform }}>
<Bar />
</anim.button>
<anim.button className="c"
style={{ opacity, transform: transform.interpolate(t => `${t}
rotateX(180deg)`) }}>
<Bar />
</anim.button>
An onClick on the anim.button would work perfectly fine of course, but that's not what I'm trying.
Here is my <Bar /> component:
const Bar = () => (
<div className="bar">
<Checkbox
onClick={() => {
set(state => !state)
}}
/>
</div>
)
I also tried using the <anim.div> instead of an <anim.button> but this gives me the same results.
Now the problem here is that it seems like react-spring puts a layer onto my <Bar /> component. Is there a way to use the onClick in my component instead of the one that is used onto anim.button?
Given that Checkbox is also a component and it might not have onClick handled try putting onClick on the wrapping div or inspect the Checkbox component.
Haven't used react-spring ever but structuring your Bar component like this may do the trick.
const Bar = (props) => (
<div onClick={() => {set(state => !state)}}>
<anim.button {...props}>
<div className="bar">
<Checkbox />
</div>
</anim.button>
</div>)
then rendering it like this:
<Bar className={'c'} style={{ opacity: opacity.interpolate(o => 1 - o), transform}}/>
<Bar className="c" style={{ opacity, transform: transform.interpolate(t => `${t}
rotateX(180deg)`) }}/>
You could rather wrap the Bar in a div: <animated.div> you are wrapping a button around a checkbox which is not great. onClick will trigger as expected.
<animated.div className="c"
style={{ opacity, transform: transform.interpolate(t => `${t}
rotateX(180deg)`) }}>
<Bar />
</animated.div>
Issue has been found and didn't actually has anything to do with react-spring.
The position absolute styling was causing this.
I am using ResponsiveReactGridLayout for resizing of paper component, but after resize i cannot able to resize the AGGrid table same as layout change width
I tried with below code and onchange of layout table is not resizing fully
<ResponsiveReactGridLayout
layouts={this.state.layout}
onLayoutChange={this.onLayoutChange}
className={this.state.className}
rowHeight={this.state.rowHeight}
cols={this.state.cols}
initialLayout= {this.state.layout}
initialWidth={this.state.initialWidth}
width={this.state.width}
verticalCompact={false}
listenToWindowResize={false}
currentBreakpoint= 'sm'
>
{this.state.response && this.state.response.data && this.state.response.data.map((data, i) =>
<Paper id='resizer' key={i} className="paper_panel">
<div style={containerStyle} className="ag-blue">
<AgGridReact
columnDefs={this.createHeader()}
rowData={this.tableData()}
onGridReady={this.onGridReady}
enableFilter
enableSorting>
</AgGridReact>
</div>
</Paper>
)}
</ResponsiveReactGridLayout>
let containerStyle = {
height:300,
width: 500
};
I need to get table to be resized according to the layout change