apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.23k stars 1.29k forks source link

Column/Bar type Chart crashes in stacked mode #4699

Open Zordiac opened 5 days ago

Zordiac commented 5 days ago

Description

Hi, when using anything other than chart type "line" for my chart, it crashes. The chart has 2 series of type column, and two axis. The stacked property is enabled. I know that this does not make sense and there will be no stacking, but still it should not crash the entire chart, and it renders just fine on chart type "line". X Axis type is category. Tested with 3.53.

Steps to Reproduce

  1. Add 2 series of type column to the chart
  2. Add 2 Y axis of type category
  3. Set stacked to true
  4. set chart type to bar or column

Expected Behavior

It should still render the chart, not stacking anything.

Actual Behavior

Crashes the chart. When setting chart type back to line, it renders fine

Reproduction Link

https://jsfiddle.net/s4oy1569/2/

the options: `

    var options = {
      series: [{
      name: 'Income',
      type: 'column',
      data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6]
    }, {
      name: 'Cashflow',
      type: 'column',
      data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5]
    }],
      chart: {
      height: 350,
      stacked: true,
      type: 'bar', // line works, bar does not
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      width: [1, 1, 4]
    },
    title: {
      text: 'XYZ - Stock Analysis (2009 - 2016)',
      align: 'left',
      offsetX: 110
    },
    xaxis: {
      categories: ["2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016"],
    },
    yaxis: [
    {
        seriesName: ['Cashflow'],
        min: -1,
        max: 1,
        opposite: false,
        axisTicks: {
          show: true,
        },
        axisBorder: {
          show: true,
          color: '#FEB019'
        },
        labels: {
          style: {
            colors: '#FEB019',
          },
        },
        title: {
          text: "Revenue (thousand crores)",
          style: {
            color: '#FEB019',
          }
        }
      },
      {
        seriesName: ['Income'],
        axisTicks: {
          show: true,
        },
        axisBorder: {
          show: true,
          color: '#008FFB'
        },
        labels: {
          style: {
            colors: '#008FFB',
          }
        },
        title: {
          text: "Income (thousand crores)",
          style: {
            color: '#008FFB',
          }
        },
        tooltip: {
          enabled: true
        }
      }

    ],
    tooltip: {
      fixed: {
        enabled: true,
        position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
        offsetY: 30,
        offsetX: 60
      },
    },
    legend: {
      horizontalAlign: 'left',
      offsetX: 40
    }
    };

    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();`
rosco54 commented 2 days ago

@junedchhipa I believe this issue was also resolved by #4705. The given example chart renders as is without crashing.