We Keep Coding

Apex Chart donut chart the tooltip color isn't same with series

I am trying to change ApexChart tooltip background colors but i couldn't do it.
They aren't same with the series colors. I tried set fillSeriesColor to true but it didn't worked, i don't know why.
Also I couldn't find the default colors to change them from css file, there is so confusing. Something must be going wrong.
My donut option codes are below, please help.. :)
var options = {
colors: ['#3699FF', '#DEF2EB', '#19C5BD', '#FEE7DD', '#FEA800'],
series: time,
labels: name,
chart: {
width: 350,
height: 280,
type: 'donut',
},
cutoutPercentage: 75,
responsive: !0,
maintainAspectRatio: !1,
cutout: "75%",
title: {
display: !1
},
fill: {
colors: ['#3699FF', '#DEF2EB', '#19C5BD', '#FEE7DD', '#FEA800']
},
animation: {
animateScale: !0,
animateRotate: !0
},
tooltip: {
fillSeriesColor: true,
x: {
fillSeriesColor: true
},
y: {
fillSeriesColor: true
}
},
dataLabels: {
enabled: false
},
legend: {
show: false
},
plugins: {
legend: {
display: !1
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
width: 0,
dashArray: 0,
},
plotOptions: {
pie: {
donut: {
size: "85%",
labels: {
show: true,
name: {
color: "#000000",
show: true
},
value: {
color: "#000000",
show: true
},
total: {
fontSize: "12px",
color: "#000000",
show: true,
label: 'testing'
}
}
}
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 350
},
legend: {
position: 'bottom'
}
}
}]
};

Adding style to div element in React ParticleJS

I am trying to add style to the div element which gets created while adding particle component in React. I am adding the style in Component and not in the options params provided by tsparticles. But the height and visibility properties is getting added to the canvas. Please see attached screenshot in the post.
<Particles
className="react-particles"
id="particles-js"
style={
{
visibility: "hidden"
}
}
options={{
background: {
color: {
value: "#3e1110"
},
},
fpsLimit: 60,
interactivity: {
detectsOn: "canvas",
events: {
onClick: {
enable: false,
mode: "push",
},
onHover: {
enable: false,
mode: "repulse"
},
resize: true
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4
}
}
},
canvas:{
w: "500",
h: "500"
},
particles: {
number: {
value: 40,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#722035"
},
shape: {
type: "edge",
stroke: {
width: 0,
color: "#000000"
},
polygon: {
"nb_sides": 5
},
image: {
src: "img/github.svg",
width: 50,
height: 50
}
},
opacity: {
value: 0.749690259550659,
random: true,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 5,
random: true,
anim: {
enable: false,
speed: 3,
size_min: 1,
sync: false
}
},
line_linked: {
enable: false,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 3,
direction: "top-right",
random: true,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: false,
mode: "repulse"
},
onclick: {
enable: false,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 400,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3
},
repulse: {
distance: 200,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
detectRetina: true,
}}
/>

Polygon mask SVG image not working for tsparticles in React

I have a React project which I would like to embed my logo as a polygon mask using tsparticles.
It works normally if I use the sample code from the official documentation page, however if I try to use the polygon mask option, it seems that it could not detect the SVG format. I don't know whether this is a browser issue or not.
Below is the original code from codepen by the creator embedded to my React project.
I have my own logo which I store locally but for this question, I'm going to use the code from the original author of the code.
import React from "react";
import { Container} from "#material-ui/core";
import Particles from "react-tsparticles";
//import polygonmasklogo from "./polygonmask.svg";
export default function Banner() {
return (
<Container >
<Particles
id="tsparticles"
options={{
background: {
color: {
value: "#fff",
},
},
detectRetina: false,
fpsLimit: 60,
interactivity: {
detectsOn: "canvas",
events: {
onHover: {
enable: true,
mode: "bubble",
},
resize: true,
},
modes: {
bubble: {
distance: 40,
duration: 2,
opacity: 8,
size: 6,
speed: 3,
},
},
},
particles: {
color: {
value: "#ff0000",
animation: {
enable: true,
speed: 20,
sync: true,
},
},
lineLinked: {
blink: false,
color: "random",
consent: false,
distance: 30,
enable: true,
opacity: 0.3,
width: 0.5,
},
move: {
attract: {
enable: false,
rotate: {
x: 600,
y: 1200,
},
},
bounce: false,
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 1,
straight: false,
},
number: {
density: {
enable: false,
area: 2000,
},
limit: 0,
value: 200,
},
opacity: {
animation: {
enable: true,
minimumValue: 0.05,
speed: 2,
sync: false,
},
random: false,
value: 1,
},
shape: {
type: "circle",
},
size: {
animation: {
enable: false,
minimumValue: 0.1,
speed: 40,
sync: false,
},
random: true,
value: 1,
},
},
polygon: {
draw: {
enable: true,
lineColor: "rgba(255,255,255,0.2)",
lineWidth: 0.3,
},
move: {
radius: 10,
},
inlineArrangement: "equidistant",
scale: 0.5,
type: "inline",
//url: {polygonmasklogo},
url: "https://cdn.matteobruni.it/images/particles/smalldeer.svg",
},
}}
/>
</Container>
);
}

The Polygon Mask feature requires pathseg library to work correctly in some browsers (Chrome removed the SVG 1.1 support in a recent version)
pathseg is a client-side library like tsParticles, so if you are using a framework that uses SSR you need to check the documentation for the client-side imports.
I have a working sample with Next.js here
This is the code needed for Next.js before returning the <Particles /> component:
if (process.browser) {
require("pathseg");
}
If you are using React client-side just import pathseg like this:
import "pathseg";
This should fix your issue.

How to set particles-js to background?

I am trying to set up similar page as this, here with central element in front of animation that is running behind:
https://vincentgarreau.com/particles.js/#default
I set up something like this and it occupies its own space, separated from other content, not behind:
I would like my text appear in front of particles animation. Could you please help with this? I tried using "z-index" without success: <div style="z-index: -1"></div>
My full code is here, or pasted below with most important bits only.
I added this to my HTML:
<!-- particles.js container -->
<div id="particles-js"></div>
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
</script>
CSS:
body {
background-color: #789;
margin-left: 5px;
margin-right: 5px;
padding-top: 60px;
z-index: 900;
position:relative;
}
#particles-js {
background-color: #255;
z-index: 850;
position:relative;
}
JS:
window.addEventListener("hashchange", function() {
scrollBy(0, -55);
});
particlesJS("particles-js", {
particles: {
number: { value: 80, density: { enable: true, value_area: 800 } },
color: { value: "#ffffff" },
shape: {
type: "circle",
stroke: { width: 0, color: "#000000" },
polygon: { nb_sides: 5 },
image: { src: "img/github.svg", width: 100, height: 100 }
},
opacity: {
value: 0.5,
random: false,
anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
},
size: {
value: 3,
random: true,
anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 6,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 1200 }
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: { enable: true, mode: "repulse" },
onclick: { enable: true, mode: "push" },
resize: true
},
modes: {
grab: { distance: 400, line_linked: { opacity: 1 } },
bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },
repulse: { distance: 100, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 }
}
},
retina_detect: true
});
var count_particles, stats, update;
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "absolute";
stats.domElement.style.left = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
count_particles = document.querySelector(".js-count-particles");
update = function() {
stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);

The answer is by ZohirSalak CeNa:
setting your canvas to this position : absolute; width:100%;
height:100%; z-index:-1;
I would clarify for beginners:
In HTML the animated element is <div id="particles-js"></div>
This element should go to the background. Notice the value of id= element.
In CSS I simply added:
#particles-js {
position : absolute;
width:100%;
height:100%;
z-index:-1;
}
Notice after # the name that matches id= from HTML file (particles-js).
Now it looks like this:

Particle doesn't follow HTML order

I am trying to make Particle JS work as a background. As you can see on my website, the body as the attribute particles but, the particles are only after the content. It doesn't follow the order. Here is the config:
particlesJS("particles-js", {
particles: {
number: {
value: 80,
density: {
enable: !0,
value_area: 800
}
},
color: {
value: "#ffffff"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#000000"
},
polygon: {
nb_sides: 5
},
image: {
src: "img/github.svg",
width: 100,
height: 100
}
},
opacity: {
value: .5,
random: !1,
anim: {
enable: !1,
speed: 1,
opacity_min: .1,
sync: !1
}
},
size: {
value: 3,
random: !0,
anim: {
enable: !1,
speed: 40,
size_min: .1,
sync: !1
}
},
line_linked: {
enable: !0,
distance: 150,
color: "#ffffff",
opacity: .4,
width: 1
},
move: {
enable: !0,
speed: 6,
direction: "none",
random: !1,
straight: !1,
out_mode: "out",
bounce: !1,
attract: {
enable: !1,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: !0,
mode: "grab"
},
onclick: {
enable: !0,
mode: "push"
},
resize: !0
},
modes: {
grab: {
distance: 140,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3
},
repulse: {
distance: 200,
duration: .4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: !0
});
Thanks!

Try with that:
#particles-js {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#particles-js > canvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}