Apexcharts: How to force an axis in bar chart to display integer values only?

Question

I'm using bar chart from ApexCharts. The horizontal x axis has counts of items. When the number goes too low like 1, 2, the axis shows intermediate decimal values which doesn't make sense. How to force the axis to display only integer values only with ticks at integer intervals like in second image. Vue template

        <apexchart
          ref="ratingChart"
          width="450"
          height="250"
          :options="ratingData.options"
          :series="ratingData.series"
        ></apexchart>

Javascript

data: function () {
    return {
      ratingData: {
        options: {
          chart: {
            id: "item-rating",
            type: "bar",
          },
          title: {
            text: "Item by Rating",
            align: "center",
            margin: 10,
            offsetX: 0,
            offsetY: 0,
            floating: false,
            style: {
              fontSize: "14px",
              fontWeight: "normal",
              fontFamily: "Arial",
              color: "#595959",
            },
          },
          noData: {
            text: "Loading...",
          },
          xaxis: {
            categories: ["Very High", "High", "Medium", "Low", "Eliminated"],
            type: "category",
            tickPlacement: "on",
            labels: {
              rotate: 0,
              rotateAlways: false,
            },
            decimalsInFloat: 0,
          },
          colors: ["#E53935", "#FFA726", "#FDD835", "#7CB342", "#29B6F6"],
          dataLabels: {
            enabled: true,
          },
          plotOptions: {
            bar: {
              distributed: true,
              borderRadius: 0,
              horizontal: true,
            },
          },
        },
        series: [
          {
            name: "itemCount",
            data: [10, 4, 8, 9, 3],
            //data: [1, 2, 2, 1, 3], // for low counts
          },
        ],
      },
    }
}

if you add your codes it can more helpful for supporter. – SefaUn Dec 13 '21 at 14:22 — SefaUn, Dec 13 '21 at 14:22

score 5 · Answer 1 · answered Feb 27 '22 at 08:23

Read it issue Can I have only integer values in Y . You should append the option into xaxis

labels: {
  formatter: function (val) {
    return val.toFixed(0);
  }
},

This is applicable for x-axis. In your case:

xaxis: {
            categories: ["Very High", "High", "Medium", "Low", "Eliminated"],
            type: "category",
            tickPlacement: "on",
            labels: {
              rotate: 0,
              rotateAlways: false,
              formatter: function (val) {
                return val.toFixed(0);
              }
            },
            decimalsInFloat: 0,
          },

Hi wwwyzzerdddotcom, I'm sorry, I missed the notification on this one. I'm seeing it after almost an year, the problem still existed. Thanks for your solution, I was able to use it. — kashyap, Jan 18 '23 at 15:47

Apexcharts: How to force an axis in bar chart to display integer values only?

1 Answers1