I spent a day figuring this out but was unavailable to find a solution. Please if anyone can help.

So I was making a cryptocurrency tracker in React. I managed to create a table displaying several currencies and also a column where I render Apexchart for various currencies based on the JSON data that's already saved with me in a javascript file i.e I'm not making any call to API to get the data. I already have static data with me. I just rendered the static data in the form of a table.

Now the problem is with the loading time of the page. As I need to render apexcharts for all the currencies(I'm displaying 100 in total), displaying them slows down the user experience.

To improve the user experience I want to add a placeholder text "loading..." and when the apexchart is done loading only then I want to display the chart.

Below is my Graph ponent that's responsible for loading my apexchart.

import Chart from 'react-apexcharts';
import { ChartData } from '../data/ChartData';

class Graph extends Component {
  state = {
    options: {
      stroke: {
        width: 1.7,
      },
      grid: {
        show: false,
      },
      datalabels: {
        enabled: false,
      },
      tooltip: {
        enabled: false,
      },
      chart: {
        animations: {
          enabled: false,
        },
        toolbar: {
          show: false,
        },
        zoom: {
          enabled: false,
        },
      },
      yaxis: {
        show: false,
        labels: {
          formatter: function () {
            return '';
          },
        },
      },
      xaxis: {
        labels: {
          formatter: function () {
            return '';
          },
        },
        tooltip: {
          enabled: false,
        },
      },
    },

    series: [
      {
        name: 'USD',
        data: ChartData[this.props.idx].data,
      },
    ],
  };

  render() {
    return (
      <div className="graph">
        <div className="row">
          <div className="mixed-chart">
            <Chart
              options={this.state.options}
              series={this.state.series}
              type="line"
              width="200px"
              height="100px"
            />
          </div>
        </div>
      </div>
    );
  }
}

export default Graph;

![As you can see I have my Apexchart plotted. Now as it takes time to load the chart I want to add a placeholder text "loading" and when the chart loading pletes I want to display the chart giving a better user experience]Screenshot

I spent a day figuring this out but was unavailable to find a solution. Please if anyone can help.

So I was making a cryptocurrency tracker in React. I managed to create a table displaying several currencies and also a column where I render Apexchart for various currencies based on the JSON data that's already saved with me in a javascript file i.e I'm not making any call to API to get the data. I already have static data with me. I just rendered the static data in the form of a table.

Now the problem is with the loading time of the page. As I need to render apexcharts for all the currencies(I'm displaying 100 in total), displaying them slows down the user experience.

To improve the user experience I want to add a placeholder text "loading..." and when the apexchart is done loading only then I want to display the chart.

Below is my Graph ponent that's responsible for loading my apexchart.

import Chart from 'react-apexcharts';
import { ChartData } from '../data/ChartData';

class Graph extends Component {
  state = {
    options: {
      stroke: {
        width: 1.7,
      },
      grid: {
        show: false,
      },
      datalabels: {
        enabled: false,
      },
      tooltip: {
        enabled: false,
      },
      chart: {
        animations: {
          enabled: false,
        },
        toolbar: {
          show: false,
        },
        zoom: {
          enabled: false,
        },
      },
      yaxis: {
        show: false,
        labels: {
          formatter: function () {
            return '';
          },
        },
      },
      xaxis: {
        labels: {
          formatter: function () {
            return '';
          },
        },
        tooltip: {
          enabled: false,
        },
      },
    },

    series: [
      {
        name: 'USD',
        data: ChartData[this.props.idx].data,
      },
    ],
  };

  render() {
    return (
      <div className="graph">
        <div className="row">
          <div className="mixed-chart">
            <Chart
              options={this.state.options}
              series={this.state.series}
              type="line"
              width="200px"
              height="100px"
            />
          </div>
        </div>
      </div>
    );
  }
}

export default Graph;

![As you can see I have my Apexchart plotted. Now as it takes time to load the chart I want to add a placeholder text "loading" and when the chart loading pletes I want to display the chart giving a better user experience]Screenshot

• javascript
• reactjs
• charts
• apexcharts

1 Answer 1

You just need to add the object nodata to the existing options object. The following is the object definition:

Use the conditional operator to show Loading only when the data is actually being loaded. Thanks @Morpheus for pointing this out

noData: {  
  text: isDataBeingFetched ? "Loading...":"No Data present in the graph!",  
  align: 'center',  
  verticalAlign: 'middle',  
  offsetX: 0,  
  offsetY: 0,  
  style: {  
    color: "#000000",  
    fontSize: '14px',  
    fontFamily: "Helvetica"  
  }  
}

Refer to it in the documentation on below link.

• https://apexcharts./docs/options/nodata/