The below code gives me a picture, but the legend is a bit naff.
SO won't let me upload a picture right now, but the legend is stuck in the bottom left corner... and it's tiny.
Is there a way to take control of the legend position and / or boost text size etc etc?
<div style={{height: "90vh", width: "95vw"}}>
<FlexibleXYPlot
xType="time"
colorType="category"
// onMouseLeave={this._onMouseLeave}
// style={{bottom:'50', top:'50'}}
// margin={{left: 40, right: 10, top: 30, bottom: 85}}
>
<DiscreteColorLegend
// onItemClick={this.clickHandler}
orientation="horizontal"
// width={180}
items={series.map(series => {
// console.log(series.props.colour+"");
return {title: series.props.color+"", color: series.props.color}
})
}
/>
<HorizontalGridLines/>
<XAxis top={0} title="Dates"/>
<YAxis title="Price"/>
{series}
</FlexibleXYPlot>
</div>
Try moving DiscreteColorLegend outside of FlexibleXYPlot (insted of being nested inside FlexibleXYPlot).
Related
I have a DeckGL component I'm eclosing it in a div tag and giving it size, but the deckGL layer seems to occupy the entire viewport. here is a snippet of my code.
const INITIAL_VIEW_STATE = {
longitude: 83.32247972488423,
latitude: 17.714023254029464,
zoom: 10,
pitch: 0,
bearing: 0
}
<div class="my-container">
<DeckGL initialViewState={INITIAL_VIEW_STATE} layer={layer} controller>
// here I'm putting a static map
</DeckGL>
</div>
How to render deck gl component in a specific div with a given size.
You need to add a dimension to your deck.gl container, in your example 'my-container'. Add height, width and position. Switch height and width values according to your need, but leave position with value 'relative'. In this way you can size DeckGL component and it can render fully inside your container.
Bonus: it is also responsive.
<div class"my-container" style={{ height: '50vh', width: '50vw', position: 'relative' }}
<DeckGL>
...
</DeckGL>
</div>
I am new to React and Material UI. I am struggling with how much vertical space the components take up. One thing I would like to do is decrease the height of the toolbar.
I have tried specifying the style:
<Toolbar style={{ height: '36px' }}>
I have also tried doing it this way:
const styles = {
root: {
height: 36,
}
};
<Toolbar className={classes.root} >
but neither works. Is there a different way to do this?
I tried changing the Toolbar height before too but it didn't work.
I end up just setting Toolbar variant to dense which still give me a shorter height Toolbar compared to the regular one.
<Toolbar variant="dense">
You need to change the min-height to adjust the height, as min-height is specified in material-ui.css as 64px.
const styles = {
customizeToolbar: {
minHeight: 36
}
};
<Toolbar className={classes.customizeToolbar} >
Hope this will help you.
To change height of Toolbar globally, configure this in MUI theme:
const theme = createTheme({
components: {
MuiToolbar: {
styleOverrides: {
dense: {
height: 32,
minHeight: 32
}
}
}
},
})
Then use this theme:
<ThemeProvider theme={theme}>
...
</ThemeProvider>
This way you can tune look of many Mui components in theme, and this will be applied for all elements in the <ThemeProvider/> react block.
No css tweaks for individual elements, rather do it correctly in one place by modifying theme.
It is because the default height is 64px.
To change the height you have to actually change the minHeight property.
To do that, I have used inline styling but it works with other methods too.
const toolbarStyle = {
minHeight: '80px',
};
Then in your component simply specify the stylename using style attribute
<Toolbar style={toolbarStyle}>
Hope this helps!!
i too run into a similar issue after some time i put the
min height in AppBar instead of tool bar and it worked here is my code.
return (
<AppBar position="static" sx={{ height: '70px' }} >
<Container >
<Toolbar disableGutters >
</Toolbar>
</Container>
</AppBar>
)
}
Assign minHeight value:
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
toolbar: {
minHeight: '10px',
backgroundColor: 'IndianRed'
}
}));
const classes = useStyles();
Simply specify className in your component:
<Toolbar className={classes.toolbar}>
I had buttons in my toolbar with default margin. That was preventing the Toolbar to get a height of less than 64px. After setting the button margins to 0 the problem was solved for me.
<Avatar style={{
width: 40,
height: 40,
float: 'left',
objectFit:'cover',
backgroundColor:'#aa0000',
}} src='./image/head.png'/>
The Avatar display a broken image,I don't know why?Any body any help.
imprt AvatarBg from './image/head.png'
<Avatar src={AvatarBg}/>
After use the top code it works
I'm having trouble changing the size of a google pie chart that I have made. I'm trying to draw multiple pie charts with the size of each chart proportional to the total amount of data that I'm feeding it. I am aware that we are able to change the size of the div container of the chart by adding options to the chart like as follows:
var options = {width: 400, height: 300};
However, what I'm interested in, is not changing the size of the div, but of the actual pie chart itself.
Is there any way I can change the radius of the pie chart?
I've searched around and wasn't able to find anything. Here is quick paint of what I mean:
As you can see, what I would like is for the div to remain on the same size but the size of the circle to change, depending on what value I feed it.
Any help is appreciated
try the option for chartArea
e.g.
chartArea: {width: 400, height: 300}
Try the example as below
http://jsfiddle.net/toddlevy/c59HH/
function initChart() {
var options = {
legend:'none',
width: '100%',
height: '100%',
pieSliceText: 'percentage',
colors: ['#0598d8', '#f97263'],
chartArea: {
left: "3%",
top: "3%",
height: "94%",
width: "94%"
}
};
I am using mapbox-gl-js to display a map inside of a responsive container.
Regardless of the size of the responsive container, I want the map to maintain the same resolution such that resizing the window does not affect the bounds or zoom level of the map, it simply scales the map as if it were a static image.
I achieve this by dynamically calculating the scale factor and applying it to the container via CSS transform:
#map {
width: 100%;
height: 100%;
}
#map-scaler {
width: 1280px;
height: 1280px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
transform-origin: 0 0;
}
#map-container {
background-color: #fff;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
height: 100%;
}
<div id="map-container">
<div id="map-scaler">
<div id="map"></div>
</div>
</div>
// Get size of map container for display
var mapContainer = $("#map-container");
var mcWidth = mapContainer.width();
var mcHeight = mapContainer.height();
// Get size of scaler container
var scaleContainer = $("#map-scaler");
var sWidth = scaleContainer.width();
var sHeight = scaleContainer.height();
var scaleWidth = mcWidth / sWidth;
var scaleHeight = mcHeight / sHeight;
$("#map-scaler").css("transform", "scale(" + scaleWidth + ", " + scaleHeight + ")");
This achieves the desired results visually. For example, I can have a 1280x1280 map displayed inside of a 500x500 container.
The problem is that all the mouse events are now "off". For example, if you attempt a map click or a scroll zoom, the map applies your mouse event to the wrong area of the map.
How can I compensate for my CSS transform so that mouse events accurately reflect where the user clicked?
Can you try the resize method? As mentionned in the doc, the method looks at your div width&height and resize your map. Event should be updated too.
https://www.mapbox.com/mapbox-gl-js/api/#Map#resize