My ChartJS Line needs to click the color legend first before it plots the data

Question

I am using Chart JS to display sensor readings coming from a firebase firestore database. I encountered this weird bug where my chart doesn't plot initially the data >> https://imgur.com/gallery/2AoVdo7 but after I click the color legend twice >> https://imgur.com/gallery/acdblsA or press f12 developer tools, the plot suddenly appears >>> https://imgur.com/gallery/IMxEdZ3. Is this a bug or there is something wrong with my code?

here is my code:

import {Getfs} from '../firestore';
import {Line} from 'react-chartjs-2';
import {useEffect} from "react";
import {Chart as ChartJS, Title, Tooltip, LineElement, Legend, CategoryScale, LinearScale, PointElement, } from 'chart.js';

ChartJS.register(
    Title,Tooltip, LineElement, Legend, CategoryScale, LinearScale, PointElement
)

export default function Graph (){
    var sen_readings;
    var c_label = [];
    var ph_data = [];
    var temp_data = [];
    var tur_data = [];
    var dis_data = [];
    useEffect(() => {
        sen_readings = Getfs();
        sen_readings.then(function(result){
            for (var i = 0; i < result.length; i++){
                c_label.push(result[i].time);
                ph_data.push(result[i].pH);
                temp_data.push(result[i].temperature);
                tur_data.push(result[i].turbidity);
                dis_data.push(result[i].disO);
            }
        })
    }, []);

    function makeCHART_PH(){
        const ph_chart = {
            labels: c_label,
            datasets:[{
                label:"pH Readings",
                data: ph_data,
                backgroundColor: 'blue',
            }]
        }
        return ph_chart;
    }

    function makeCHART_DISOLVE(){
        const diso_chart = {
            labels: c_label,
            datasets:[{
                label:"Dissolved Oxygen Readings",
                data: dis_data,
                backgroundColor: 'blue',
            }]
        }
        return diso_chart;
    }

    function makeCHART_TEMP(){
        const temp_chart = {
            labels: c_label,
            datasets:[{
                label:"Temperature Readings",
                data: temp_data,
                backgroundColor: 'blue',
            }]
        }
        return temp_chart;
    }

    function makeCHART_TURBID(){
        const tur_chart = {
            labels: c_label,
            datasets:[{
                label:"Turbidity Readings",
                data: tur_data,
                backgroundColor: 'blue',
            }]
        }
        return tur_chart;
    }

    return(
        <div>
            <form>
                <h3>Select Date Range:</h3>
                <div class="date1">
                    <input type="date" class = "d1"/>
                </div>
                <p>to</p>
                <div class="date2">
                    <input type="date" class = "d2"/>
                </div>
            </form>
            <div class="datasets">
                <h2>Data Table</h2>                
                    <table>
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Time</th>
                                <th>pH</th>
                                <th>Temperature (°C)</th>
                                <th>Dissolved Oxygen (mg/L)</th>
                                <th>Turbidity (JTU)</th>
                            </tr>
                        </thead>
                        <tbody id= "tbody1" ></tbody> 
                    </table>
                 <a href="#">Show All</a>
            </div>
            <div class="chartWrapper">
                <div class="chartAreaWrapper">
                    <Line data ={makeCHART_PH()} style = {{width: '100%', height: '500px' }}></Line>
                    <Line data ={makeCHART_TURBID()} style = {{width: '100%', height: '500px' }}></Line>
                    <Line data ={makeCHART_TEMP()} style = {{width: '100%', height: '500px' }}></Line>
                    <Line data ={makeCHART_DISOLVE()} style = {{width: '100%', height: '500px' }}></Line>
                </div>
            </div>
        </div>
        
    )
}

Answer 1

Data is called as a function. Make data as a state Object variable. like {"chart_PH":[], "chart_Dissolve":[]} and set them using the function.

add your data variable inside your useEffect dependency array. For Ex: From [] to [data]. [] in dependency means, it will load only on the first render. [data] means, it will render every time the data changes.