This is my jsfiddle url. Could you help to find out why the border of legend can not display in this chart. The legend related code was copied from official document site.
Below is my legend component.
<VictoryLegend x={75} y={0}
title="Legend"
centerTitle
orientation="horizontal"
gutter={20}
style={{ border: { stroke: "black" }, title: { fontSize: 20 } }}
data={legendData}
/>
https://jsfiddle.net/xuhang1128/xwy8j4fw/1/
Related
I am using the default stack from react navigation, and in my navigator screen options I have my own custom header header: (props) => <Header props={props} />. In my screen, I have a background colour, and in my SafeAreaView I have a background colour. For illustration I have set them both to the same.
In my custom header I am applying margin of 15 horizontally as well as to the top. So it is the colour underneath the custom header.
My question is this: Where is this header background colour being set? (the light grey one)
Here you can see what I mean
I have tried headerStyle {backgroundColor}, but no difference (i believe because using header overrides a lot of these options? Unsure though as it is not stated in the documentation.)
For reference, I am basing it off of this documentation: https://reactnavigation.org/docs/native-stack-navigator/#options
However it appears that this background colour is being set somewhere else entirely? And so I'm not sure where.
I realize setting headerTransparent and applying margin for each screen is a viable solution but I figure there is a better way to simply set the background colour of this space correctly.
edit with header component:
export default function Header({ props }) {
const { navigation, route, options, back } = props;
const title = getHeaderTitle(options, route.name);
return (
<View style={styles.header}>
<View style={styles.container}>
{back && (
<IconButton
type="ion"
name="chevron-back"
size={26}
iconStyle={styles.backButton}
onPress={navigation.goBack}
/>
)}
<Text style={styles.title}>{title}</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
width: screenWidth - 30,
height: 60,
borderRadius: 10,
padding: 15,
marginTop: 15,
backgroundColor: colors.white,
alignSelf: "center",
flexDirection: "row",
alignItems: "center",
},
backButton: {
zIndex: 1,
},
title: {
flex: 1,
textAlign: "center",
flexDirection: "column",
fontSize: 24,
fontWeight: "bold",
// marginLeft: -26,
},
header: {
backgroundColor: colors.neutral95,
},
});
I used card component from ant ui, I changed the color of the background and text color in it, but the divider color inside the card is not changing, is there a way to change the color of the divider inside the card component?
here is the code for card
<div>
<Card
title={
<Title level={5} style={{ color: 'white' }}>
Avi-Todo - 1
</Title>}
bordered={false}
style={{ width: 600, margin: '10px 0px', background: '#292929', color: 'white' }}
extra={<Title level={5} style={{ color: 'white' }}>16-April-22 10:25 AM</Title>}>
<p>{this.props.ptodo}</p>
</Card>
</div>
here is how it looks
How to change the divider color inside that card component?
Create a css file and add the following
.ant-card-head {
border-bottom: 1px solid #f41d1d;
}
I am trying to increase the line spacing in my Highcharts tooltip in styled mode. I have tried using CSS to set line-height on the .highcharts-tooltip as well as its text and tspan elements:
.highcharts-tooltip,
.highcharts-tooltip text,
.highcharts-tooltip tspan
{
line-height: 40px;
}
I have also tried using the tooltip.style option:
tooltip: {
style: { lineHeight: 40 }
}
Neither approach has any effect in styled mode. Has anyone managed to make this work?
You need to enable useHTML property for a tooltip.
tooltip: {
useHTML: true,
...
}
CSS:
.highcharts-tooltip {
line-height: 40px;
}
Live demo: http://jsfiddle.net/BlackLabel/893k5cnL/
API Reference: https://api.highcharts.com/highcharts/tooltip.useHTML
Currently, the placeholder and the text inside the Input is aligned near to bottom. I want to vertically align this. In android, it is exactly at the center. But in IOS, it is some margins below the center near to the bottom.
const styles = {
formTextStyle: {
paddingLeft: 17,
fontSize: 17,
fontWeight: 'bold'
},
ItemStyle: {
margin: 5,
backgroundColor: '#fff'
}
};
export const CustomAuthInput = props => (
<Item style={styles.ItemStyle} rounded>
<Input
style={styles.formTextStyle}
autoCorrect={false}
{...props} // doing this provides better control
/>
</Item>
);
Some datalabels in my barchart aren't shown: Only one datalabel is shown at the categories "Wohnung Zustand", "Wohnumfeld" and "Wohn- und Nebenkosten".
My current solution is to chose a smaller font-size
dataLabels: {
style: {
fontSize: '7pt',
fontFamily: '"Tahoma"',
fontWeight: 'normal'
}
but now the label is hard to read. I'd like to have a bigger font-size and overlapping labels, but my overflow and crop-settings don't work.
There is an allowOverlap-setting: the chart with overlapping datalabels..
dataLabels: {
enabled: true,
allowOverlap: true,
}