Chart.js #6287

by Akihiko Kusanagi

HTML

<script src="https://cdn.jsdelivr.net/gh/nagix/nagix.github.io@chartjs/Chart.6287.js"></script>
<div>
  <canvas id="myChart"></canvas>
</div>

JavaScript

var imageCanvas = document.createElement('canvas');
var imageContext = imageCanvas.getContext('2d');

imageCanvas.width = 24;
imageCanvas.height = 24;

imageContext.fillStyle = '#f00';
imageContext.beginPath();
imageContext.moveTo(12, 0);
imageContext.lineTo(6, 24);
imageContext.lineTo(12, 18);
imageContext.closePath();
imageContext.fill();

imageContext.fillStyle = '#a00';
imageContext.beginPath();
imageContext.moveTo(12, 0);
imageContext.lineTo(18, 24);
imageContext.lineTo(12, 18);
imageContext.closePath();
imageContext.fill();

new Chart(document.getElementById("myChart"), {
  type: 'line',
  data: {
    labels: [0, 1, 2, 3, 4],
    datasets: [{
      label: 'Wind',
      data: [1, 0, 3, 4, 2],
      pointStyle: imageCanvas,
      rotation: [30, 0, -30, -45, -60],
      fill: false
    }]
  },
  options: {
    legend: {
      labels: {
	      usePointStyle: true
      }
    },
    layout: {
    	padding: 12
    }
  }
});