Responsive chart in table cell

Stolen from rtfbw58a/11/

by philw

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<table>
  <tr>
    <td style="width:200px">A Column</td>
    <td>
      <div class="wrapper"><canvas id="created-chart"></canvas></div>
    </td>
    <td class="width:100px">Another Column</td>
  </tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

CSS

table {
  width: 100%
}

JavaScript

const createdChart = {
  type: 'line',
  data: {
    datasets: [{
      data: [1, 6, 4, 3, 1, 7, 3],
      backgroundColor: ['rgba(75, 192, 192, 0.2)'],
      borderColor: ['rgba(75, 192, 192, 1)']
    }]
  }

};
//new Chart(document.getElementById('created-chart').getContext('2d'), createdChart);
new Chart(document.getElementById('created-chart').getContext('2d'), createdChart);