How to fix first and last dataLabels on stacked grouped bar chart for ApexCharts

93 views Asked by At

When I create a stacked grouped bar chart the first and last dataLabels don't show.

Here is the configuration that I feel matters:

chart: {
    type: "bar",
    stacked: true,
    height: 400,
    zoom: {
        enabled: false,
    },
    toolbar: {
        show: false,
    },
},
colors: this.colors,
dataLabels: {
    enabled: true,
    offsetY: -20,
    style: {
        colors: ["#000"],
    },
    formatter: (val: number, opts) => {
        if (opts.seriesIndex === 4) return estimatesTotals[opts.dataPointIndex];
        if (opts.seriesIndex === 2 || opts.seriesIndex === 3) return "";
        return val;
    },
},
plotOptions: {
    bar: {
        dataLabels: {
            position: "top",
            hideOverflowingLabels: false,
        },
        hideZeroBarsWhenGrouped: false,
    },
},
xaxis: {
    categories: categories,
    type: "category",
    tickPlacement: "on",
}

If I change the tickPlacement to "between" the dataLabels show but all the columns get shifted to the right instead of being centered properly (you can see some of the bars overlapping the ticks):

If I add some characters to the dataLabels in the formatter, for example ".00" then it shows the dataLabels, but it seems to be dependent on the length of the string I add for it to show.

0

There are 0 answers