Estoy tratando de hacer que ambas líneas en mi gráfico se escalen correctamente, he leído la documentación pero parece que no puedo encontrar cómo hacerlo.
La imagen de arriba muestra lo que sucede con la línea naranja cuando se agrega un eje secundario. Es como si estuvieran usando 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();