ApexCharts Bar Chart not showing min. negative value

Issue

This is what I have currently and I want to get all the labels [-300000, -1500000, 0, 150000, 300000]. So please provide some help. Any advice is appreciated. Looking forward to it.

const series = [
    {
      name: 'Males',
      data: [120000, 50000, 10000, 120000, 50000, 10000],
    },
    {
      name: 'Females',
      data: [-200000, -151000, -70000, -250000, -151000, -70000],
    },
  ];
  const options = {
    chart: {
      id: 'horizontal-bar',
      stacked: true,
      toolbar: {
        show: false,
      },
    },
    colors: ['#68D241', '#FF0D35'],
    plotOptions: {
      bar: {
        horizontal: true,
        barHeight: '60%',
        borderRadius: 5,
        borderRadiusWhenStacked: 'all' as const,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      width: 1,
      colors: ['#fff'],
    },
    legend: {
      show: false,
    },

    grid: {
      xaxis: {
        lines: {
          show: true,
        },
      },
      yaxis: {
        lines: {
          show: false,
        },
      },
    },
    xaxis: {
      categories: ['TRUE ICP', 'AC 03', 'AC 04', 'AC 05', 'AC 06', 'IC 02'],
      tickAmount: 4,
      labels: {
        formatter(val: string) {
          const formattedValue = `$${Math.abs(parseFloat(val)).toLocaleString()}`;
          return parseFloat(val) < 0 ? `-${formattedValue}` : formattedValue;
        },
      },
      axisBorder: {
        show: false,
      },
    },
    yaxis: {
      min: -300000,
      max: 300000,
      showAlways: true,
    },
  };

I am trying to get all the labels but I don't see the negative one showing up

I was trying to get all the labels including the min and max one. However, it didn't show up I came across this github bug request to apexCharts and the fix was added here

Solution

A missing first label is an issue that apexcharts struggles with, see this thread.

The fix seems to be setting an offsetX for the axis.

const series = [
    {
        name: 'Males',
        data: [120000, 50000, 10000, 120000, 50000, 10000],
    },
    {
        name: 'Females',
        data: [-200000, -151000, -70000, -250000, -151000, -70000],
    },
];
const options = {
    chart: {
        type: 'bar',
        id: 'horizontal-bar',
        stacked: true,
        toolbar: {
            show: false,
        },
    },
    series,
    colors: ['#68D241', '#FF0D35'],
    plotOptions: {
        bar: {
            horizontal: true,
            barHeight: '60%',
            borderRadius: 5,
            borderRadiusWhenStacked: 'all',
        },
    },
    dataLabels: {
        enabled: false,
    },
    stroke: {
        width: 1,
        colors: ['#fff'],
    },
    legend: {
        show: false,
    },

    grid: {
        xaxis: {
            lines: {
                show: true,
            },
        },
        yaxis: {
            lines: {
                show: false,
            },
        },
    },
    xaxis: {
        categories: ['TRUE ICP', 'AC 03', 'AC 04', 'AC 05', 'AC 06', 'IC 02'],
        labels: {
            formatter(val) {
                const formattedValue = `$${Math.abs(parseFloat(val)).toLocaleString()}`;
                return parseFloat(val) < 0 ? `-${formattedValue}` : `${formattedValue}`;
            },
            offsetX: -10
        },
        axisBorder: {
            show: false,
        },
        tickAmount: 4
    },
    yaxis: {
        min:  -300000,
        max: 300000,
        showAlways: true,
    },
};

const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

<div id="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.37.1/apexcharts.min.js"
        integrity="sha512-hl0UXLK2ElpaU9SHbuVNsvFv2BaYszlhxB2EntUy5FTGdfg9wFJrJG2JDcT4iyKmWeuDLmK+Nr2hLoq2sKk6MQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Anyway, congrats in finding out which property goes to the x axis, and which to the y axis, (especially the formatter) I think it's a mess and they should fix it.

Answered By - kikon