Chartjs-Chart.js chart not displaying until I open the browser's console

by

3👍

✅

So I think you are loading the data before the chart is finished rendering. When you open/close the console it is resizing the window which triggers a re-render and shows the data properly. You can fix this by creating the chart after the data is done loading.

Edit: Changed to call chart.update() per OP’s request.

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Playing with Covid19 data</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
</head>

<body>
  <canvas id="deathChart" width="100" height="50"></canvas>

  <script>
    const api_url = "https://covidtracking.com/api/us/daily"
    let dates = [],
      deaths = [],
      hospitalizations = [],
      negatives = [],
      positives = [],
      recoveries = [],
      onVentilatorCurrently_list = []


    function getData(chart) {
      console.log("About to fetch the data")
      fetch(api_url)
        .then(response => response.json())
        .then(data => {
          for (let row of data) {
            let {
              date,
              death,
              hospitalized,
              negative,
              onVentilatorCurrently,
              positive,
              recovered
            } = row
            dates.splice(0, 0, date)
            deaths.splice(0, 0, death)
            hospitalizations.splice(0, 0, hospitalized)
            negatives.splice(0, 0, negative)
            onVentilatorCurrently_list.splice(0, 0, onVentilatorCurrently)
            positives.splice(0, 0, positive)
            recoveries.splice(0, 0, recovered)
          }
          console.log("Finished fetching the data")
          chart.update();
        })
    }

    let death_config = {
      type: 'line',
      data: {
        labels: dates,
        datasets: [{
          label: "Deaths from Covid-19",
          data: deaths,
          fill: false,
          borderColor: 'rgba(255, 99, 132, 1)',
          backgroundColor: 'rgba(255, 99, 132, 0.5)',
          borderWidth: 1
        }]
      },
      options: {
        tooltips: {
          mode: "index",
          intersect: false,
        },
      }
    }

    let death_ctx = document.getElementById('deathChart').getContext('2d')
    let deathChart = new Chart(death_ctx, death_config)

    getData(deathChart);
  </script>
</body>

0👍

Check

              
        const api_url = "https://covidtracking.com/api/us/daily";

        let dates = [], 
            deaths =[], 
            hospitalizations = [], 
            negatives = [], 
            positives = [], 
            recoveries = [], 
            onVentilatorCurrently_list = []


        function getData(){
          
            console.log("About to fetch the data")
            fetch(api_url)
            .then(response => response.json())
            .then(data => {
                for(let row of data){
                    let {date, death, hospitalized, negative, onVentilatorCurrently, positive, recovered} = row
                    dates.splice(0, 0, date)
                    deaths.splice(0, 0, death)
                    hospitalizations.splice(0, 0, hospitalized)
                    negatives.splice(0, 0, negative)
                    onVentilatorCurrently_list.splice(0, 0, onVentilatorCurrently)
                    positives.splice(0, 0, positive)
                    recoveries.splice(0, 0, recovered)
                }
                console.log("Finished fetching the data")
            })
        }

        getData()
        
        let death_config = {
         
                type: 'line',
                data:
                {
                    labels: dates,
                    datasets: [
                        {
                            label: "Deaths from Covid-19",
                            data: deaths,
                            fill: false,
                            borderColor: 'rgba(255, 99, 132, 1)',
                            backgroundColor: 'rgba(255, 99, 132, 0.5)',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    tooltips: {
                    mode: "index",
                    intersect: false,
                       responsive: true,
      maintainAspectRatio: true
                    },
                }
            }

let death_ctx = document.getElementById('deathChart').getContext('2d')
let deathChart = new Chart(death_ctx, death_config)

setTimeout(function() { deathChart.update(); },1000);
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">



<div><canvas id="deathChart" width="100" height="50"></canvas></div>

Leave a comment