I've implemented a pie graph using VictoryCharts and I added tooltips...
<VictoryPie
labelComponent={<VictoryTooltip cornerRadius={0} />}
colorScale={["tomato", "orange", "gold", "cyan", "navy" ]}
padAngle={0.5}
innerRadius={100}
width={400} height={400}
style={{
labels: { fontSize: 15, fill: "black"},
data: {
fillOpacity: 0.9, stroke: "#c43a31", strokeWidth: 3
}
}}
labelRadius={90}
data = {data_distribution}
/>
The tooltips look as follows...
I want to remove the arrow and make the tooltip a regular rectangle and change the background color. Essentially I want to customize it but this has proved to be harder than I expected.
I tried creating a custom component...
class CustomFlyout extends Component {
render() {
const {x, y} = this.props;
return (
<div style={{"background": "red"}}>
<p>x</p>
</div>
);
}
}
I added to the VictoryTooltip...
<VictoryTooltip
cornerRadius={0}
flyoutComponent={<CustomFlyout/>}
/>
However, this does nothing. I cannot figure out how to make a customized tooltip.
You can customize VictoryTooltip and set the style you need like this ..
<VictoryTooltip
cornerRadius={0}
pointerLength={0}
flyoutStyle={{
stroke: "none",
fill: "blue"
}}
/>
See this example
Related
Here is my code. I have tried to use the material icon(PhoneInTalk) inside Tooltip's title attribute. But my process seems not working.
Here is my output:
enter image description here
//#material-ui/core/styles
const CustomTooltip = withStyles({
tooltip: {
color: "tomato",
backgroundColor: "black",
fontWeight: "bold",
fontSize: "12px",
},
})(Tooltip);
//JSX
<CustomTooltip
title={`${(<PhoneInTalk />)} Let's talk`}
placement="top-end"
arrow
>
<Avatar className={classes.avatar} src={avatar} alt="Ibrahim Kaiser" />
</CustomTooltip>
Try enclosing the icon and text in a fragment.
<CustomTooltip
title={<><PhoneInTalk /> Let's talk</>}
placement="top-end"
arrow
>
Check this example sandbox link
I'm new to react and I have created a modal and used react-chips for showing suggestions, but I wasn't able to change the field styling the same way I changed it for the subject input field. I've tried styling but I'm unable to change the styling of the react-chip.
Here is the code:
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
chips: []
};
}
onChange = chips => {
this.setState({ chips });
};
render() {
return (
<Container>
<Modal trigger={<Button>Show Modal</Button>}>
<Modal.Content>
<Form>
<strong>Email</strong>
<Chips
className="f_input"
value={this.state.chips}
onChange={this.onChange}
suggestions={["Your", "Data", "Here"]}
/>
<Form.Field
transparent
className="f_input"
control={Input}
label="Subject"
/>
<TextArea placeholder="Email Format" />
</Form>
<Button>Send</Button>
</Modal.Content>
</Modal>
</Container>
);
}
}
Here is the Code: https://codesandbox.io/s/boring-yalow-sx678
Can anyone help me in this query?
The library encourages styling the chips using the chipTheme prop;
Here is for example how you can add some custom styling to the chips in the example you provided:
<Chips
className="f_input"
value={this.state.chips}
onChange={this.onChange}
suggestions={["Your", "Data", "Here"]}
chipTheme={{
chip: {
color: "white",
background: "blue",
borderRadius: 20
},
chipRemove: {
fontWeight: "bold",
cursor: "pointer",
color: "green",
":hover": {
color: "yellow"
}
}
}}
/>
UPDATE
In case you would like to style the chips-container and input you should use the theme prop.
In your case you should override the chipsContainer style with the following properties in order to get an underline similar to the one you have on the "subject" input :
border: "none",
borderBottom: "1px solid black",
marginBottom: 14,
Here is your forked sandbox with the solution.
And here is a reference to the default theme objects which you can override.
Is there a clear/easy way to control Tooltip's distance from the anchor element? The default positioning does not fit well for my case, the tooltip is too close to the anchor. I have checked all the props of it and PopperProps no visible option to do that.
You can customize the tooltip's margin using withStyles.
In my case (Material-UI 3), the tooltip was too far away from the anchor.
Here is what I needed :
const StyledTooltip = withStyles({
tooltipPlacementTop: {
margin: "4px 0",
},
})(Tooltip);
I targeted tooltipPlacementTop because it was the rule name when using the placement="top" prop.
You can find the adequate rule names in the Tooltip API documentation.
Last tip: I used the PopperProps={{ keepMounted: true }} prop to see in my navigator's inspector what CSS was applied to the tooltip.
Hope it helps.
For Material-UI V.5 it could be done like this:
<Tooltip
PopperProps={{
modifiers: [
{
name: "offset",
options: {
offset: [50, 0],
},
},
],
}}
.......
Follow up with Hugo's suggestion, since the tooltip position is absolute, instead of changing the margin I changed the anchor position by adjusting the properties right and top like so:
const StyledTooltip = withStyles({
tooltipPlacementTop: {
right: "1px",
top: "8px",
},
})(Tooltip);
It works as I expected. You can use left or right to adjust the tooltip horizontal position accordingly.
I was using material ui styled to adjust my tooltip properties. I used the normal theme which is available in the MUI documentation.
const LightTooltip = styled(({ className, ...props }) => (
<Tooltip {...props} classes={{ popper: className }} />))(({ theme }) => ({
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11
},}));
I tried to adjust the position property with Mui styled, but it wasn't working.
I fixed it with my external style sheet.
.MuiTooltip-popper {
inset: -25px auto 0px auto;}
In Material-UI v4, you can add margin via style prop in the PopperProps.
<Tooltip
placement="bottom"
title="hello"
PopperProps={{ style: { marginTop: -12 } }}
>
<div>Some text</div>
</Tooltip>
I'm using Material-UI 4.x version and changed tooltip distance from the anchor using following style
const HtmlTooltip = withStyles(theme => ({
arrow: {
'&::before': {
color: 'white'
}
},
tooltip: {
backgroundColor: '#f5f5f9',
boxShadow: theme.shadows[8],
color: 'rgba(0, 0, 0, 0.87)',
fontSize: 14,
maxWidth: 800,
padding: 0,
},
tooltipPlacementTop: { // this part will change the distance
margin: '4px 0',
},
}))(Tooltip)
you can set it through the style prop
<Tooltip style={{ padding: '4px 0'}} > {children} </Tooltip>
I am leveraging VictoryCharts to add charts to my React app. I am trying to accomplish something like:
I combed through the docs and was not able to find a way to add Labels to a single bar chart.
Things I have tried
Nesting <VictoryLabel> andunder``` --> The axes show up and the docs recommend using VictoryGroup
Nesting <VictoryLabel> andunder``` --> VictoryGroup does not support VictoryLabel
Tried making a standalone <VictoryBar> & <VictoryLabel> and embedding it into <svg> --> Cannot see the chart contents on the page
This is the snippet I have right now:
import Box from '#material-ui/core/Box';
import React from 'react';
import { VictoryAxis, VictoryBar, VictoryChart, VictoryContainer, VictoryLabel, VictoryTheme } from 'victory';
const SampleChart = ({ stat=25, title = 'Sample' }) => (
<Box ml={5}>
<svg height={60} width={200}>
<VictoryLabel text={title.toLocaleUpperCase()} textAnchor='start' verticalAnchor='end' />
<VictoryBar
barWidth={10}
data={[{ y: [stat], x: [1] }]}
domain={{ y: [0, 100], x: [0, 1] }}
horizontal
labels={d => d.y}
labelComponent={
<VictoryLabel verticalAnchor='end' textAnchor='start' />
}
standalone
style={{ parent: { height: 'inherit' } }}
theme={VictoryTheme.material}
/>
</svg>
</Box>
);
ReactDOM.render(<SampleChart />, document.querySelector("#app"))
<div id='app'></div>
You could use an axis to this effect like so:
const CHART_WIDTH = 800;
const val = 28
function BarChart() {
return (
<div style={{ width: CHART_WIDTH }}>
<VictoryChart height={200} width={CHART_WIDTH}>
<VictoryAxis
dependentAxis
tickValues={[0,100]}
offsetY={190}
tickFormat={t => t===0 ? 'average age' : val}
style={{axis: { stroke: 'none'}}}
/>
<VictoryBar
barWidth={10}
data={[{ y: [45], x: [1] }]}
domain={{ y: [0, 100], x: [0, 1] }}
horizontal
/>
</VictoryChart>
</div>
);
}
https://codepen.io/anon/pen/RmaxOd?editors=0110#0
Not exactly what you wanted, but it gets the job done, and you can format the tick labels or provide custom components to make it look like your desired result.
I am trying to customize Material-UI StepConnector with classes, but it seems to not work.
I use material-ui 1.4.0
Here is how I try to do it.
<Stepper
connector={
<StepConnector
classes={{
completed: { borderColor: "red" },
line: { borderColor: "red" }
}}
/>
}
activeStep={activeStep}
orientation="vertical"
>
Here is demo https://codesandbox.io/s/oxrw7ryy7z
As you can see the StepConnector color does not change at all.
The StepConnector doesn't have a complete class in v1.4.0, documentation for v1.4.0: https://v1-4-0.material-ui.com/api/step-connector/
If you want to change the color of the wole line try this:
// In your style
contentRoot: {
borderColor: 'red',
},
connectorLine: {
borderColor: 'red',
},
...
<StepConnector
classes={{
line: classes.connectorLine
}}
/>
...
<StepContent
classes={{
root: classes.contentRoot,
}}
>
Demo: https://codesandbox.io/s/p9wj1498yx
Add a new class in your styles:
connector: {
borderLeft: "1px red solid"
}
And then use it in your component:
<StepConnector
classes={{
line: classes.connector
}}
/>
The completed class does not appear to be a class that can be overriden in this version.