Chartjs-Bootstrap > Extend ChartJS canvas horizontally to match overflowing columns

by

0👍

✅

I’ve actually got it sorted with Jquery. The columns are still responsive

$(‘.target’).css(‘width’, $(‘.source’)[0].scrollWidth)

https://jsfiddle.net/gabes/tapfjkuh/6/

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ['', '', '', '', '', '', '', '', ''],
    datasets: [{
        label: "foo",
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        fill: false,
        tension: 0.3,
        datalabels: {
          align: "bottom",
          offset: 10,
        },
      },
      {
        label: "bar",
        data: [10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
        tension: 0.3,
        fill: "-1",
        backgroundColor: "rgba(255,193,8,0.5)",
      },
    ],
  },
  options: {
            maintainAspectRatio: false,
      }
});

$('.target').css('width', $('.source')[0].scrollWidth)
.topParent {
  
  border: 1px solid red;
}

.container {
  overflow-x: scroll;
  border: 1px solid blue;
}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.target{
  width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='topParent'>

  <div class="container">
    <div class="row d-flex flex-nowrap source">
      <div class="col col-3">
        1 of 7
      </div>
      <div class="col col-3">
        2 of 7
      </div>
      <div class="col col-3">
        3 of 7
      </div>
      <div class="col col-3">
        4 of 7
      </div>
      <div class="col col-3">
        5 of 7
      </div>
      <div class="col col-3">
        6 of 7
      </div>
      <div class="col col-3">
        7 of 7
      </div>
    </div>
    <div class="row target">
      <div class="col">
        <canvas id='myChart' height='100px' ></canvas>
      </div>
    </div>
  </div>
</div>

0👍

The problem isn’t with the chart, it’s with the "n" columns row. From the Boostrap docs (emphasis mine):

Use our powerful mobile-first flexbox grid to build layouts of all
shapes and sizes thanks to a twelve column system, six default
responsive tiers, Sass variables and mixins, and dozens of predefined
classes.

You’ve got seven col-3 elements, adding up to twenty-one columns. This causes the row element to expand beyond the size of it’s parent container.

Remove the col-3 class from each element to have Bootstrap size them equally within the bounds of the parent container.

Leave a comment