More than one chart with Chart.js

Question

Hello,

I’m having trouble trying to show more than two charts with Chart.js; at the moment I have two charts that load perfectly in my code (ctx, ctx2), already when I try to load the third one, it does not show and it results in my console:

Follows tbm code: https://jsbin.com/yibutifodo/1/edit?html,js,output

Grateful.

Answer 1

$(function() {
  var optionsBar = {
    responsive: true,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };

  var dataBar = {
    labels: [2015, 2016, 2017],
    datasets: [{
      label: "CPF's Enviados",
      backgroundColor: "rgba(0,51,90,0.8)",
      borderColor: "rgba(0,51,90,0.9)",
      borderWidth: 2,
      hoverBackgroundColor: "rgba(0,51,90,0.9)",
      hoverBorderColor: "rgba(0,51,90,1)",
      data: [555, 666, 777]
    }, {
      label: "Propostas Finalizadas",
      backgroundColor: "rgba(0,130,229,0.8)",
      borderColor: "rgba(0,130,229,0.9)",
      borderWidth: 2,
      hoverBackgroundColor: "rgba(0,130,229,0.9)",
      hoverBorderColor: "rgba(0,130,229,1)",
      data: [444, 555, 666]
    }, {
      label: "Propostas Aprovadas",
      backgroundColor: "rgba(43,139,74,0.8)",
      borderColor: "rgba(43,139,74,0.9)",
      borderWidth: 2,
      hoverBackgroundColor: "rgba(43,139,74,0.9)",
      hoverBorderColor: "rgba(43,139,74,1)",
      data: [333, 444, 555]
    }]
  };

  var optionsLine = {
    responsive: true,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };

  var dataLine = {
    labels: ['2015', '2016', '2017'],
    datasets: [{
      label: "% Aprovação (Propostas Finalizadas PDV)",
      fill: false,
      backgroundColor: "rgba(255,108,0,0.7)",
      borderColor: "rgba(255,108,0,1)",
      borderWidth: 4,
      data: [44, 55, 66]
    }, {
      label: "% Aproveitamento (CPF's Únicos PDV)",
      fill: false,
      backgroundColor: "rgba(255,246,0,0.6)",
      borderColor: "rgba(255,246,0,1)",
      borderWidth: 4,
      data: [33, 44, 55]
    }]
  };

  var options1 = {
    responsive: true,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };

  var data1 = {
    labels: ['2015', '2016', '2017'],
    datasets: [{
      label: "% IPP 1ª COMPRA",
      fill: false,
      backgroundColor: "rgba(33, 107, 57,0.7)",
      borderColor: "rgba(33, 107, 57,1)",
      borderWidth: 4,
      data: [33, 22, 99]
    }, {
      label: "% IPP JUROS + ALÇADA",
      fill: false,
      backgroundColor: "rgba(23, 81, 125,0.7)",
      borderColor: "rgba(23, 81, 125,1)",
      borderWidth: 4,
      data: [78, 45, 96]
    }, {
      label: "% IPP SEGUROS",
      fill: false,
      backgroundColor: "rgba(255,0,255,0.7)",
      borderColor: "rgba(255,0,255,1)",
      borderWidth: 4,
      data: [36, 19, 55]
    }]
  };


  function gerarGraficos() {
    var ctx = document.getElementById("chart-one").getContext("2d");
    var BarChart2 = new Chart(ctx, {
      type: 'bar',
      data: dataBar,
      options: optionsBar
    });

    var ctx2 = document.getElementById("chart-two").getContext("2d");
    var LineChart = new Chart(ctx2, {
      type: 'line',
      data: dataLine,
      options: optionsLine
    });

    var ctx3 = document.getElementById("chart-three").getContext("2d");
    var LineChart2 = new Chart(ctx3, {
      type: 'line',
      data: data1,
      options: options1
    });
  }

  gerarGraficos();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="chart-one"></canvas>
<canvas id="chart-three"></canvas>
<canvas id="chart-two"></canvas>