Create a gist now

Instantly share code, notes, and snippets.

<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment