4

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 component 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 completes I want to display the chart giving a better user experience]Screenshot

Tarun Singh
  • 430
  • 8
  • 18

1 Answers1

11

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

noData: {  
  text: "Loading...",  
  align: 'center',  
  verticalAlign: 'middle',  
  offsetX: 0,  
  offsetY: 0,  
  style: {  
    color: "#000000",  
    fontSize: '14px',  
    fontFamily: "Helvetica"  
  }  
}

Refer to it in the documentation on below link.

Neel Prajapati
  • 190
  • 1
  • 2
  • 12
  • 1
    Please consider marking this as answer if it did resolve the issue. – Neel Prajapati May 23 '21 at 07:01
  • 1
    This approach should be used with care. When there is no data for real, the chart will continue to show "Loading...", which in turn confuses both users and devs :) – Morpheus Apr 03 '23 at 11:41
  • noData should be used only in the scenario when there is actually no data to show instead of using it as a loading placeholder – Ganesh K Jul 21 '23 at 05:20