Avoid displaying y axis label and points when there is no data: HIghcharts

Question

I am trying to plot a stacked bar graph using highcharts. I need to avoid the y axis label "Count" and the range from the y axis when there is no data for the graph. But need to bring back the label as well as the value when there is some data. Can someone help me with this

Sandbox: https://codesandbox.io/s/cranky-thunder-edtcy

import React from "react";
import ReactDOM from "react-dom";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const axisData = [
  "12/16/2019",
  "12/17/2019",
  "12/18/2019",
  "12/19/2019",
  "12/20/2019",
  "12/21/2019",
  "12/22/2019",
  "12/23/2019"
];
const seriesData = [
  { name: "item1", data: [0, 0, 0, 0, 0, 0, 0, 0] },
  { name: "item2", data: [0, 0, 0, 0, 0, 0, 0, 0] },
  { name: "item3", data: [0, 0, 0, 0, 0, 0, 0, 0] }
];
const options = {
  chart: {
    type: "column",
    height: 152
  },
  credits: false,
  exporting: { enabled: false },
  title: {
    text: ""
  },
  xAxis: {
    categories: axisData
  },
  yAxis: {
    stackLabels: {
      enabled: false,
      align: "center"
    },
    visible: true,
    title: { enabled: true, text: "Count" }
  },
  plotOptions: {
    column: {
      stacking: "normal"
    }
  },
  legend: {
    symbolRadius: 0
  },
  tooltip: { enabled: true },
  series: seriesData
};

class App extends React.Component {
  render() {
    return (
      <>
        <HighchartsReact highcharts={Highcharts} options={options} />
      </>
    );
  }
}

Answer 1

Try this code.It will works for you.

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
const axisData = [
  "12/16/2019",
  "12/17/2019",
  "12/18/2019",
  "12/19/2019",
  "12/20/2019",
  "12/21/2019",
  "12/22/2019",
  "12/23/2019"
];
const seriesData = [
  { name: "item1", data: [10, 0, 0, 0, 0, 0, 0, 0] },
  { name: "item2", data: [0, 0, 0, 0, 0, 0, 0, 0] },
  { name: "item3", data: [0, 0, 0, 0, 0, 0, 0, 0] }
];

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      options: {
        chart: {
          type: "column",
          height: 152
        },
        credits: false,
        exporting: { enabled: false },
        title: {
          text: ""
        },
        xAxis: {
          categories: axisData
        },
        yAxis: {
          stackLabels: {
            enabled: false,
            align: "center"
          },
          visible: false,
          title: { enabled: false, text: "Count" }
        },
        plotOptions: {
          column: {
            stacking: "normal"
          }
        },
        legend: {
          symbolRadius: 0
        },
        tooltip: { enabled: true },
        series: seriesData
      }
    };
  }
  componentWillMount() {
    seriesData.map(data => {
      data.data.map(item => {
        if (item != 0) {
          this.state.options.yAxis.visible = true;
          console.log("------", this.state.options.yAxis.visible);
        }
      });
    });
  }
  render() {
    return (
      <>
        <HighchartsReact highcharts={Highcharts} options={this.state.options} />
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Demo Link:https://codesandbox.io/s/ecstatic-oskar-se6pe