JavaScript
var ctx = document.getElementById('myChart').getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 512, 256);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
var chart = new Chart(ctx, {
"type": "bubble",
"data": {
"datasets": [{
"data": [
{"x": 0, "y": 10},
{"x": 1, "y": 10},
{"x": 2, "y": 10},
{"x": 3, "y": 10},
{"x": 4, "y": 10},
{"x": 5, "y": 10},
{"x": 6, "y": 10},
{"x": 7, "y": 10},
{"x": 8, "y": 10},
{"x": 9, "y": 10},
{"x": 10, "y": 10},
{"x": 11, "y": 10},
{"x": 12, "y": 10},
{"x": 13, "y": 10},
{"x": 14, "y": 10},
{"x": 15, "y": 10},
{"x": 16, "y": 10}
],
"pointStyle": "circle"
}, {
"data": [
{"x": 0, "y": 9},
{"x": 1, "y": 9},
{"x": 2, "y": 9},
{"x": 3, "y": 9},
{"x": 4, "y": 9},
{"x": 5, "y": 9},
{"x": 6, "y": 9},
{"x": 7, "y": 9},
{"x": 8, "y": 9},
{"x": 9, "y": 9},
{"x": 10, "y": 9},
{"x": 11, "y": 9},
{"x": 12, "y": 9},
{"x": 13, "y": 9},
{"x": 14, "y": 9},
{"x": 15, "y": 9},
{"x": 16, "y": 9}
],
"pointStyle": "cross"
}, {
"data": [
{"x": 0, "y": 8},
{"x": 1, "y": 8},
{"x": 2, "y": 8},
{"x": 3, "y": 8},
{"x": 4, "y": 8},
{"x": 5, "y": 8},
{"x": 6, "y": 8},
{"x": 7, "y": 8},
{"x": 8, "y": 8},
{"x": 9, "y": 8},
{"x": 10, "y": 8},
{"x": 11, "y": 8},
{"x": 12, "y": 8},
{"x": 13, "y": 8},
{"x": 14, "y": 8},
{"x": 15, "y": 8},
{"x": 16, "y": 8}
],
"pointStyle": "crossRot"
}, {
"data": [
{"x": 0, "y": 7},
{"x": 1, "y": 7},
{"x": 2, "y": 7},
{"x": 3, "y": 7},
{"x": 4, "y": 7},
{"x": 5, "y": 7},
...