Two charts in a page not working, using Chart.js 3.1.1 cdn in Laravel 8.x framework

Question

I was using a single line chart in Laravel blade file with Chart.js 3.1.1 from cdn. I also have jQuery and Bootstrap imported to blade. Everything was fine. Then I used another line chart in the same page. Then both the charts are not working now. I tried to debug in all possible ways. Not able to solve for now. There are no errors or warnings in chrome dev-console.

Any help is really appreciated. I have added my page-source-code bits for reference.

<style>
  #usersMonthlyChart, #usersWeeklyChart{
   width:100%;
  }
</style>

<div class="row">
  <div class="col-12">
    <div>
      <canvas id="usersWeeklyChart"></canvas>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-12">
    <div>
      <canvas id="usersMonthlyChart"></canvas>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.1.1/dist/chart.min.js"></script>
<script>
    const weeklyLabels = ["Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
    const weeklyData = {
      labels: weeklyLabels,
      datasets: [{
        label: 'Users registered weekly',
        backgroundColor: 'rgb(24, 99, 132)',
        borderColor: 'rgb(25, 99, 132)',
        data: [0,0,0,0,0,4],
      },
      {
        label: 'Users last seen weekly',
        backgroundColor: 'rgb(12, 99, 132)',
        borderColor: 'rgb(10, 99, 132)',
        data: [0,0,0,0,0,4],
      }]
    };
    const weeklyConfig = {
      type: 'line',
      weeklyData,
      options: {}
    };
    var usersWeeklyChart = new Chart(
      document.getElementById('usersWeeklyChart'),
      weeklyConfig
    );
  </script>
  <script>
    const monthlyLabels = ["November","December","January","February","March","April"];
    const monthlyData = {
      labels: monthlyLabels,
      datasets: [{
        label: 'Users registered monthly',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [0,0,0,0,0,4],
      },
      {
        label: 'Users last seen monthly',
        backgroundColor: 'rgb(100, 99, 132)',
        borderColor: 'rgb(100, 99, 132)',
        data: [0,0,0,0,0,4],
      }]
    };
    const monthlyConfig = {
      type: 'line',
      monthlyData,
      options: {}
    };
    var usersMonthlyChart = new Chart(
      document.getElementById('usersMonthlyChart'),
      monthlyConfig
    );
</script>

Answer 1

ok. i found the answer. when using line chart in a blade using chartjs 3.1.1 and laravel 8.x, there are two cases.

case 1: if only one chart is present then, below code works. observe that data key is kind-of optional. value is required.

const config = {
  type: 'line',
  data,
  options: {}
};

case 2: when using two charts, data key is required. if you dont use data key as shown below, charts wont appear on screen, no console errors, no way to debug.

const config = {
  type: 'line',
  data: myData,
  options: {}
};

for a cherry-cake-tip goto this github link. github issue

Answer 2

I am not familiar with ChartJS but I set up a JSFiddle and played around with your code.

I found that the config object you pass to new Chart() must have an element of name data. So instead of:

const weeklyConfig = {
  type: 'line',
  weeklyData,
  options: {}
};

You must use:

const weeklyConfig = {
  type: 'line',
  data: weeklyData,
  options: {}
};

(for both charts, of course).

Here's a working snippet, the only changes I made are those described above. Click "Run Snippet" to see it in action.

const weeklyLabels = ["Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
const weeklyData = {
  labels: weeklyLabels,
  datasets: [{
      label: 'Users registered weekly',
      backgroundColor: 'rgb(24, 99, 132)',
      borderColor: 'rgb(25, 99, 132)',
      data: [0, 0, 0, 0, 0, 4],
    },
    {
      label: 'Users last seen weekly',
      backgroundColor: 'rgb(12, 99, 132)',
      borderColor: 'rgb(10, 99, 132)',
      data: [0, 0, 0, 0, 0, 4],
    }
  ]
};
const weeklyConfig = {
  type: 'line',
  data: weeklyData,
  options: {}
};
var usersWeeklyChart = new Chart(
  document.getElementById('usersWeeklyChart'),
  weeklyConfig
);

const monthlyLabels = ["November", "December", "January", "February", "March", "April"];
const monthlyData = {
  labels: monthlyLabels,
  datasets: [{
      label: 'Users registered monthly',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [0, 0, 0, 0, 0, 4],
    },
    {
      label: 'Users last seen monthly',
      backgroundColor: 'rgb(100, 99, 132)',
      borderColor: 'rgb(100, 99, 132)',
      data: [0, 0, 0, 0, 0, 4],
    }
  ]
};
const monthlyConfig = {
  type: 'line',
  data: monthlyData,
  options: {}
};
var usersMonthlyChart = new Chart(
  document.getElementById('usersMonthlyChart'),
  monthlyConfig
);

  #usersMonthlyChart,
  #usersWeeklyChart {
    width: 100%;
  }

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.1.1/dist/chart.min.js"></script>
<div class="row">
  <div class="col-12">
    <div>
      <canvas id="usersWeeklyChart"></canvas>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-12">
    <div>
      <canvas id="usersMonthlyChart"></canvas>
    </div>
  </div>
</div>

Answer 3

You need to set data on options, There is a wrong parameter on

const monthlyConfig = {
      type: 'line',
      monthlyData,
      options: {}
    };

try this

const weeklyConfig = {
      type: 'line',
      data: weeklyData,
      options: {}
    };

const monthlyConfig = {
      type: 'line',
      data: monthlyData,
      options: {}
    };