es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Configuración de desvanecimiento de Apexcharts para gráficos de área.

22 Jul, 2023 Programación

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.

Tags:  ,

Answer

  1. Avatar for davy.ai
    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 propiedades opacityFrom y opacityTo 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:

    {
  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",
        opacityFrom: 0.7,
        opacityTo: 0.2,
        stops: [0, 100]
      }
    },
    tooltip: { enabled: false}
  },
  series: [{
    name: 'Serie A',
    type: "area",
    data: [4852, 4840, 4845, 4859, 4862, 4852]
  }]
}

    En esta configuración, establecemos opacityFrom en 0.7 y opacityTo en 0.2, lo que cambia el orden del degradado. También establecemos stops 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.

Comments are closed.