I'm trying to apply some basic style into my tooltip using ApexCharts in React.
This is my configuration:
const options = {
chart: {
foreColor: "#ffffff12",
toolbar: {
show: false
}
},
colors: ["white"],
stroke: {
width: 3
},
grid: {
borderColor: "#ffffff12",
borderWidth: 1,
clipMarkers: false,
yaxis: {
lines: {
show: false
}
},
xaxis: {
lines: {
show: true,
},
}
},
dataLabels: {
enabled: false
},
fill: {
gradient: {
enabled: true,
opacityFrom: 0.4,
opacityTo: 0
}
},
markers: {
size: 0
},
tooltip: {
enabled: true,
style: {
fontSize: '20px',
fontFamily: 'Roboto'
},
x: {
show: true,
format:'HH:mm'
},
y: {
formatter:(value) => `${value}$`
},
marker: {
show: false,
},
theme:'dark'
},
...
I'm able to see it with the dark default values (like dark background and white font color etc...), but I'm not able to make it work with my own.
Thanks in advance!
Please add id property to parent of chart element like this.
#chartContainer .apexcharts-tooltip {
color: #000000;
}
#chartContainer .apexcharts-tooltip .apexcharts-tooltip-series-group.active {
background: #ffffff !important;
}
The tooltip in ApexCharts can be targetted directly through CSS as it is just an HTML element.
Change the tooltip style by overriding .apexcharts-tooltip class and any inner elements inside it.
.apexcharts-tooltip.light{
background:red;
color:green;
}
Related
i want to do effect with particlejs i want to contain my particle in div with (width 250px height 250px) but i cant i dont know why the all particle are in all page
i tried to this contain the div in div and with position absolute/relative
import { useCallback } from "react";
import Particles from "react-tsparticles";
import type { Container, Engine } from "tsparticles-engine";
import { loadFull } from "tsparticles";
import '../style/Particules.css'
const Particule = () => {
const particlesInit = useCallback(async (engine: Engine) => {
console.log(engine);
// you can initialize the tsParticles instance (engine) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
await loadFull(engine);
}, []);
const particlesLoaded = useCallback(async (container: Container | undefined) => {
await console.log(container);
}, []);
return (
<div className="container">
<div>
<h2>first</h2>
</div>
<div> <h2>second</h2>
<Particles
id="tsparticles"
init={particlesInit}
loaded={particlesLoaded}
options={{
background: {
color: {
value: "#0d47a1",
}
},
fullScreen: {
enable: true,
zIndex: -1,
},
fpsLimit: 60,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
push: {
quantity: 1,
},
repulse: {
distance: 100,
duration: 0.04,
},
},
},
particles: {
color: {
value: "#fff",
},
links: {
color: "#ffffff",
distance: 15,
enable: true,
opacity: 0.1,
},
collisions: {
enable: false,
},
move: {
direction: "none",
enable: true,
outModes: {
default: "bounce",
},
random: false,
speed: 0.5,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 30,
},
opacity: {
value: 2,
},
style: {
position: "absolute"
},
shape: {
type: "images",
"images":
[{
"src": 'https://media.wuerth.com/stmedia/modyf/eshop/products/std.lang.all/resolutions/category/png-546x410px/56314216.png',
}, {
"src": "https://media.wuerth.com/stmedia/modyf/eshop/products/std.lang.all/resolutions/category/png-546x410px/56597539.png"
},
{
"src": "https://media.wuerth.com/stmedia/modyf/eshop/products/std.lang.all/resolutions/category/png-546x410px/4042942.png"
},
{
"src": ""
}
]
},
size: {
random: true,
value: 50,
},
},
detectRetina: true,
}}
/>
</div>
<div>
<h2>third</h2>
</div>
</div>
);
};
export default Particule;
css
.container{
display: flex;
position: absolute;
width: 100vw;
height : 100%;
top: 0;
left: 0;
}
.container > div {
position: relative;
width: 100%;
}
i have this result in the image your see me i want this
but me i want to contain my particle in the second div only [enter image description here](https://i.stack.imgur.com/Yxteq.png)
i try to add the style in the the position absolute , but nothing
<Particles
id="tsparticles"
init={particlesInit}
loaded={particlesLoaded}
options={{
background: {
color: {
value: "#0d47a1",
}
},
style:{
position:"absolute"
},
thanks for the help
i want to add the particle in the second div with heigth and width i dont want on the all page
Chart.js doughnut text visibility. Tell me how to make it so that when the values intersect, the text comes out and changes its position.
const myChart = new Chart(canvas,
{
type: 'doughnut',
data: {
labels: dataNameDB,
datasets: [{
data: dataCountDB,
backgroundColor: backgroundColor,
borderWidth: 0,
}],
},
plugins: [ChartDataLabels, DoughnutLabel],
options: {
cutout: 340,
responsive: true,
animation: false,
plugins: {
legend: {
display: false,
},
datalabels: {
formatter: (val, ctx) => {
return Math.round((ctx.chart.data.datasets[0].data[ctx.dataIndex] * 100) / summChart()) + "%";
},
display: (val,ctx) =>{
return 'auto';
},
clamp: true,
clip: true,
anchor: 'center',
align: 'center',
offset: 1,
font: {
size: 65,
weight: 'bold',
color: '000000'
},
color: '000000',
labels: {
value: {
color: '#000000'
}
}
},
doughnutlabel: {
labels: [{
text: summChart,
font: {
size: 140,
weight: 'bold',
color: '000000'
}
}]
}
}
}
},
);
Now it outputs something like this, but I need it to be like this:
Although the documentation says that display 'auto' is responsible for this, how to catch it when the text is hidden in order to move it?
I have a chart component called genStarts whose view depends on the visible data of the following chart (singleChart). I'm using the onZoomComplete and onPanComplete options to insert my getVisibleValues function so that genStarts can be updated on zooms and pans. However, I have no way to get the currently visible values when the page first starts up. My getVisibleValues function does not work outside of the chartStyle object, and I haven't found a chart option that executes on startup.
In other words, my genStarts graph is only populated when SingleChart is zoomed or panned but I want it to be populated immediately.
const SingleChart = React.memo(({ setVisible }) => {
function getVisibleValues({ chart }) {
setVisible(chart.scales.x.ticks);
}
const chartStyle = {
options: {
animation: false,
maintainAspectRatio: false,
responsive: true,
plugins: {
zoom: {
zoom: {
wheel: {
enabled: true,
modifierKey: "shift",
},
pinch: {
enabled: true,
},
enabled: true,
drag: true,
mode: "x",
onZoomComplete: getVisibleValues,
},
pan: {
enabled: true,
mode: "x",
speed: 2,
onPanComplete: getVisibleValues,
},
mode: "xy",
},
legend: {
display: false,
},
},
scales: {
y: {
type: "linear",
display: "true",
position: "left",
grid: {
drawBorder: true,
color: "#000000",
},
ticks: {
beginAtZero: true,
color: "#000000",
},
title: {
display: yAxisLabel != "",
text: yAxisLabel,
},
},
x: {
max: 9,
grid: {
drawBorder: true,
color: "#00000",
},
ticks: {
beginAtZero: false,
color: "#000000",
},
},
},
},
};
// ... some code to get chartData
return (
<div>
<Line
data={chartData}
options={chartStyle.options}
width={20}
height={195}
/>
</div>
);
});
export default SingleChart;
You can make use of the animations, they have a property to check if its the first time they have fired, although since you dont want animations you will need to set the main one to a verry low number and at least the tooltip to false and the transition duration of active elements to 0.
const getVisibleValues = ({
chart
}) => {
console.log(chart.scales.x.ticks.map(el => ({
value: el.value,
label: el.label
}))) // Map because stack console prints whole circular context which takes long time
}
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
}]
},
options: {
animation: {
onComplete: (ani) => {
if (ani.initial) {
getVisibleValues(ani)
}
},
duration: 0.0001
},
transitions: {
active: {
animation: {
duration: 0
}
}
},
plugins: {
tooltip: {
animation: false
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
I'm using ApexCharts with React and i'm using a line's chart and it's not showing the toolbar, someone can help me?
My summed up state of options:
const [propriedades, setPropriedades] = useState({
options: {
chart: {
height: 150,
type: 'line',
selection: {
enabled: true
},
toolbar: {
tools: {
zoomin: true,
zoomout: true,
}
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
}
},
});
xaxis: {tickPlacement: "on"},
For Angular it was solved by adding this line
Is there a way to make it so that all the legend options show on a donut apexchart. Currently it's using a scrollbar and I don't want this, I want all the legend options to be visibile in a vertical formation.
Image of the donut chart with a scrollbar legend
Ideally I'd want it to look something like this, but not sure what settings need to be changed.
Ideal donut chart
These are the current options I am using:
const options = {
chart: {
events: {
dataPointSelection: onClick,
markerClick: onClick,
legendClick: onClick
},
type: 'donut',
animations: {
enabled: true,
easing: 'easeinout',
speed: 80,
animateGradually: {
enabled: true,
delay: 1500
},
dynamicAnimation: {
enabled: true,
speed: 350
}
}
},
stroke: {
colors: [theme.colors.backgroundPrimary]
},
theme: {
mode: 'light',
monochrome: {
enabled: true,
color: '#B9B9B9',
shadeTo: 'dark',
shadeIntensity: 0.9
},
},
dataLabels: {
enabled: false,
foreColor: '#fff',
padding: 4,
borderRadius: 2,
borderWidth: 1,
borderColor: '#fff',
opacity: 0.5
},
legend: {
show: true,
labels: {
colors: [theme.colors.textPrimary],
useSeriesColors: false
}
},
tooltip: {
custom: (stuff: any) => {
const index = stuff.seriesIndex;
return (
`<div class="apex-tool">
<span>${labels[index]}</span>
</div>`
);
}
},
labels: labels,
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom',
}
}
}, {
breakpoint: 1200,
options: {
chart: {
height: '150px',
width: '100%',
events: {
dataPointSelection: onClick,
markerClick: onClick,
legendClick: onClick
},
type: 'donut',
animations: {
enabled: true,
easing: 'easeinout',
speed: 80,
animateGradually: {
enabled: true,
delay: 1500
},
dynamicAnimation: {
enabled: true,
speed: 350
}
}
},
stroke: {
colors: [theme.colors.backgroundPrimary]
},
theme: {
mode: 'light',
monochrome: {
enabled: true,
color: '#B9B9B9',
shadeTo: 'dark',
shadeIntensity: 0.9
},
},
dataLabels: {
enabled: false,
foreColor: '#fff',
padding: 4,
borderRadius: 2,
borderWidth: 1,
borderColor: '#fff',
opacity: 0.5
},
legend: {
height: '200px',
width: '100%',
show: true,
labels: {
colors: [theme.colors.textPrimary],
useSeriesColors: false
}
},
tooltip: {
custom: (stuff: any) => {
const index = stuff.seriesIndex;
return (
`<div class="apex-tool">
<span>${labels[index]}</span>
</div>`
);
}
},
labels: labels,
}
}, {
breakpoint: 992,
options: {
chart: {
height: '250px',
events: {
dataPointSelection: onClick,
markerClick: onClick,
legendClick: onClick
},
type: 'donut',
animations: {
enabled: true,
easing: 'easeinout',
speed: 80,
animateGradually: {
enabled: true,
delay: 1500
},
dynamicAnimation: {
enabled: true,
speed: 350
}
}
},
stroke: {
colors: [theme.colors.backgroundPrimary]
},
theme: {
mode: 'light',
monochrome: {
enabled: true,
color: '#B9B9B9',
shadeTo: 'dark',
shadeIntensity: 0.9
},
},
dataLabels: {
enabled: false,
foreColor: '#fff',
padding: 4,
borderRadius: 2,
borderWidth: 1,
borderColor: '#fff',
opacity: 0.5
},
legend: {
show: true,
labels: {
colors: [theme.colors.textPrimary],
useSeriesColors: false
}
},
tooltip: {
custom: (stuff: any) => {
const index = stuff.seriesIndex;
return (
`<div class="apex-tool">
<span>${labels[index]}</span>
</div>`
);
}
},
labels: labels,
}
}],
}
Generally speaking it would be a better approach do use the chart height option, which you mention, to adjust what is visible in the chart area.
If this for whatever reason is not suitable for your use, then you'll need to start overriding the default CSS.
The following should do the trick:
.apexcharts-canvas svg {
/* Allow the legend to overflow the chart area */
overflow: visible;
}
.apexcharts-canvas svg foreignObject {
/* Allow the legend to overflow the legend container */
overflow: visible;
}
Here's a codepen of it working with a donut chart.
These are the default fontSize and height why not trying to decrease the first and increase the second ?
legend: {
fontSize: '14px',
height: undefined,
}