Bar Chart > Bar alignment issue

[harshraghavani24]

I am having a strange issue, in my local my bar chart alignment is proper it is starting from zero but in the test server it is not showing properly i am attaching the images for this issue

Here is my code for the data and series

` const data = {
series: chartData.data.map((item) => {
return {
name: item?.name,
data: item?.data,
};
}),

options: {
  chart: {
    rtl: i18n.language === LANGUAGE_AR ? true : false,
    height: 'auto',
    type: 'bar',
    toolbar: {
      show: false,
    },
    zoom: {
      enabled: true,
      type: 'y',
    },
  },
  plotOptions: {
    bar: {
      columnWidth: '30px',
      borderRadius: 5,
      borderRadiusApplication: 'top',
    },
  },

  // Bars Colors
  colors: getColors,

  states: {
    hover: {
      filter: {
        type: 'darken',
        value: 0.7,
      },
    },
  },

  // X Axis
  xaxis: {
    categories: chartData.labels,
    position: 'bottom',
    axisBorder: {
      show: true,
    },
    axisTicks: {
      show: false,
    },
    labels: {
      show: true,
      style: {
        fontSize: '16px',
        fontWeight: 700,
        fontFamily: 'SourceSansPro, sans-serif',
      },
    },
  },

  dataLabels: {
    enabled: false,
  },

  // Y Axis
  yaxis: {
    opposite: i18n.language === LANGUAGE_AR ? true : false,
    axisBorder: {
      show: true,
    },
    axisTicks: {
      show: false,
    },
    labels: {
      formatter: function (value) {
        return value >= 0 ? value : `(${Math.abs(value)})`;
      },
      align: i18n.language === LANGUAGE_AR ? 'center' : 'left',
      style: {
        fontSize: '16px',
        fontWeight: 700,
        fontFamily: 'SourceSansPro, sans-serif',
      },
    },
  },

  stroke: {
    show: true,
    width: 15,
    colors: ['transparent'],
  },

  // Tooltip
  tooltip: {
    enabled: true,
    theme: 'light',
    style: {
      fontSize: '14px',
    },
    highlightDataSeries: true,
    marker: {
      show: true,
    },
  },

  // bottom labels
  legend: {
    show: false,
  },

  // Responsive
  responsive: [
    {
      breakpoint: 1000,
      options: {
        plotOptions: {
          bar: {
            columnWidth: '30px',
            rangeBarOverlap: true,
            rangeBarGroupRows: false,
          },
          stroke: {
            colors: ['transparent'],
            width: 5,
          },
        },
        xaxis: {
          categories: chartData.labels,
          position: 'bottom',
          axisBorder: {
            show: true,
          },
          axisTicks: {
            show: false,
          },
          labels: {
            show: true,
            style: {
              fontSize: '14px',
              fontWeight: 700,
              fontFamily: 'SourceSansPro, sans-serif',
            },
          },
        },
        yaxis: {
          opposite: i18n.language === LANGUAGE_AR ? true : false,
          axisBorder: {
            show: true,
          },
          axisTicks: {
            show: false,
          },
          labels: {
            formatter: function (value) {
              return value >= 0 ? value : `(${Math.abs(value)})`;
            },
            align: i18n.language === LANGUAGE_AR ? 'center' : 'left',
            style: {
              fontSize: '14px',
              fontWeight: 700,
              fontFamily: 'SourceSansPro, sans-serif',
            },
          },
        },
      },
    },
  ],
},

};`

I haven't added any external CSS

Test Server:

Local:

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.