Skip to content

How to remove decimal values on x-axis of bar chart : Highcharts

I am having trouble setting integer only values to the x-axis of the bar chart. Can someone help me as to how to solve this.

This is my sandbox:

Have tried, allowDecimal: false, min:0, float:0. Nothing worked out.

Help is appreciated

import * as React from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import HC_exporting from "highcharts/modules/exporting";

function Chart(props) {
  const chartOptions = {
    chart: {
      type: "bar",
      height: 250
    xAxis: {
      type: "category",
      visible: true,
      gridLineWidth: 1,
      floor: 0,
      tickInterval: 1,
      min: 0
    yAxis: {
      min: 0,
      title: {
        text: null
    plotOptions: {
      column: {
        dataLabels: {
          enabled: true,
          crop: false,
          overflow: "none"
    series: [{ data: props.chartData }]
  return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;

export default Chart;



You should put the tickInterval: 1, in the yAxis