multiple y axis starting with 0

[s-pcode]

Description

I have two y axes, how to configure the axes options so that both y axes show 0 label which is highlighted using the annotation options. My left y axis shows 0 but right does not. I want both axes 0 to be in same line. The right axis 0 is not aligned with the left one. Attaching below my chartOptions

my chart options ->

const chartOptions: ApexCharts.ApexOptions = merge(BaseOptionChart(), {
    plotOptions: {
      stroke: {
        curve: "smooth",
        show: false,
        width: 0,
      },
      bar: {
        columnWidth: "20%",
        colors: {
          ranges: [
            {
              from: -10000,
              to: 0,
              color: alpha(theme.palette.error.main, 0.6),
            },
            {
              from: 1,
              to: 10000,
              color: theme.palette.primary.shine,
            },
          ],
        },
      },
    },
    stroke: {
      curve: "smooth",
      show: true,
      width: [0, 2],
    },
    colors: [theme.palette.primary.shine, theme.palette.secondary.dark],
    // labels: chartLabels,
    tooltip: {
      shared: true,
      intersect: false,
      y: [
        {
          formatter: (y: number) => {
            if (typeof y !== "undefined") {
              return fPercent(y);
            }
            return y;
          },
        },
        {
          formatter: (y: number) => {
            if (typeof y !== "undefined") {
              return `${fCurrency(y + 100, currency)} (${fPercent(y)})`;
            }
            return y;
          },
        },
      ],
    },
    annotations: {
      position: "back",
      yaxis: [
        {
          y: 0,
          strokeDashArray: 10,
          borderColor: theme.palette.primary.shine,
          label: {
            borderColor: theme.palette.primary.shine,
            borderWidth: 1,
            style: {
              color: theme.palette.primary.shine,
              background: theme.palette.background.paper,
            },
            // text: "0",
          },
        },
      ],
      xaxis: [
        {
          x: 0,
        },
      ],
    },
    xaxis: {
      labels: {
        show: true,
      },
      type: "datetime",
    },
    yaxis: [
      {
        show: isMobile ? false : true,
        forceNiceScale: true,
        title: {
          text: "weekly return",
          style: {
            fontWeight: 600,
            color:
              theme.palette.mode === "light"
                ? theme.palette.text.secondary
                : theme.palette.text.primary,
          },
        },
        labels: {
          formatter: (value: number) => {
            return fPercent(value, false);
          },
        },
      },
      {
        show: isMobile ? false : true,
        opposite: true,
        forceNiceScale: true,
        title: {
          text: "compounded returns",
          style: {
            fontWeight: 600,
            color:
              theme.palette.mode === "light"
                ? theme.palette.text.secondary
                : theme.palette.text.primary,
          },
        },
        labels: {
          formatter: (value: number) => {
            return `${fCurrency(value + 100, currency, 0)}`;
          },
        },
      },
    ],
  });

Expected Behavior

The right y axis 0 should be aligned with the left yaxis 0.

Actual Behavior

The right y axis 0 label is not aligned with left side

Screenshots

I need some urgent help in figuring this out. This is not a core sdk issue, hence not attaching a codepen link. I had earlier asked in Q&A discussion but didn't get any response.

[rhofland]

Does anyone have a solution for this?