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} />
      </>
    );
  }
}

score 2 · Accepted Answer · answered Dec 31 '19 at 07:57

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

Sebastian Wędzel · Answer 2 · 2019-12-31T12:38:40.200

You can also add a checking functionality inside the render callback to hide all yAxis properties when dataMax is equal 0.

Demo: https://codesandbox.io/s/smoosh-leftpad-jr49j

events: {
  render() {
    let chart = this,
      yAxis = chart.yAxis[0];

    if (!yAxis.dataMax) {
      yAxis.axisTitle.hide();
      yAxis.labelGroup.hide();
      yAxis.gridGroup.hide();
    } else {
      yAxis.gridGroup.show();
      yAxis.axisTitle.show();
      yAxis.labelGroup.show();
    }
  }
}

API: https://api.highcharts.com/highcharts/chart.events.render

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

2 Answers2