Using One Yaxis for multiple series

[BlerinaP]

Im using react-apexchart on my project and i have four series, one of them has opposite y-axis the others needs to associate to the first serie, like this

yaxis: [
            {
                seriesName: 'Positive',
                show: true
            },
            {
                seriesName: 'Positive',
                show: false
            },
            {
                seriesName: 'Positive',
                show: false
            },
            {
                seriesName: 'Average',
                opposite: true
            }
        ],
        
        Everything was working fine until i had to update react-apexchart to the latest version, then i got this error 
        
        Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'result') in apexcharts.common.js
        
        Any idea why this happend, and how to solve this prob.

[rosco54]

Can you look in the top of apexcharts.common.js and tell me the revision number please. The latest revision is 3.48.0 but I suspect you have 3.47.0 based on the clue that your message was posted 3 hours before 3.48.0 was committed to the codebase.

You can also now associate data series with yaxes like this (assuming your series are named Positive, Negative, Indifferent):

yaxis: [
            {
                seriesName: ['Positive', 'Negative', 'Indifferent'],
                show: true
            },
            {
                seriesName: 'Average',
                opposite: true
            }
        ],

[rosco54]

I can confirm the error is also in 3.48.0, after downloading a react-apexcharts example chart and stripping it back to bare apexcharts config.

The alternative yaxis config above should work. If it doesn't, ApexCharts revision 3.46.0 may be your best option, or 3.45.2 while the fix is being worked on.

[BlerinaP]

The following day, I resolved the issue by deleting the node modules, reinstalling the packages, and selectively updating only "react-apexcharts" while retaining the older version of "apexchart," which resulted in successful execution.

"apexcharts": "^3.36.3",
"react-apexcharts": "^1.4.1",

[BlerinaP]

I'm working on creating a grouped stacked bar chart using the new version of react-apexcharts. However, I'm also interested in integrating two series of line type, each with an opposite y-axis. Does the package offer an option to create a chart with six series of bar type, grouped in pairs and stacked, along with two additional series of line type featuring opposite y-axes?

[rosco54]

If I've interpreted you correctly, the answer is yes. This works in the current 3.48.0 version of ApexCharts and as far as I know, which is only what I've seen in one example, React is just a wrapper, so I assume the details of getting it to work with it can be worked out.

var options = {
  chart: {
    height: 350,
    type: "line",
    stacked: true
  },
  dataLabels: {
    enabled: false
  },
  series: [
    {
      name: 'Series A',
      type: 'column',
      group: 'Alpha',
      data: [21.1, 23, 33.1, 34, 44.1, 44.9, 56.5, 58.5]
    },
    {
      name: "Series B",
      type: 'column',
      group: 'Alpha',
      data: [10, 19, 27, 26, 34, 35, 40, 38]
    },
    {
      name: 'Series C',
      type: 'column',
      group: 'Alpha',
      data: [21.1, 23, 33.1, 34, 44.1, 44.9, 56.5, 58.5]
    },
    {
      name: "Series D",
      type: 'column',
      group: 'Beta',
      data: [10, 19, 27, 26, 34, 35, 40, 38]
    },
    {
      name: 'Series E',
      type: 'column',
      group: 'Beta',
      data: [21.1, 23, 33.1, 34, 44.1, 44.9, 56.5, 58.5]
    },
    {
      name: "Series F",
      type: 'column',
      group: 'Beta',
      data: [10, 19, 27, 26, 34, 35, 40, 38]
    },
    {
      name: "Series 1",
      type: 'line',
      data: [20.4, 30, 35.5, 28.5, 26.5, 33.8, 47.8, 53.6]
    },
    {
      name: "Series 2",
      type: 'line',
      data: [1.4, 2, 2.5, 3.5, 3.5, 2.8, 3.8, 3.6]
    },
  ],
  xaxis: {
    categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016]
  },
  yaxis: [
    {
      seriesName: ['Series A','Series B',
                   'Series C','Series D',
                   'Series E','Series F'],
      min: 0,
      axisTicks: {
        show: true
      },
      axisBorder: {
        show: true,
      },
      title: {
        text: "Columns (Stacked)"
      }
    },{
      opposite: true,
      seriesName: 'Series 1',
      labels: {
        style: {
          colors: ['#222222']
        }
      },
      axisTicks: {
        show: true,
        color: '#222222'
      },
      axisBorder: {
        show: true,
        color: '#222222'
      },
      title: {
        text: "Line 1",
        style: {
          color: '#222222'
        }
      }
    },{
      opposite: true,
      seriesName: 'Series 2',
      labels: {
        style: {
          colors: ['#78909C']
        }
      },
      axisTicks: {
        show: true,
        color: '#78909C'
      },
      axisBorder: {
        show: true,
        color: '#78909C'
      },
      title: {
        text: "Line 2",
        style: {
          color: '#78909C'
        }
      }
    }
  ],
  stroke: {
    width: [0,0,0,0,0,0,4,3]
  },
  colors: ['#00D8B6','#008FFB','#FEB019',
           '#FF4560','#775DD0',"#95c11f",
           '#222222','#78909C'],
  tooltip: {
    shared: true,
  }
};