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

by

1👍

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: {}
    };

0👍

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>

0👍

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

Leave a comment