I want that the background grid starts at the same time that the line starts. I can't seem to separate the grid lines from vertical axis.
but I have tried several different things padding, margin... in the different styles options such as grid and axis.
<VictoryChart domainPadding={10}> {/* Y-Axis */} <VictoryAxis dependentAxis width={400} height={400} offsetY={200} standalone={false} tickFormat={(t) =>${t}`}
style={{
axis: {
stroke: theme.colors.grey,
},
axisLabel: {
fontSize: theme.sizes.fontSizes.bodySmall,
padding: theme.spaces.medium,
},
grid: {
stroke: theme.colors.grey,
strokeDasharray: 4,
},
tickLabels: {
fontFamily: theme.fonts.regular.fontFamily,
fontSize: theme.sizes.fontSizes.bodySmall,
padding: theme.spaces.moderate,
fontStyle: theme.fonts.regular.fontWeight,
},
}}
/>`
Okay, I figured it out.
one solution to offset the grid line you need to access the grid property and use transform:
grid: {
stroke: theme.colors.grey,
strokeDasharray: 4,
transform: 'translateX(2.5%) scale(0.95,1) '
},
Related
I'm trying to show more details and scale a component when hovered, but it displaces the surrounding components in doing so.
See screenshot:
Here's the sx I assigned to an MUI Box and Card.
const ctCardHoveredSx = {
maxWidth: 300,
'& .ct-card-toggle': {
display: 'none'
},
'&:hover .ct-card-toggle': {
display: 'flex'
},
'& .ct-card': {
transition: 'transform 0.15s ease-in-out',
boxShadow: 'none'
},
'&:hover .ct-card': {
transform: 'scale3d(1.25, 1.25, 1)',
boxShadow: '5',
zIndex: 2
}
};
Tech Stack:
NextJS
MUI
React
I think you need to use overflow hidden in the parent div and it will not displace the thing and hover will just get scale inside the same div.
Please let me know if you find any issues.
I am using the MUI-Slider component in React to display a value. I would like to customize the 'thumb'/valueLabel so the font and thumb are much larger. I read MUI's documentation on updating the CSS to customize the thumb with limited success. My slider looks like this currently. The thumb and dot are blue, but everything else is grey. The font is still very small.
Here is my React component:
Note: the sx usage is copied directly from the MUI documentation.
import { Slider } from '#material-ui/core';
<Slider
disabled
min={0}
max={100}
value={50}
marks={[
{ value: 0, label: '0' },
{ value: 100, label: '100' },
]}
aria-label="Conviction Score"
color="primary"
sx={{
'& .MuiSlider-thumb': {
borderRadius: '1px',
},
}}
valueLabelDisplay="on"
orientation="vertical"
valueLabelFormat={value => `${value.toFixed(1)}`}
></Slider>
I added this to my SCSS. Clearly I can change the thumb color but not any of the font attributes.
color:#0d47a1;
font-size: 20px !important;
font-weight: bold !important;
}
What am I doing wrong? Is there any way I can do this with just CSS?
Use this in your sx in the Slider component to replace the one you have now.
sx={{
"& .MuiSlider-thumb": {
borderRadius: "1px"
},
"& .MuiSlider-valueLabelLabel": {
fontSize: "20px",
fontWeight: "bold",
color: "#0d47a1"
}
}}
I have a problem with the style of my Highcharts 3D pie chart -
it does not fit with dark theme.
How can I change the style of the title and the background of the tooltip?
You need to add property style with property color for it.
This will help:
https://api.highcharts.com/highcharts/tooltip.style
tooltip: {
backgroundColor: 'red',
borderWidth: 1,
shadow: true,
useHTML: true,
style: {
padding: 0,
color: 'grey'
}
},
If you're going to switch themes based on your website theme, you can use Highcharts.theme. Or you can set title color and tooltip background color manually by using the following.
Highcharts.chart('container', {
title: {
style: {
color: '#FF0000',
fontWeight: 'bold'
}
},
tooltip: {
backgroundColor: '#00000050'
},
...
});
I'm developing with react and MaterialUI on the front end and I have a bunch of customized inputs. Everything is working pretty well except for this one. No matter what combination of selectors I use I can't seem to point to the right one to change this black color.
Also, it'd be nice to have a clear way to identify just by looking at the element selector, to drill down into the right component. Is there anyway to do this (teach a man to fish kind of thing).Here is the image of the element when I inspect it and the color I'm trying to get at.
here is the style object:
toggleToUse = {
switchBase: {},
thumb: {
color: colorUsedByInputs,
opacity: 0.6,
marginLeft: '10.2px'
},
track: {
background: 'grey',
opacity: '1 !important',
borderRadius: 20,
position: 'relative',
'&:before, &:after': {
display: 'inline-block',
position: 'absolute',
top: '50%',
width: '50%',
transform: 'translateY(-50%)',
color: '#fff',
textAlign: 'center'
}
},
checked: {
'&$switchBase': {
color: '#185a9d',
transform: 'translateX(32px)',
'&:hover': {
backgroundColor: 'rgba(24,90,257,0.08)'
}
},
'& $thumb': {
backgroundColor: '#fff'
},
'& + $track': {
background: 'linear-gradient(to right, rgba(43, 56, 97, 0.7), #2b3861)',
'&:before': {
opacity: 1
},
'&:after': {
opacity: 0
}
}
}
};
Here is the image of the element when I inspect it and the color I'm trying to get at.
<Switch classes={{ track: classes.track }} />
track: {
'.Mui-disabled + &&': {
backgroundColor: 'hotpink',
},
},
This will work for a default MUI Switch. If needed, you can increase the specificity by adding additional & to the selector. If all fails, please provide a codesandbox and precisely state what color you want in which scenario.
My DOM is something like this:
wrapper
-element-container
--element (many)
---iconButton
Whenever an element is near the border of the element-container, the tooltip render is cut-off at the bounds of element-container.
How can I ensure tooltips always appear on top?
Here my current in-line styles:
element-container: {
paddingTop: '15px',
height: '65vh',
overflowY: 'scroll',
},
element: {
border: this.props.isSelected ? '4px solid #E71E61' : 'none',
boxSizing: 'content-box',
width: '300px',
transition: 'width 1.5s',
height: '500px',
margin: '15px',
position: 'relative',
},
iconButton: {
position: 'absolute',
marginTop: '-30px',
marginLeft: '-30px',
transform: this.state.isMouseOver === true ? 'scale(1,1)' : 'scale(0,0)',
transition: 'all .2s',
},
icon: {
height: '40px',
width: '40px'
},
I've tried:
setting the zIndex of both the tooltip (via the tooltipStyle prop of IconButton
changing the position of each element to different values (since this issue indicates position affects zIndex)
overwrting the entire tooltipStyle with the default style found in the MUI source code
ETA: Here's a screen shot of the issue I'm describing. My screenshot app doesn't capture the pointer, so I've drawn one to indicate that the mouse is over the grey circle button.
The cut-off tooltip is the dark box with the letters 'ing' visible. While this pic shows cut-off on the left side of the container, all sides behave the same.