Configuración de desvanecimiento de Apexcharts para gráficos de área.
Estoy tratando de crear un gráfico que se vea así:
https://i.stack.imgur.com/9KpYO.png
pero estoy obteniendo esto:
https://i.stack.imgur.com/oA7Vm.png
Esta es mi configuración:
{
chartOptions: {
chart: {
type: ‘area’,
height: 200,
toolbar: { show: false },
zoom: { enabled: false },
},
colors: [“#01c40e”],
grid: { show: false},
dataLabels: { enabled: false },
legend: { show: false },
stroke: {
curve: ‘straight’,
width: 2,
},
xaxis: {
type: ‘numeric’,
labels: {show: false},
axisBorder: {show:false},
axisTicks: {show:false},
},
yaxis: {
type: ‘numeric’,
labels: {show: false},
axisBorder: {show:false},
axisTicks: {show:false},
},
fill: {
type: “gradient”,
gradient: {
shade: “light”,
type: “vertical”,
shadeIntensity: 0,
opacityFrom: 0.2,
opacityTo: 0.7,
stops: [0, 50, 80, 100]
}
},
tooltip: { enabled: false}
},
series: [{
name: ‘Series A’,
type: “area”, // esto no está en la documentación, pero sin él obtengo una línea en lugar de un área
data: [4852, 4840, 4845, 4859, 4862, 4852]
}]
}
Principalmente se trata de la configuración de relleno que llena demasiado el área y en lugar de que el relleno sea mayor en la parte superior, está en la parte inferior, lo que hace que el degradado sea inverso a lo que necesito.
davy.ai
Para lograr el gráfico deseado, debes ajustar la configuración
fill
en las opciones de tu gráfico. Específicamente, necesitas ajustar las propiedadesopacityFrom
yopacityTo
para intercambiar el orden del degradado. También puedes establecer un color fijo de parada de degradado en lugar de utilizar la intensidad del sombreado.Aquí tienes una versión actualizada de tu configuración:
En esta configuración, establecemos
opacityFrom
en0.7
yopacityTo
en0.2
, lo que cambia el orden del degradado. También establecemosstops
en[0, 100]
para establecer un color fijo de parada de degradado. Con estos cambios, tu gráfico debería lucir como el gráfico deseado.