Eje secundario para escalar en el gráfico
Estoy tratando de hacer que ambas líneas en mi gráfico se escalen correctamente. He leído la documentación pero no puedo encontrar cómo hacerlo.
La imagen anterior muestra lo que sucede con la línea naranja cuando se agrega un eje secundario. Parece que están utilizando la misma escala en lugar de la suya propia.
Actualmente tengo el siguiente código:
$(function(e) {
/*-----echart1-----*/
var options = {
chart: {
height: 300,
type: "line",
stacked: false,
toolbar: {
enabled: false
},
dropShadow: {
enabled: true,
opacity: 0.1,
},
},
colors: ["#f99433", '#6759C8'],
dataLabels: {
enabled: false
},
stroke: {
curve: "straight",
width: [3, 3, 0],
dashArray: [0, 4],
lineCap: "round"
},
grid: {
padding: {
left: 0,
right: 0
},
strokeDashArray: 3
},
markers: {
size: 0,
hover: {
size: 0
}
},
series: [{
name: "Price",
type: 'line',
data: ["4.12","4.08","3.98","3.99","3.95","4.01"] }, {
name: "Socials",
type: 'line',
data: ["23","17","6","6","7","7"] }],
yaxis: [
{
title: {
text: "Price",
},
},
{
opposite: true,
title: {
text: "Socials"
}
}
],
xaxis: {
type: "month",
categories: ["2021-12-09 17:01:25","2021-12-09 18:01:29","2021-12-09 19:01:33","2021-12-09 20:01:37","2021-12-09 21:01:42","2021-12-09 22:01:45"],
axisBorder: {
show: false,
color: 'rgba(119, 119, 142, 0.08)',
},
labels: {
style: {
color: '#8492a6',
fontSize: '12px',
},
},
},
fill: {
gradient: {
inverseColors: false,
shade: 'light',
type: "vertical",
opacityFrom: 0.85,
opacityTo: 0.55
}
},
tooltip: {
show:false
},
legend: {
position: "top",
show:true
}
}
var chart = new ApexCharts(document.querySelector("#chartArea"), options);
chart.render();
});
davy.ai
Para que ambas líneas en el gráfico se escalen correctamente, deberás usar el eje y secundario para la segunda serie de líneas. Actualmente, la segunda serie de líneas está usando el mismo eje y que la primera serie de líneas, lo cual hace que la línea naranja no se vea escalada correctamente.
Para utilizar el eje y secundario, deberás agregar la opción “yaxis” a la segunda serie de líneas con un valor de 1. Esto le indicará a ApexCharts que use el eje y secundario para esta serie.
Aquí tienes un ejemplo de cómo puedes modificar el código para utilizar el eje y secundario para la segunda serie de líneas:
Con esta modificación, la segunda serie de líneas ahora utilizará el eje y secundario y ambas líneas se deberán escalar correctamente.