title: Cannot display two Chart.js on one HTML page
body: <p>I am trying to display more Chart.js graphics on a single HTML page, but it does not work. I tried several approaches, but none of them had a positive result. I will attach my code:</p>
  
  <pre><code>@extends('layouts.app')
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="zxx"&gt;
  @section('content')
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"&gt;&lt;/script&gt;
  
          &lt;script src="https://cdn.jsdelivr.net/npm/patternomaly@1.3.2/dist/patternomaly.min.js"&gt;&lt;/script&gt;
  
  
      @php
      $dates = '';
      $rates = '';
      $graph_data = \App\Helpers\NjHelper::bettingData();
      foreach ($graph_data as $item){
      $dates .= "'".$item-&gt;date."',";
      $rates .= $item-&gt;bankers.",";
      }
      @endphp
  
      @php
      $datesValue = '';
      $ratesValue = '';
      $graph_data_value = \App\Helpers\NjHelper::bettingDataValueBets();
      foreach ($graph_data_value as $item){
      $datesValue .= "'".$item-&gt;date."',";
      $ratesValue .= $item-&gt;value_bet.",";
      }
      @endphp
  
  &lt;script&gt;
  $(function () {
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
      type: 'line',
      data: {
          labels: [{!! $dates !!}],
          datasets: [{
  
              label: 'Bankers Profit Per Day',
              data: [{!! $rates !!}],
  
              borderColor: [
                  'rgba(243, 156, 18, 1)',
                  'rgba(243, 156, 18, 1)',
                  'rgba(243, 156, 18, 1)'
              ],
              borderWidth: 3
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          },
          legend: {
              labels: {
  
                  fontSize: 20
              }
          }
      }
  });
  
  
  
  var ctx_2 = document.getElementById(chartValueBets).getContext('2d');
  var chartValueBets = new Chart(ctx_2, {
      type: 'line',
      data: {
          labels: [{!! $datesValue !!}],
          datasets: [{
  
              label: 'Value Bets Profit Per Day',
              data: [{!! $ratesValue !!}],
  
              borderColor: [
                  'rgba(243, 156, 18, 1)',
                  'rgba(243, 156, 18, 1)',
                  'rgba(243, 156, 18, 1)'
              ],
              borderWidth: 3
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          },
          legend: {
              labels: {
  
                  fontSize: 20
              }
          }
      }
  });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;div class="col-lg-12 col-xl-4"&gt;
  
  
          &lt;canvas id="myChart" width="400" height="400"&gt;&lt;/canvas&gt;
          &lt;canvas id="chartValueBets" width="400" height="400"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
  @endsection
  &lt;/html&gt;
  </code></pre>
  
  <p>The data that I want to be displayed comes from some SQL queries, this is the reason why I have those two @php sections before the charts.</p>
  
  <p>Only the first chart appears on my HTML page, the one with the name "myChart".</p>
  
  <p>Does anyone know what I could do in order to make the second one appear as well?</p>