Utilizing Leaflet maps alongside recharts in a ReactJS environment, I have an issue where the PopUp displaying six charts vertically when clicking on a map marker. My goal is to style these charts into groups of two, arranged in three lines.
https://i.sstatic.net/khHi8.jpg
I am seeking guidance on how to use CSS to achieve this desired styling effect.
The code snippet in question is depicted below:
{coords.map(({ lat, lng }, index) => (
<Marker position={[lat, lng]} icon={customMarker} key={index}>
<div className="popup">
<Popup maxWidth="500" maxHeight="auto" >
{index + 1} is for popup with lat: {lat} and lon {lng}
...
</Popup>
</div>
</Marker>
))}
</LeafletMap>
In order to integrate the desired grouping of <ComposedChart/> elements, two per line within three rows, I have attempted implementing CSS styles by importing an external stylesheet as shown below:
.popup {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: space-between;
height: 100%;
}
.chart {
width: 40%;
}
Despite applying these CSS rules, I am unable to observe the intended changes in the chart layout.