Chartjs Splitting Double Digit Numbers

I have seen this question asked a few times but I couldn't find a solution that worked for me. I am passing a Django variable into Chartjs to plot, all of the single-digit numbers

Solution 1:

You can push that values inside array instead of directly passing them to your data. So , you can add this in your js code i.e :

  var home_runs = [];
  '{% for game in all_games.home_ten %}'
     home_runs.push(parseInt('{{ game.runs }}'))
  '{% endfor %}'

Demo Code :

/* var home_runs = [];
 {% for game in all_games.home_ten %}
home_runs.push(parseInt('{{ game.runs }}'))
{% endfor %}*/
var home_runs = [11, 52, 85, 93]
var away_runs = [12, 52, 82, 94]
var ctx = document.getElementById('runChart').getContext('2d');
var runChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["A", "B", "C", "D"],
    datasets: [{
        label: "Abc",
        data: home_runs
      },
      {
        label: "Xyz",
        data: away_runs

      }
    ],
  },
  options: {
    responsive: true,
  },
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div>
  <canvas id="runChart" height="140"></canvas>
</div>