Chart.js #5850

by Akihiko Kusanagi

HTML

<script src="https://rawgit.com/nagix/nagix.github.io/chartjs/Chart.5850.js"></script>
<canvas id="chart1"></canvas>

JavaScript

var roundedRect = Chart.helpers.canvas.roundedRect;

var ctx1 = document.getElementById('chart1').getContext('2d');
var chart = new Chart(ctx1, {
		type: 'line',
    plugins: [{
      afterDraw: function(chart) {
        var ctx = chart.ctx;
        ctx.strokeStyle = '#0000ff';
        ctx.lineWidth = 4;
        ctx.fillStyle = '#00ff00';
        ctx.beginPath();
        roundedRect(ctx, 10, 10, 50, 50, 25);
        roundedRect(ctx, 70, 10, 100, 50, 25);
        roundedRect(ctx, 10, 70, 50, 100, 25);
        roundedRect(ctx, 70, 70, 100, 100, 25);
        roundedRect(ctx, 180, 10, 50, 50, 100);
        roundedRect(ctx, 240, 10, 100, 50, 100);
        roundedRect(ctx, 180, 70, 50, 100, 100);
        roundedRect(ctx, 240, 70, 100, 100, 100);
        roundedRect(ctx, 350, 10, 50, 50, 0);
        ctx.fill();
        ctx.stroke();
      }
    }],
		options: {
			scales: {
				xAxes: [{display: false}],
				yAxes: [{display: false}]
			}
		}
});