Chart.js (v2) Pattern Fills

by Akihiko Kusanagi

HTML

<script src="https://cdn.jsdelivr.net/gh/nagix/nagix.github.io@chartjs/Chart.5961.js"></script>
<div class="small">
  <canvas id="chartSmall" width="100%" height="100%"></canvas>
</div>
<div class="large">
  <canvas id="myChart" width="100%" height="100%"></canvas>
</div>
<p>
  Turning off axis fixes issue. However this workaround is not useable.
</p>
<div class="small">
  <canvas id="chartSmallNoAxis" width="100%" height="100%"></canvas>
</div>

CSS

.small {
  height: 185px;
  width: 205px;
  border: 1px solid red;
}

.large {
  height: 165px;
  width: 382px;
  border: 1px solid red;
}

JavaScript

var data = {
  labels: [
    "Aaron",
    "Adam",
    "Albert",
    "Alex",
    "Allan",
    "Aman",
    "Anthony",
    "Autoenrolment",
    "Avril",
    "Bernard"
  ],
  datasets: [{
    backgroundColor: "rgba(252,233,79,0.5)",
    borderColor: "rgba(252,233,79,1)",
    borderWidth: 1,
    data: [101,
      185,
      24,
      311,
      17,
      21,
      462,
      340,
      140,
      24
    ]
  }]
}
var data2 = {
  labels: [
    "Aaron",
    "Adam",
    "Albert",
    "Alex",
    "Allan",
    "Aman",
    "Anthony",
    "Autoenrolment",
    "Avril",
    "Bernard"
  ],
  datasets: [{
    backgroundColor: "rgba(252,233,79,0.5)",
    borderColor: "rgba(252,233,79,1)",
    borderWidth: 1,
    data: [101,
      185,
      24,
      311,
      17,
      21,
      462,
      340,
      140,
      24
    ]
  }]
}
var data3 = {
  labels: [
    "Aaron",
    "Adam",
    "Albert",
    "Alex",
    "Allan",
    "Aman",
    "Anthony",
    "Autoenrolment",
    "Avril",
    "Bernard"
  ],
  datasets: [{
    backgroundColor: "rgba(252,233,79,0.5)",
    borderColor: "rgba(252,233,79,1)",
    borderWidth: 1,
    data: [101,
      185,
      24,
      311,
      17,
      21,
      462,
      340,
      140,
      24
    ]
  }]
}

var ctx = document.getElementById('chartSmall').getContext("2d");
var ctxLarge = document.getElementById('myChart').getContext("2d");
var ctsNoAxis = document.getElementById('chartSmallNoAxis').getContext("2d");

new Chart(ctxLarge, {
  type: 'line',
  data: data,
  options: {
    maintainAspectRatio: false
  }
});

new Chart(ctx, {
  type: 'line',
  data: data2,
  options: {
    maintainAspectRatio: false
  }
});

new Chart(ctsNoAxis, {
  type: 'line',
  data: data3,
  options: {
    maintainAspectRatio: false,
    scales: {
      xAxes: [{
        display: false
      }]
    }
  }
});