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: https://codesandbox.io/s/react-line-chart-forked-0409lk?file=/src/LineChart.js

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";
HC_exporting(Highcharts);

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;

CodePudding user response：

You should put the tickInterval: 1, in the yAxis