Is it possible to display a grid like this using Victory charts?
So far I can only get a grid with both vertical and horizontal lines on top of my bars likes this:
The horizontal bars can be removed by removing stroke style.
The vertical bars which I wanted to keep can be 'moved' behind by changing the order of the elements as noted here: https://formidable.com/open-source/victory/guides/layout/#svg-render-order
By providing
style={{
grid: { stroke: '#ddd444', strokeWidth: 1.5 },
}}
to your dependant axis like
<VictoryAxis
dependentAxis
tickFormat={(tick) => `${tick}`}
style={{
grid: { stroke: '#F4F5F7', strokeWidth: 0.5 },
}}
/>
you will achieve desired result.
Related
I'm looking to stretch my SVG image along the horizontal axis, which is acting as a background for some HTML divs. It is a simple bar that takes up the middle third horizontally :
It must not move on the vertical, and when horizontal is stretched, the image also must stretch so that the bar takes up the middle third.
Currently if I stretch horizontally, it maintains its vertical position which is good, but the SVG does not take up a third but maintains its original width:
Here is the React code :
function BackgroundSVG() {
let outerDiv = {
position:"relative",
border: "3px solid red",
}
let svgStyle = {
position:"absolute",
top:"0px",
border: "3px solid pink",
zIndex: -1,
width: "100%",
height: "200px"
}
return (
<div style={outerDiv}>
<div>Lorem ipsum .......</div>
<svg style={svgStyle}
viewBox={`0 0 ${600} ${200} `}
xmlns="http://www.w3.org/2000/svg">
<path d={`M ${200} ${100} H ${400}`} strokeWidth={12} stroke="blue"/>
</svg>
</div>
);
}
Here is a code pen
https://codepen.io/oliverwatkins/pen/MWqWmQz
How do I stretch the image along the x-axis, while preserving things on the y-axis?
I have tried to play around with the widths and heights but that does not seem to work. I assume that if I keep width at 100% and height at a 200px that this would solve the problem.
Default preserveAspectRatio attribute value is xMidYMid meet
so that browser try to maintain image aspect ratio.
For stretching SVG image, we need to set
preserveAspectRatio="none"
I want a stacked progress bar tracking two fields:
valueBuffer: amount unlocked out of total. The light blue bar.
value: amount claimed out of unlocked. The dark blue bar.
Variant buffered suits my use case but the dotted line animation is annoying. How do I disable the animation and replace it with a regular bar?
<LinearProgress variant="buffer" value={50} valueBuffer={70} />
If this is not possible, what is the alternative to have a bootstrap style stacked progress bar?
You can use add a custom style to .MuiLinearProgress-dashed and modify the default dashed styles using sx attribute like this:
<LinearProgress
variant="buffer"
value={progress}
valueBuffer={buffer}
sx={{
"& .MuiLinearProgress-dashed": {
backgroundColor: "lightgrey",
backgroundImage: "none",
animation: "none"
}
}}
/>
You can take a look at this sandbox for a live working example of this solution.
I have the following image in my React Native app
I want to have this image inside a parent element with no space above or below it, and I want the image to not overshoot the left or right sides of the screen
When I have the code like this
<View style={{
marginTop: 100,
borderWidth: 2,
borderColor: 'red'
}}>
<Image
style={{
width: '100%'
}}
source={require('#images/swoosh-02.png')}
/>
</View>
I get this, because default for resizeMode is cover
When I change it to this (adding resizeMode='contain')
<View style={{
marginTop: 100,
borderWidth: 2,
borderColor: 'red'
}}>
<Image
style={{
width: '100%'
}}
resizeMode='contain'
source={require('#images/swoosh-02.png')}
/>
</View>
the image gets successfully contained horizontally, but the height of the parent element remains the same as it was when resizeMode was cover.
How can I get it so that the parent element shrinks vertically to contain only the image and not have that extra top/bottom padding?
De diference between contain and cover is :
resizeMode='contain' = Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
resizeMode='cover' = Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
Maybe you should try to apply height in your View.
Read this article, should help you.
I have a react based radial progress chart . Here is the codesandbox
What I'm trying to do is add some roundness to the segments themselves so that they have rounded edges.
I tried adding in borderRadius: "10" but that didn't cut in. Any suggestions?
<RadialSeparators
count={20}
style={{
background: "#fff",
width: "2px",
borderRadius: "10",
// This needs to be equal to props.strokeWidth
height: `${10}%`
}}
/>
I am new to React and would like to change the position of the labels for the Doughnut chart from PrimeReact(https://www.primefaces.org/primereact/#/doughnutchart).
I checked the link(https://www.chartjs.org/docs/latest/charts/doughnut.html) which primereact internally used for chart and find no option to change position etc. Is there a way to achieve?
I also would like to have some text at the center of the doughnut.
TIA
Here is the Chart jsx:
const option = {
maintainAspectRatio: false,
responsive: false,
legend: {
position: 'left',
labels: {
boxWidth: 10
}
}
}
Apply above option to Chart
<Chart
style={{ width: "90%", height: "90%" }}
type="doughnut"
data={data}
options={option}
/>
The answer from user578219 was perfect for my problem as well. I am also looking for the option to include a label in the center of the doughnut - is there anywhere that I can find a list of the options that can be used?