[Chartjs]-React: How to get loading spinner to show whilst API data loads into my chart.js chart

You have to use the NOT operator on the loading variable within the ternary operator to get the chart to display when data is fetched.

...
{!loading ? 
            <Line
              data={chartData}
              options={{
                responsive: true,
                title: { text: "2020-09-01T15:30Z - 2020-09-10T17:00Z", display: true },
                scales: {
                  yAxes: [
                    {
                      ticks: {
                        autoSkip: true,
                        maxTicksLimit: 100,
                        beginAtZero: true
                      },
                      gridLines: {
                        display: false
                      },
                      scaleLabel: {
                          display: true,
                          labelString: "Actual"
                      }
                    }
                  ],
                  xAxes: [
                    {
                      gridLines: {
                        display: false
                      },
                      scaleLabel: {
                          display: true,
                          labelString: "Forecast"
                      }
    
                    }
                  ]
                }
              }} /> : <ReactBootStrap.Spinner animation="border"/> }
...

References:

React. AJAX and APIs. https://reactjs.org/docs/faq-ajax.html. (Accessed December 2020)