I am using React Apexcharts to create a radial chart. By default, the progress bar goes in a clockwise direction but I need it to go counter-clockwise. Is there any option property available I can use?
What my graph looks like now:
What I need it to look like (bar going in opposite direction):
My options object:
let options = {
colors: ["#857EFF"],
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "70%",
background: "#293450"
},
track: {
dropShadow: {
enabled: true,
top: 2,
left: 0,
blur: 4,
opacity: 0.15,
}
},
dataLabels: {
name: {
offsetY: -10,
color: "#fff",
fontSize: "13px"
},
value: {
color: "#fff",
fontSize: "30px",
show: true
}
}
}
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "vertical",
gradientToColors: ["#05E996"],
stops: [0, 100]
}
},
stroke: {
lineCap: "round"
},
labels: ["Progress"]
}
Any help is appreciated, thank you!
I've been looking for an answer for this Problem without any success. Today i've successfully created a workaround.
The Apex Radialbar just hardcoded always goes clockwise, no matter what you do because it is always going from startAngle to endAngle using +1.
So using startAngle -360 and endAngle 0 will have no effect.
Essentially, you want to create the Radialbar and mirror it on Y axis and then remirror everyhting you want to keep normal, back to normal. However you need to transform the components usually back in place.
You can also try only selecting the Radialbar and only rotating that, however i find getting the other components back in the correct place using "transformX" is usually easier.
so lets say you want a Bar from -360 to 90 but counter-clockwise,
create a Radialbar from 0 to 270 and then use the following CSS transforms.
Here is the example Radialbar from the Angular Documentation with a counter-clockwise bar.
TIPP:
Use exact classifiers and unique, here in ng-deep with
counter-clockwise svg
Because once you use ng-deep you cannot unset it, unless you modify the document directly, so when you switch views you might have unwanted sideeffects.
Mirrored
Original
Change startAngle and endAngle options
https://apexcharts.com/docs/options/plotoptions/radialbar/
plotOptions: {
radialBar: {
startAngle: -360,
endAngle: 0,
...
I'm looking to do this same thing and after reading apexcharts docs as well as experimenting around with it I don't think it's currently possible.
Related
I want to introduce a Packed circle chart (a variation of bubble chart which contains only the radius as its dimension). React Chartjs and even Chartjs support only Bubble chart but not Packed circle chart. Here is an example of the expected chart I want to add
Can I get something like this using react-chartjs? For example, one needs to do something like below for a regular initiation of a bubble chart.
const defaultDatasets = [
{
label: ["China"],
backgroundColor: "rgba(255,221,50,0.2)",
borderColor: "rgba(255,221,50,1)",
data: [{
x: 735,
y: 50,
r: 15
}]
}, {
label: ["Denmark"],
backgroundColor: "rgba(60,186,159,0.2)",
borderColor: "rgba(60,186,159,1)",
data: [{
x: 116,
y: 50,
r: 10
}]
}, {
label: ["Germany"],
backgroundColor: "rgba(0,0,0,0.2)",
borderColor: "#000",
data: [{
x: 2116,
y: 50,
r: 15
}]
}
]
Since my requirement is a Packed circle chart, so I have two options.
I could omit x and y values. But then all bubbles get messed up.
I could randomise the x and y values and hide the axes. But then the randomisation won't guarantee any bubble overlapping or may bring some bubbles concentrated to one point.
Is there any hack or workaround to show bubbles in a nice order like in the picture above?
I have 2 element i wanna animate in react with gsap time line.
The thing is when i wanna chain the time line. its giving me error
Something I want
gsap.to(element1, 1, {...}).to(element2, 1, {...}).to(element2,.5,{...})
But the above code is giving me errors.
So i am writing something like this
gsap.to(appBack.current, 1, {
css: {
backgroundColor: "red",
},
});
gsap.to(overlay.current, 0.3, {
css: {
x: "-100vw",
},
});
gsap.to(overlay.current, 0.3, {
css: {
opacity: 1,
},
});
This is not giving me error anymore but i don't want this kind of behaviour. Since this gsap timelines are happening at the same time
This is an example from the GSAP tutorial where green, orange and grey are classes, you can use also ids like #pink
Check the complete tutorial here https://greensock.com/get-started/
var tl = gsap.timeline({repeat: 30, repeatDelay: 1});
//add 3 tweens that will play in direct succession.
tl.to(".green", {duration: 1, x: 200});
tl.to(".orange", {duration: 1, x: 200, scale: 0.2});
tl.to(".grey", {duration: 1, x: 200, scale: 2, y: 20});
I have a Line Chart with chart.js and one of the lines has to fill the background delimited with another line. It works well, but how can I do it to see chart axes when the background is filled ??
Here is an example of what I currently have: codeSandBox
From playing around with it, most of your options are not being recognized at all.
I played with the colors, layouts, displaying things, etc., and nothing made a difference. The only thing that's making a difference is the responsive key.
Normally, the way you would change the way the lines would be displayed is like this:
const options = {
legend: { display: false },
title: { display: true, text: "Line Chart" },
scales: {
yAxes: [{
gridLines: {
z: 99
},
ticks: {
beginAtZero: true
}
}]
},
xAxes: [{
gridLines: {
z: 99
}
}],
responsive: true
};
In your options object, under the scales key, under each axis, you can set the z-index of the gridlines. This set of options should work, according to this.
However, because your options aren't being recognized, none of the options here are even taking effect in the first place.
I haven't used Chart.js in react so I can't really help you more than that, in this aspect.
However, what I can say does work, is in line 10 in your sample code in the sandbox, I changed the hex value to rgba:
backgroundColor: "rgba(235, 245, 251, 0.5)",
It's the same color, only a little lighter, but what is most important is you can see the grid lines.
https://i.stack.imgur.com/VQ7v3.png
My advice is if you're only using React for this chart, don't. It seems to be making things harder.
I want to do this color transition effect but in framer motion way
css example
https://codepen.io/impressivewebs/pen/zqpEg
This is what I attempted, but didn't work
transition:{
delay:2,
backgroundColor: "1.5s ease"
}
my attempt
https://codesandbox.io/s/variants-framer-motion-forked-m3qui
Thank you
according to documentation, the backgroundColor property can be used like this if you are using variants. hope this helps you out ;)
Here is the working codepen:
https://codesandbox.io/s/variants-framer-motion-forked-9y3lo?file=/src/App.js
const variants = {
hidden: {
height: 100,
width: 100
},
visible: {
backgroundColor: ["#60F", "#09F", "#FA0"],
transition: {
delay: 1,
duration: 2,
ease: [0.075, 0.82, 0.165, 1],
repeat: Infinity,
repeatType: "reverse"
}
}
};
Trying to get this grey line parallel to x-axis as a marker of target (at of y-axis 67%).
you may put a markers props like:
markers={[
{
axis: 'y',
value: 520,
legend: 'TEST',
lineStyle: {
stroke: 'red',
},
textStyle: {
fill: 'red',
},
},
]}
the value determine the marker location, you can calculate based on data you passed.