katogiso/chartjs_bar_pattern_index.html

## chartjs_bar_pattern_index.html
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
  <!-- https://github.com/google/palette.js -->
  <script src="../../palette.js/palette.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
</body>

<script>

 //----------------------------------------------------------------------------
 // To make shape pattern
 //----------------------------------------------------------------------------
 //----------------------------------------------------------------------------
 function generateShape (size) {
     var canvas  = document.createElement('canvas');
     var context = canvas.getContext('2d');

     canvas.width  = size;
     canvas.height = size;

     return { canvas, context };
 }

 function square (width) {
     var shape  = generateShape(width);
     var height = width;

     shape.context.fillStyle = 'rgb(255, 255, 255)';
     shape.context.fillRect(0, 0, width / 2, height / 2);
     shape.context.fillRect(width / 2, height / 2, width / 2, height / 2);

     return shape.canvas;
 }

 function lineHorizontal (width) {
     var thickness = width / 4;
     var shape = generateShape(width);

     shape.context.fillStyle = 'rgb(255, 255, 255)';
     shape.context.fillRect(0, 0, width, thickness);
     shape.context.fillRect(0, thickness * 2, width, thickness);

     return shape.canvas;
 }

 function lineVertical (width) {
     let thickness = width / 4;
     let shape = generateShape(width);

     shape.context.fillStyle = 'rgb(255, 255, 255)';
     shape.context.fillRect(0, 0, thickness, width);
     shape.context.fillRect(thickness * 2, 0, thickness, width);

     return shape.canvas;
 }

 var shapes = {
     sq: square,
     lh: lineHorizontal,
     lv: lineVertical,
 };

 function pattern( bgColor, shape ){
     var patternCanvas  = document.createElement('canvas');
     var patternContext = patternCanvas.getContext('2d');
     var size           = 20;
     var outerSize      = size * 2;
     var shapeType      = shapes[shape];

     patternCanvas.width      = outerSize;
     patternCanvas.height     = outerSize;
     patternContext.fillStyle = bgColor;
     patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);

     pattern                  = patternContext.createPattern( shapeType(size, bgColor), 'repeat');
     patternContext.fillStyle = pattern;
     patternContext.fillRect(0, 0, outerSize, outerSize);

     patternFill           = patternContext.createPattern(patternCanvas, 'repeat');
     patternFill.shapeType = shapeType;

     return patternFill;
 }
 //----------------------------------------------------------------------------

 // get palette from palette.js
 var pal = palette('cb-BuGn', 8 );
 var ctx = document.getElementById("myChart").getContext("2d");

 //Global parameter
 Chart.defaults.global.animation             = 0;

 var myChart = new Chart(ctx, {
     type: 'bar',
     data: {
         labels: [ "Day1", "Day2", "Day3" ],
         datasets: [
             {
                 label:           "base data",
                 data:            [ 27, 33, 49 ],
                 borderColor:     '#' + pal[3],
                 backgroundColor: '#' + pal[3],
                 borderWidth:     2,
             },
             {
                 label:           "stacked data",
                 data:            [ 10, 15, 22 ],
                 borderColor:     '#' + pal[5],
                 backgroundColor: pattern( '#' + pal[5], 'lh' ),
                 borderWidth:     2,
             }
         ]
     },
     options: {
         responsive: false,
         scales: {
             xAxes: [{
                 stacked: true,
             }],
             yAxes: [{
                 stacked: true,
                 ticks: {
                     beginAtZero: true,
                     min: 0
                 }
             }]
         }
     }
 })
</script>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
	<!-- https://github.com/google/palette.js -->
	<script src="../../palette.js/palette.js"></script>
	</head>
	<body>
	<canvas id="myChart" width="400" height="400"></canvas>
	</body>

	<script>

	//----------------------------------------------------------------------------
	// To make shape pattern
	//----------------------------------------------------------------------------
	//----------------------------------------------------------------------------
	function generateShape (size) {
	var canvas = document.createElement('canvas');
	var context = canvas.getContext('2d');

	canvas.width = size;
	canvas.height = size;

	return { canvas, context };
	}

	function square (width) {
	var shape = generateShape(width);
	var height = width;

	shape.context.fillStyle = 'rgb(255, 255, 255)';
	shape.context.fillRect(0, 0, width / 2, height / 2);
	shape.context.fillRect(width / 2, height / 2, width / 2, height / 2);

	return shape.canvas;
	}

	function lineHorizontal (width) {
	var thickness = width / 4;
	var shape = generateShape(width);

	shape.context.fillStyle = 'rgb(255, 255, 255)';
	shape.context.fillRect(0, 0, width, thickness);
	shape.context.fillRect(0, thickness * 2, width, thickness);

	return shape.canvas;
	}

	function lineVertical (width) {
	let thickness = width / 4;
	let shape = generateShape(width);

	shape.context.fillStyle = 'rgb(255, 255, 255)';
	shape.context.fillRect(0, 0, thickness, width);
	shape.context.fillRect(thickness * 2, 0, thickness, width);

	return shape.canvas;
	}

	var shapes = {
	sq: square,
	lh: lineHorizontal,
	lv: lineVertical,
	};

	function pattern( bgColor, shape ){
	var patternCanvas = document.createElement('canvas');
	var patternContext = patternCanvas.getContext('2d');
	var size = 20;
	var outerSize = size * 2;
	var shapeType = shapes[shape];

	patternCanvas.width = outerSize;
	patternCanvas.height = outerSize;
	patternContext.fillStyle = bgColor;
	patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);

	pattern = patternContext.createPattern( shapeType(size, bgColor), 'repeat');
	patternContext.fillStyle = pattern;
	patternContext.fillRect(0, 0, outerSize, outerSize);

	patternFill = patternContext.createPattern(patternCanvas, 'repeat');
	patternFill.shapeType = shapeType;

	return patternFill;
	}
	//----------------------------------------------------------------------------

	// get palette from palette.js
	var pal = palette('cb-BuGn', 8 );
	var ctx = document.getElementById("myChart").getContext("2d");

	//Global parameter
	Chart.defaults.global.animation = 0;

	var myChart = new Chart(ctx, {
	type: 'bar',
	data: {
	labels: [ "Day1", "Day2", "Day3" ],
	datasets: [
	{
	label: "base data",
	data: [ 27, 33, 49 ],
	borderColor: '#' + pal[3],
	backgroundColor: '#' + pal[3],
	borderWidth: 2,
	},
	{
	label: "stacked data",
	data: [ 10, 15, 22 ],
	borderColor: '#' + pal[5],
	backgroundColor: pattern( '#' + pal[5], 'lh' ),
	borderWidth: 2,
	}
	]
	},
	options: {
	responsive: false,
	scales: {
	xAxes: [{
	stacked: true,
	}],
	yAxes: [{
	stacked: true,
	ticks: {
	beginAtZero: true,
	min: 0
	}
	}]
	}
	}
	})
	</script>